Angular 18 Error: NG0203: inject() must be called from an injection context such as a...

I am updating an Angular Application from version 17.3.10 to version 18.2.13.

I did several steps, and tried to update all packages so that the work with the newer Version.

Now I get the Error at the very application start, before we leave the constructor of the app.component.ts. (I have a debug after constructor, it's not called)

The Error:

Error: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with runInInjectionContext. Find more at https://angular.dev/errors/NG0203
​

I tried several approaches, e.g. finding all Inject calls like:

constructor(@Inject(DOCUMENT) private document: Document,
[...]


and replacing it with:

import { inject } from '@angular/core';
[...]
private document = inject(DOCUMENT);


The Error stays the same.

My dependencies & devDependencies:

"dependencies": {
"@angular/animations": "18.2.13",
"@angular/cdk": "18.2.13",
"@angular/common": "18.2.13",
"@angular/compiler": "18.2.13",
"@angular/core": "18.2.13",
"@angular/forms": "18.2.13",
"@angular/localize": "18.2.13",
"@angular/material": "18.2.13",
"@angular/material-moment-adapter": "18.2.13",
"@angular/platform-browser": "18.2.13",
"@angular/platform-browser-dynamic": "18.2.13",
"@angular/router": "18.2.13",
"@babel/core": "^7.18.0",
"@material/snackbar": "^10.0.0",
"@ngbracket/ngx-layout": "^18.0.0",
"@ngx-translate/core": "^16.0.4",
"@progress/kendo-angular-buttons": "18.5.2",
"@progress/kendo-angular-common": "18.5.2",
"@progress/kendo-angular-dateinputs": "18.5.2",
"@progress/kendo-angular-dialog": "18.5.2",
"@progress/kendo-angular-dropdowns": "18.5.2",
"@progress/kendo-angular-icons": "18.5.2",
"@progress/kendo-angular-indicators": "18.5.2",
"@progress/kendo-angular-inputs": "18.5.2",
"@progress/kendo-angular-intl": "18.5.2",
"@progress/kendo-angular-l10n": "18.5.2",
"@progress/kendo-angular-notification": "18.5.2",
"@progress/kendo-angular-popup": "18.5.2",
"@progress/kendo-angular-scheduler": "18.5.2",
"@progress/kendo-angular-treeview": "18.5.2",
"@progress/kendo-angular-upload": "18.5.2",
"@progress/kendo-data-query": "^1.6.0",
"@progress/kendo-date-math": "^1.5.4",
"@progress/kendo-drawing": "^1.19.0",
"@progress/kendo-licensing": "^1.3.1",
"@progress/kendo-recurrence": "^1.0.0",
"@progress/kendo-svg-icons": "^4.0.0",
"@progress/kendo-theme-default": "^5.0.0",
"ajv": "^8.11.0",
"ajv-keywords": "^5.1.0",
"cjs": "0.0.11",
"dns-packet": "^5.6.1",
"moment": "^2.29.4",
"ngx-cookie-service": "18.0.0",
"ngx-mat-select-search": "8.0.1",
"rxjs": "^7.5.7",
"tslib": "^2.5.0",
"zone.js": "~0.14.10"
},
"devDependencies": {
"@angular-devkit/build-angular": "^18.2.18",
"@angular-eslint/builder": "19.2.1",
"@angular-eslint/eslint-plugin": "19.2.1",
"@angular-eslint/eslint-plugin-template": "19.2.1",
"@angular-eslint/schematics": "19.2.1",
"@angular-eslint/template-parser": "19.2.1",
"@angular/cli": "18.2.18",
"@angular/compiler-cli": "18.2.13",
"@types/jasmine": "~3.10.0",
"@types/node": "^18.15.0",
"@typescript-eslint/eslint-plugin": "^8.0.0",
"@typescript-eslint/parser": "^8.0.0",
"@typescript-eslint/utils": "^8.0.0",
"eslint": "^8.43.0",
"glob-parent": "^6.0.2",
"jasmine-core": "^4.5.0",
"jasmine-spec-reporter": "~5.0.0",
"jszip": "^3.7.1",
"karma": "^6.4.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "^1.5.0",
"path-parse": "^1.0.7",
"protractor": "7.0.0",
"ts-node": "~10.9.1",
"typescript": "~5.4.5"
},


My working theory is, one of the package does an (Angular 18)-illegal inject, but it is so hard to find out which one.

Do you have any clue how I can resolve the error?

Thanks in advance!

Continue reading...