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

[pmutua]

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

[AlexMiniApps]

@pmutua Hello, let me check.

[AlexMiniApps]

@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?

[pmutua]

@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?

[pmutua]

@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.

[AlexMiniApps]

@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.

[AlexMiniApps]

@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"
}
}

[pmutua]

@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.

[AlexMiniApps]

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

[pmutua]

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

Thank you