For days, I've been struggling to figure out why my browser console is showing this error. Here's the full stack trace:
Unhandled Promise rejection: NG0202: This constructor is not compatible with Angular Dependency Injection because its dependency at index 0 of the parameter list is invalid.
This can happen if the dependency type is a primitive like a string or if an ancestor of this class is missing an Angular decorator.
Please ensure that 1) the type for the parameter at index 0 is correct and 2) the correct Angular decorators are defined for this class and its ancestors. ; Zone: <root> ; Task: Promise.then ; Value: Error: NG0202: This constructor is not compatible with Angular Dependency Injection because its dependency at index 0 of the parameter list is invalid.
This can happen if the dependency type is a primitive like a string or if an ancestor of this class is missing an Angular decorator.
Please ensure that 1) the type for the parameter at index 0 is correct and 2) the correct Angular decorators are defined for this class and its ancestors.
at ɵɵinvalidFactoryDep (injector_compatibility.ts:94:9)
at Object.AppModule_Factory [as useFactory] (ɵfac.js? [sm]:1:1)
at Object.factory (r3_injector.ts:450:32)
at R3Injector.hydrate (r3_injector.ts:352:29)
at R3Injector.get (r3_injector.ts:235:23)
at injectInjectorOnly (injector_compatibility.ts:64:29)
at ɵɵinject (injector_compatibility.ts:81:58)
at useValue (provider_collection.ts:249:62)
at R3Injector.resolveInjectorInitializers (r3_injector.ts:284:9)
at new NgModuleRef (ng_module_ref.ts:86:22) Error: NG0202: This constructor is not compatible with Angular Dependency Injection because its dependency at index 0 of the parameter list is invalid.
This can happen if the dependency type is a primitive like a string or if an ancestor of this class is missing an Angular decorator.
Please ensure that 1) the type for the parameter at index 0 is correct and 2) the correct Angular decorators are defined for this class and its ancestors.
at ɵɵinvalidFactoryDep (http://localhost:3300/node_modules/@angular/core/fesm2015/core.mjs:4774:11)
at Object.AppModule_Factory [as useFactory] (ng:///AppModule/ɵfac.js:4:37)
at Object.factory (http://localhost:3300/node_modules/@angular/core/fesm2015/core.mjs:6968:38)
at R3Injector.hydrate (http://localhost:3300/node_modules/@angular/core/fesm2015/core.mjs:6881:35)
at R3Injector.get (http://localhost:3300/node_modules/@angular/core/fesm2015/core.mjs:6769:33)
at injectInjectorOnly (http://localhost:3300/node_modules/@angular/core/fesm2015/core.mjs:4758:33)
at ɵɵinject (http://localhost:3300/node_modules/@angular/core/fesm2015/core.mjs:4762:61)
at useValue (http://localhost:3300/node_modules/@angular/core/fesm2015/core.mjs:6561:65)
at R3Injector.resolveInjectorInitializers (http://localhost:3300/node_modules/@angular/core/fesm2015/core.mjs:6818:17)
at new NgModuleRef (http://localhost:3300/node_modules/@angular/core/fesm2015/core.mjs:21725:26)
This is what my app.module.ts file looks like:
import "@angular/compiler";
import "zone.js";
import {DoBootstrap, NgModule} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// import moment from "moment";
@NgModule({
imports: [
BrowserModule,
UpgradeModule
],
})
export class AppModule implements DoBootstrap {
constructor(private upgrade: UpgradeModule) { }
ngDoBootstrap() {
this.upgrade.bootstrap(document.body, ['CoreApplication'], { strictDi: true });
}
}
platformBrowserDynamic().bootstrapModule(AppModule);
I'm utilizing importmap to manage ES modules, and it seems to be working fine. However, upon bootstrapping the application, I encounter the mentioned error. Any assistance would be greatly appreciated.
[EDIT 1]
While attempting to debug the library, I noticed that the error occurs at provider.useFactory(), where the provider object appears as follows:
{
deps: []
provide: ƒ AppModule(upgrade)
useFactory: ƒ AppModule_Factory(t)
[[Prototype]]: Object
}
The line at https://github.com/angular/angular/blob/211c35358a322f6857c919a2cc80218fbd235649/packages/core/src/di/r3_injector.ts#L450 uses injectArgs to retrieve an array, but in my case, it returns an empty array causing the function to halt. Should I declare a factory somewhere? If so, where should it be declared?
[EDIT 2]
It seems that the function provider.useFactory is defined in this manner:
'function AppModule_Factory(t) {\n return new (t || jit_AppModule_0)(jit___invalidFactoryDep_1(0));\n}'