Skip to content

Angular Code Input Component throwing "ERROR ReferenceError: document is not defined  #115

Open
Open
Angular Code Input Component throwing "ERROR ReferenceError: document is not defined #115
Labels
investigating

Description

@pmutua
pmutua
opened on Apr 18, 2024

I encountered an error when a component loaded, which is using the Angular Code Input Component. The error message received is:

- Changes detected. Rebuilding...
ERROR ReferenceError: document is not defined
    at _CodeInputComponent.focusOnInputAfterAppearing (c:/Users/X/Documents/sourcecode/web/node_modules/angular-code-input/fesm2022/angular-code-input.mjs:300:52)
    at _CodeInputComponent.ngAfterViewChecked (c:/Users/X/Documents/sourcecode/web/node_modules/angular-code-input/fesm2022/angular-code-input.mjs:103:10)
    at callHookInternal (c:/Users/X/Documents/sourcecode/web/node_modules/@angular/core/fesm2022/core.mjs:6117:14)
    at callHook (c:/Users/X/Documents/sourcecode/web/node_modules/@angular/core/fesm2022/core.mjs:6148:9)
    at callHooks (c:/Users/X/Documents/sourcecode/web/node_modules/@angular/core/fesm2022/core.mjs:6099:17)
    at executeInitAndCheckHooks (c:/Users/X/Documents/sourcecode/web/node_modules/@angular/core/fesm2022/core.mjs:6049:9)
    at refreshView (c:/Users/X/Documents/sourcecode/web/node_modules/@angular/core/fesm2022/core.mjs:12171:21)
    at detectChangesInView (c:/Users/X/Documents/sourcecode/web/node_modules/@angular/core/fesm2022/core.mjs:12324:9)
    at detectChangesInViewIfAttached (c:/Users/X/Documents/sourcecode/web/node_modules/@angular/core/fesm2022/core.mjs:12287:5)
    at detectChangesInEmbeddedViews (c:/Users/X/Documents/sourcecode/web/node_modules/@angular/core/fesm2022/core.mjs:12244:13)
ERROR ReferenceError: document is not defined
    at _CodeInputComponent.focusOnInputAfterAppearing (c:/Users/X/Documents/sourcecode/web/node_modules/angular-code-input/fesm2022/angular-code-input.mjs:300:52)
    at _CodeInputComponent.ngAfterViewChecked (c:/Users/X/Documents/sourcecode/web/node_modules/angular-code-input/fesm2022/angular-code-input.mjs:103:10)
    at callHookInternal (c:/Users/X/Documents/sourcecode/web2/node_modules/@angular/core/fesm2022/core.mjs:6117:14)
    at callHook (c:/Users/X/Documents/sourcecode/web/node_modules/@angular/core/fesm2022/core.mjs:6148:9)
    at callHooks (c:/Users/X/Documents/sourcecode/web/node_modules/@angular/core/fesm2022/core.mjs:6099:17)
    at executeInitAndCheckHooks (c:/Users/X/Documents/sourcecode/web/node_modules/@angular/core/fesm2022/core.mjs:6049:9)
    at refreshView (c:/Users/X/Documents/sourcecode/web/node_modules/@angular/core/fesm2022/core.mjs:12171:21)
    at detectChangesInView (c:/Users/X/Documents/sourcecode/web/node_modules/@angular/core/fesm2022/core.mjs:12324:9)
    at detectChangesInViewIfAttached (c:/Users/X/Documents/sourcecode/web/node_modules/@angular/core/fesm2022/core.mjs:12287:5)

Details:

The error originates from the Angular Code Input Component and seems to be related to the usage of document which is not available when navigating to the route that has component that is using the Angular Code Input Component.

Steps to Reproduce:

  1. Start the Angular project.
  2. Navigate to the route containing the component that utilizes the Angular Code Input Component. The component loads, but the terminal shows error logs.

Expected Behavior:

The component loads successfully after navigation without any errors.

Environment:

Angular version: 17.1.0
Operating System: Windows
Node.js version: v18.19.1
npm: 10.2.4

Activity

  1. AlexMiniApps commented on Apr 19, 2024

    @AlexMiniApps
    AlexMiniApps
    on Apr 19, 2024
    Owner

    @pmutua Hello, let me check.

  2. AlexMiniApps commented on Apr 19, 2024

    @AlexMiniApps
    AlexMiniApps
    on Apr 19, 2024
    Owner

    @pmutua Just created a project with angular 17 and the component. It works fine. Here is the project: https://stackblitz.com/edit/stackblitz-starters-zxghts?file=src%2Fmain.ts

    Do you use SSR?

  3. AlexMiniApps
    added
    investigating
    on Apr 19, 2024

  4. pmutua commented on Apr 19, 2024

    @pmutua
    pmutua
    on Apr 19, 2024
    Author

    @pmutua Just created a project with angular 17 and the component. It works fine. Here is the project: https://stackblitz.com/edit/stackblitz-starters-zxghts?file=src%2Fmain.ts

    Do you use SSR?

    Yes, the application has ssr enabled. What is the work around to resolve this?

  5. pmutua commented on Apr 19, 2024

    @pmutua
    pmutua
    on Apr 19, 2024
    Author

    @pmutua Just created a project with angular 17 and the component. It works fine. Here is the project: https://stackblitz.com/edit/stackblitz-starters-zxghts?file=src%2Fmain.ts

    Do you use SSR?

    Yes, the application has ssr enabled. What is the work around to resolve this?

    Hi @AlexMiniApps thank you for replying, yes the application is ssr enabled.

  6. AlexMiniApps commented on Apr 20, 2024

    @AlexMiniApps
    AlexMiniApps
    on Apr 20, 2024
    Owner

    @pmutua Actually the component is not ready to be used with SSR, sorry. I need a time to adapt it to make it usable with SSR enabled.

  7. AlexMiniApps
    added
    bugSomething isn't working
    and removed
    investigating
    on Apr 20, 2024
  8. AlexMiniApps
    added
    investigating
    and removed
    bugSomething isn't working
    on May 16, 2024

  9. AlexMiniApps commented on May 16, 2024

    @AlexMiniApps
    AlexMiniApps
    on May 16, 2024
    Owner

    @pmutua Actually I just checked the lib with the enabled SSR rendering on Angular 17 (17.3) and did not face with any errors.
    Here is my package json. If needed I can share the sources to allow you to check it locally.

    I checked it by the 'serve:ssr:test-app' command.

    {
    "name": "test-app",
    "version": "0.0.0",
    "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "serve:ssr:test-app": "node dist/test-app/server/server.mjs"
    },
    "private": true,
    "dependencies": {
    "@angular/animations": "^17.3.9",
    "@angular/common": "^17.3.9",
    "@angular/compiler": "^17.3.9",
    "@angular/core": "^17.3.9",
    "@angular/forms": "^17.3.9",
    "@angular/platform-browser": "^17.3.9",
    "@angular/platform-browser-dynamic": "^17.3.9",
    "@angular/platform-server": "^17.3.9",
    "@angular/router": "^17.3.9",
    "@angular/ssr": "^17.3.5",
    "angular-code-input": "^2.0.0",
    "express": "^4.18.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
    },
    "devDependencies": {
    "@angular-devkit/build-angular": "^17.3.7",
    "@angular/cli": "^17.3.7",
    "@angular/compiler-cli": "^17.3.9",
    "@types/express": "^4.17.17",
    "@types/jasmine": "~5.1.0",
    "@types/node": "^18.18.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.3.2"
    }
    }

  10. pmutua commented on May 24, 2024

    @pmutua
    pmutua
    on May 24, 2024
    Author

    @pmutua Actually I just checked the lib with the enabled SSR rendering on Angular 17 (17.3) and did not face with any errors.
    Here is my package json. If needed I can share the sources to allow you to check it locally.

    I checked it by the 'serve:ssr:test-app' command.

    {
    "name": "test-app",
    "version": "0.0.0",
    "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "serve:ssr:test-app": "node dist/test-app/server/server.mjs"
    },
    "private": true,
    "dependencies": {
    "@angular/animations": "^17.3.9",
    "@angular/common": "^17.3.9",
    "@angular/compiler": "^17.3.9",
    "@angular/core": "^17.3.9",
    "@angular/forms": "^17.3.9",
    "@angular/platform-browser": "^17.3.9",
    "@angular/platform-browser-dynamic": "^17.3.9",
    "@angular/platform-server": "^17.3.9",
    "@angular/router": "^17.3.9",
    "@angular/ssr": "^17.3.5",
    "angular-code-input": "^2.0.0",
    "express": "^4.18.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
    },
    "devDependencies": {
    "@angular-devkit/build-angular": "^17.3.7",
    "@angular/cli": "^17.3.7",
    "@angular/compiler-cli": "^17.3.9",
    "@types/express": "^4.17.17",
    "@types/jasmine": "~5.1.0",
    "@types/node": "^18.18.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.3.2"
    }
    }

    @AlexMiniApps please share the project I check it out. Thank you.

  11. AlexMiniApps commented on May 27, 2024

    @AlexMiniApps
    AlexMiniApps
    on May 27, 2024
    Owner

    @pmutua Try to use this one from archive:
    test-app.zip

  12. pmutua commented on May 29, 2024

    @pmutua
    pmutua
    on May 29, 2024
    Author

    @pmutua Try to use this one from archive: test-app.zip

    Thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    investigating

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions