Angular “角度cli构建产品”；未加载运行时编译器”；

我做了ng build-prod，遇到了一个奇怪的错误 _区域符号错误 :

我没有在我的应用程序中手动使用编译器。最奇怪的是，错误似乎来自于多填充。

---

如何解决这个问题？

这发生在@angular中/cli@1.0.0-rc.2在代码中使用时进行生产构建（

ng build-prod

）时

要替换

编译器

，您需要使用“动态组件创建”。见此:

---

此外，请检查是否正在导入polyfills.ts 我可以通过比较我的@angular/cli@1.0.0-rc2项目到一个新搭建的CLI项目，并注意到除了

.angular CLI.json

例如，我在

main.ts

导入'polyfills.ts'；//删除此行
从“@angular/core”导入{enableProdMode}；
从“@angular/platformBrowserDynamic”导入{platformBrowserDynamic}；
从“./app/app.module”导入{AppModule}；
从“./environments/environment”导入{environment}；
if（环境、生产）{
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”，
...

---

重复：

---

在我的例子中，它可以为构建禁用提前编译

ng build -prod --aot=false

通过这种方式，源代码仍然被打包和丑陋化，并且包含了即时编译器

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

编辑2018-07-11

似乎有两种情况：

1） 如果您的项目有意创建真正的动态组件，那么当前包含JIT编译器的唯一方法似乎是为生产构建禁用AOT。请参阅以进行讨论

2） 如果您的项目不需要动态创建组件，并且您不知道错误发生的原因，那么禁用AOT可以是一种解决方法，但要注意缺点。如果没有AOT，您的文件会变大，用户启动应用程序的时间也会变长。在这种情况下，调查为什么在生产构建中引用JIT编译器可能更合适

有一些SO讨论（，）表明延迟加载使用“编译器\u提供程序”的第三方模块可能是错误的原因。但在撰写本文时，他们还没有公认的答案

---

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

死灵巫术。。。我在没有明确使用编译器的情况下收到了相同的错误，因此花了一段时间才理解发生了什么

在对某些模块进行延迟加载时，AOT似乎无法确定需要哪些模块。结果是最终构建将不包括这些模块，当需要它们时，应用程序将尝试动态编译它们，但由于编译器不可用而失败

提供了解决方案，对我来说，它的工作原理如下：

export function getSomeModule() { return SomeModule; }

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

---

因此，模块的路径将被指示，并且AOT将通过

getSomeModule

函数（该函数在代码中未使用，但有助于AOT包含模块）了解

SomeModule

。

在尝试动态生成ViewChild时，我遇到了相同的错误。这与延迟加载略有不同，但它与本期的标题相匹配，因此我将在这里添加我的2美分，以防对任何人有所帮助

因为我在代码中显式使用编译器，所以需要将其包含在输出包中。我的做法很简单：

ng build --aot=false --buildOptimizer=false

我知道没有人喜欢关闭优化器，但在这种情况下，优化器是导致问题的原因，通过“优化”编译器

请注意，输出仍然是最小化/uglified的，因为如果您希望具有可读的输出，则有一个单独的标志：

ng build --aot=false --buildOptimizer=false --optimization=false

---

用于角度9+

因为这是搜索此错误时弹出的第一件事，所以我只想补充一点，在您执行以下操作时也会出现：

const路由=[{
路径：“”，
组件：ProfileComponent，
儿童：[
{
路径：“”，
loadChildren:（）=>import（'./profile-about/profile-about.module'）/。此处缺少（m=>m.ProfileAboutModule）
}
]
}];

而不是

const路由=[{
路径：“”，
组件：ProfileComponent，
儿童：[
{
路径：“”，
loadChildren:（）=>import（'./profile-about/profile-about.module'）。然后（m=>m.ProfileAboutModule）
}
]
}];

注意：

。然后（m=>m.ProfileAboutModule）

---

当

.then（m=>m.ProfileAboutModule）

丢失时，Angular编译器也会抛出

运行时编译器未加载

错误，因此也要注意这一点。

如果禁用AOT，则开始使用JIT编译，添加编译器。但是，如果您关心的是包大小，则这不是正确的方法。True。但是如果您需要在浏览器中使用JIT编译器，我知道禁用AOT是唯一的方法。你知道另一个解决办法吗？+1。我之所以使用它，是因为我在Angular 5中收到错误，但不清楚原因（我没有使用编译器类）。vendor.bundle.js确实要大得多，但如果它不经常更改，浏览器将缓存它（Chrome开发工具经常告诉它从磁盘缓存读取文件）。谢谢Alexei和Andurit。你的评论让我明白，至少有两种情况会导致错误。我是伊迪特

ng build --aot=false --buildOptimizer=false --optimization=false