18

我想升级我的传统 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 作为我的模块加载器。）

4

5 回答 5

29

我刚刚遇到了同样的问题，经过很长时间的尝试（并查看了您的存储库），我认为这是由于我的 emitDecoratorMetadata 未在 tsconfig 中设置

于 2017-12-18T07:46:26.740 回答
4

对我来说，错误是由 angular 不支持 typescript v3 引起的。角度使用的装饰器在打字稿中仍然是实验性的，它似乎被版本改变了......

官方指南也没有提到两个需要的包：reflect-metadata, zone.js 但下面的教程提到了它： https ://scotch.io/tutorials/get-started-with-ngupgrade-going-from-angularjs-to-有角度的

于 2018-08-21T13:54:00.983 回答
3

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

    {
      resolve: {
        alias: {
          "@angular/upgrade/static": "@angular/upgrade/bundles/upgrade-static.umd.js"
        }
      }
    }
于 2018-06-28T09:52:25.493 回答
1

我终于完成了这项工作，并创建了一个示例 GitHub 存储库，显示了使用 webpack 捆绑混合应用程序的基本解决方案：

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

于 2017-08-25T07:18:58.783 回答
1

emitDecoratorMetadata即使标志设置为true ，我也遇到了这个问题。多亏了这个答案，我终于发现我还必须 import reflect-metadata。我在这里回答，因为它是一个更高的搜索结果，也许它会让其他人在未来更容易解决！

于 2021-06-30T17:03:41.650 回答