当设置混合AngularJS / Angular应用程序时，出现“无法解析所有参数”错误

Question

我希望升级我的传统 Angular JS 应用程序，我一直在遵循 angular.io 上关于设置 混合 应用程序的文档。

现在我的 app.ts 中引导过程看起来像：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from "./app.module";
platformBrowserDynamic().bootstrapModule(AppModule);

我的新app.module.ts文件如下：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';

@NgModule({
  imports: [
  BrowserModule,
  UpgradeModule
]})
export class AppModule {
  constructor(private upgrade: UpgradeModule) { }
  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, ['myApp'], { strictDi: true });
  }
}

然而，当我运行这个应用程序时，我收到了以下错误提示：

compiler.es5.js:1503 Uncaught Error: Can't resolve all parameters for AppModule: (?).
at syntaxError (compiler.es5.js:1503)
at CompileMetadataResolver._getDependenciesMetadata (compiler.es5.js:14780)
at CompileMetadataResolver._getTypeMetadata (compiler.es5.js:14648)
at CompileMetadataResolver.getNgModuleMetadata (compiler.es5.js:14489)
at JitCompiler._loadModules (compiler.es5.js:25561)
at JitCompiler._compileModuleAndComponents (compiler.es5.js:25520)
at JitCompiler.compileModuleAsync (compiler.es5.js:25482)
at PlatformRef_._bootstrapModuleWithZone (core.es5.js:4786)
at PlatformRef_.bootstrapModule (core.es5.js:4772)
at Object.map../af (app.ts:487)

我认为Angular无法找到UpgradeModule以解决AppModule中的依赖关系。

我的问题是： 在我的引导过程中是否缺少某些内容以修复此问题？

（注意：这可能与我使用webpack作为模块加载器有关，也可能不相关。）

- Røye

---

你已经让它工作了，但你知道问题出在哪里吗？ - Matt d'

在我的情况下，是 tsconfig 配置文件出了问题。我接受了下面 Adam 的答案。 - Røye

Answer 1

我曾经遇到过同样的问题，在尝试了很久之后（并查看了您的存储库），我认为这是由于我的tsconfig中未设置emitDecoratorMetadata造成的

- Adam Butler

---

差点自杀了，最后一次谷歌搜索时，我找到了你的答案。你拯救了我的生命。谢谢你。 - Laurence

Answer 2

对我来说，错误是由于Angular不支持TypeScript v3引起的。Angular使用的装饰器在TypeScript中仍然是实验性的，看起来在不同版本中发生了变化...

此外，官方指南没有提到两个必需的包： reflect-metadata、zone.js， 但以下教程提到了它们： https://scotch.io/tutorials/get-started-with-ngupgrade-going-from-angularjs-to-angular

- garaboncias

Answer 3

对我来说，已接受的答案不起作用，因为我已经设置了它。个人认为我必须将此映射添加到我的webpack别名中。

    {
      resolve: {
        alias: {
          "@angular/upgrade/static": "@angular/upgrade/bundles/upgrade-static.umd.js"
        }
      }
    }

- Romain Braun

Answer 4

我也遇到了这个问题，即使将emitDecoratorMetadata标志设置为true。感谢this answer，我最终发现我还需要导入reflect-metadata。我在这里回答，因为它是更高的搜索结果，也许对其他人在未来解决问题有所帮助！

- coppereyecat

---

谢谢，这真的很痛苦解决。 - Onilol

Answer 5

我终于让它工作了，并创建了一个示例 GitHub 存储库，展示了使用 webpack 打包混合应用程序的基本解决方案:

https://github.com/robinho81/angularjs-webpack-upgrade

- Røye