从 AngularJS 迁移到 Angular 时出错:此构造函数与 Angular 依赖注入不兼容

Mat*_*van 7 angularjs typescript systemjs angular import-maps

几天来我一直在尝试理解为什么我的浏览器控制台上出现此错误,完整堆栈:

\n
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.\nThis can happen if the dependency type is a primitive like a string or if an ancestor of this class is missing an Angular decorator.\n\nPlease 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.\nThis can happen if the dependency type is a primitive like a string or if an ancestor of this class is missing an Angular decorator.\n\nPlease 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.\n    at \xc9\xb5\xc9\xb5invalidFactoryDep (injector_compatibility.ts:94:9)\n    at Object.AppModule_Factory [as useFactory] (\xc9\xb5fac.js? [sm]:1:1)\n    at Object.factory (r3_injector.ts:450:32)\n    at R3Injector.hydrate (r3_injector.ts:352:29)\n    at R3Injector.get (r3_injector.ts:235:23)\n    at injectInjectorOnly (injector_compatibility.ts:64:29)\n    at \xc9\xb5\xc9\xb5inject (injector_compatibility.ts:81:58)\n    at useValue (provider_collection.ts:249:62)\n    at R3Injector.resolveInjectorInitializers (r3_injector.ts:284:9)\n    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.\nThis can happen if the dependency type is a primitive like a string or if an ancestor of this class is missing an Angular decorator.\n\nPlease 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.\n    at \xc9\xb5\xc9\xb5invalidFactoryDep (http://localhost:3300/node_modules/@angular/core/fesm2015/core.mjs:4774:11)\n    at Object.AppModule_Factory [as useFactory] (ng:///AppModule/\xc9\xb5fac.js:4:37)\n    at Object.factory (http://localhost:3300/node_modules/@angular/core/fesm2015/core.mjs:6968:38)\n    at R3Injector.hydrate (http://localhost:3300/node_modules/@angular/core/fesm2015/core.mjs:6881:35)\n    at R3Injector.get (http://localhost:3300/node_modules/@angular/core/fesm2015/core.mjs:6769:33)\n    at injectInjectorOnly (http://localhost:3300/node_modules/@angular/core/fesm2015/core.mjs:4758:33)\n    at \xc9\xb5\xc9\xb5inject (http://localhost:3300/node_modules/@angular/core/fesm2015/core.mjs:4762:61)\n    at useValue (http://localhost:3300/node_modules/@angular/core/fesm2015/core.mjs:6561:65)\n    at R3Injector.resolveInjectorInitializers (http://localhost:3300/node_modules/@angular/core/fesm2015/core.mjs:6818:17)\n    at new NgModuleRef (http://localhost:3300/node_modules/@angular/core/fesm2015/core.mjs:21725:26)\n
Run Code Online (Sandbox Code Playgroud)\n

我的 app.module.ts 看起来像这样:

\n
    import "@angular/compiler";\n    import "zone.js";\n    import {DoBootstrap, NgModule} from \'@angular/core\';\n    import { BrowserModule } from \'@angular/platform-browser\';\n    import { UpgradeModule } from \'@angular/upgrade/static\';\n    import { platformBrowserDynamic } from \'@angular/platform-browser-dynamic\';\n    // import moment from "moment";\n    \n    @NgModule({\n        imports: [\n            BrowserModule,\n            UpgradeModule\n        ],\n    })\n    export class AppModule implements DoBootstrap {\n        constructor(private upgrade: UpgradeModule) { }\n        ngDoBootstrap() {\n            this.upgrade.bootstrap(document.body, [\'CoreApplication\'], { strictDi: true });\n        }\n    }\n\nplatformBrowserDynamic().bootstrapModule(AppModule);\n
Run Code Online (Sandbox Code Playgroud)\n

我正在使用 importmap 来处理 ES 模块,(据我所知)它正在工作,但在引导时应用程序因该错误而失败。有人能帮我吗?

\n

[编辑1]

\n

我正在尝试调试该库,错误出现在provider.useFactory(),控制台上的提供程序如下所示:

\n
{\n  deps: []\n  provide: \xc6\x92 AppModule(upgrade)\n  useFactory: \xc6\x92 AppModule_Factory(t)\n  [[Prototype]]: Object\n}\n
Run Code Online (Sandbox Code Playgroud)\n

https://github.com/angular/angular/blob/211c35358a322f6857c919a2cc80218fbd235649/packages/core/src/di/r3_injector.ts#L450中的行用于injectArgs返回一个数组,在我的情况下该数组为空,因此该函数确实不继续了。我需要申报一些工厂吗?如果是的话在哪里?

\n

[编辑2]

\n

该函数provider.useFactory似乎定义如下:

\n
\'function AppModule_Factory(t) {\\n  return new (t || jit_AppModule_0)(jit___invalidFactoryDep_1(0));\\n}\'\n
Run Code Online (Sandbox Code Playgroud)\n

小智 3

我看到了同样的问题,我可以通过在构造函数中添加注入令牌来解决它 constructor(@Inject(UpgradeModule) private upgrade: UpgradeModule) {}