Error while migrating from AngularJS to Angular: This constructor is not compatible with Angular Dependency Injection

Question

I've been trying for days to understand why I have this error on my browser console, the full stack:

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 check 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 check 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 check 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)

My app.module.ts looks like this:

    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 using importmap to handle ES modules, that (from what I can see) it is working but on bootstrap the application fails with that error. Can someone help me?

[EDIT 1]

I'm trying to debug the library, the error is raised at provider.useFactory(), the provider on console is presented like this:

{
  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 return an array that in my case is empty, due to this the function does not go on. Do I have to declare some factory? If so where?

[EDIT 2]

The function provider.useFactory seems to be defined as follows:

'function AppModule_Factory(t) {\n  return new (t || jit_AppModule_0)(jit___invalidFactoryDep_1(0));\n}'

Answer 1

I saw the same issue and I was able to resolve it by adding an Injection Token inside the constructor constructor(@Inject(UpgradeModule) private upgrade: UpgradeModule) {}