angular-cli build prod"未加载运行时编译器"

Question

我做了构建-prod并遇到了一个奇怪的错误,即_zone_symbol__error:

Error: Uncaught (in promise): Error: Runtime compiler is not loaded Error: Runtime compiler is not loaded at d (http://localhost:4200/polyfills.cd321326a3dfc08ceb46.bund

我没有在我的应用程序中手动使用编译器.最奇怪的是错误似乎来自polyfill.我怎么解决这个问题？

Answer 1

在我的例子中,它可以为构建禁用Ahead-of-Time编译

ng build -prod --aot=false

这样,源仍然是打包和丑化的,并且包含了Just-in-Time编译器.

main.bundle js文件比使用aot编译时小,但vendor.bundle js增加约1.5 MB.

编辑2018-07-11

似乎有两种情况:

1)如果您的项目有意创建真正的动态组件,目前包含JIT编译器的唯一方法似乎是禁用生产构建的AOT.有关讨论,请参阅https://github.com/angular/angular/issues/11780

2)如果项目不是需要动态地创建组件,你不知道为什么错误发生,禁用AOT可以是一个解决方法,但缺点提防.如果没有AOT,您的文件大小会更大,用户从应用程序开始需要更长的时间.在这种情况下,调查生成构建中引用JIT编译器的原因可能更为合适.

有一些SO讨论(AngularCli和AOT:错误错误:运行时编译器未加载,故障拍摄"运行时编译器未加载")周围建议延迟加载使用"COMPILER_PROVIDERS"的第三方模块可能是错误.在撰写本文时,他们没有接受的答案.

有关使用延迟加载模块时的另一个陷阱的描述,请参阅此线程中的Alexei的答案

Answer 2

死灵法...我在未明确使用编译器的情况下收到了相同的错误，因此花了一些时间才了解正在发生的事情。

在对某些模块进行延迟加载时，AOT似乎难以确定该线程中指示的所需模块。结果是最终版本将不包括这些模块，并且当需要它们时，应用程序将尝试动态编译它们，并且由于编译器不可用而失败。

这里提供了解决方案，对我来说，它的工作方式如下：

export function getSomeModule() { return SomeModule; }

export const routes: Routes = [
  // some routes here
  { path: "some", loadChildren: "./some/some.module#SomeModule" }
]; 

因此，将指示到模块的路径，并且AOT也将SomeModule通过该getSomeModule功能知道该信息（该代码未使用，但有助于AOT包括该模块）。

Answer 3

当在代码中使用该类进行生产构建 ( ng build -prod)时，这会在 @angular/cli@1.0.0-rc.2 中发生。compiler

要替换compiler您需要使用“动态组件创建”。看看这个：

• 如何使用/创建动态模板来使用 Angular 2.0 编译动态组件？

。

另外，检查您是否正在导入 polyfills.ts

我能够通过将我的 @angular/cli@1.0.0-rc2 项目与新搭建的 CLI 项目进行比较来摆脱这个问题，并注意到polyfills.ts除了在.angular-cli.json

例如，我正在polyfills.ts导入main.ts

import 'polyfills.ts'; // Remove this line
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

Polyfill.ts 只需要在.angular-cli.json这里：

...
  "index": "index.html",
  "main": "main.ts",
  "polyfills": "polyfills.ts",
  "test": "test.ts",
  "tsconfig": "tsconfig.app.json",
...

复制：

• 异常：未加载运行时编译器