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

typescript

# 解决Angular CLI构建中的“未加载运行时编译器”错误

在使用Angular CLI进行生产构建时，有时候可能会遇到“未加载运行时编译器”的错误。这个问题通常表明在构建过程中出现了一些编译器相关的错误，可能是由于某些配置问题或依赖关系不正确导致的。在本文中，我们将探讨这个问题的可能原因，并提供解决方案。

## 问题背景

当你尝试运行类似于以下命令进行Angular项目的生产构建时：

bash
ng build --prod

可能会遇到类似于以下的错误：

ERROR in : "Uncaught Error: Template parse errors:
Can't bind to 'someProperty' since it isn't a known property of 'someComponent'.
1. If 'someComponent' is an Angular component and it has 'someProperty' input, then verify that it is part of this module.
2. If 'someComponent' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component."

这种错误通常是由于缺少运行时编译器导致的。

## 可能原因及解决方案

1. 未引入@angular/platform-browser-dynamic

错误可能是因为在你的应用程序中缺少@angular/platform-browser-dynamic模块。请确保在app.module.ts文件中引入了该模块，例如：

typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; // 确保引入该模块
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

2. 缺少enableIvy配置

在Angular版本9及以上，引入了Ivy渲染引擎。如果你的项目是在较早版本创建的，并在构建时出现问题，尝试在tsconfig.app.JSon文件中添加以下配置：

JSon
"angularCompilerOptions": {
  "enableIvy": false
}

3. 更新依赖项

确保你的@angular/cli和@angular/core的版本是最新的。可以使用以下命令更新：

bash
ng update @angular/cli @angular/core

4. 检查第三方库的兼容性

某些第三方库可能不兼容新版本的Angular。检查你的项目中使用的所有依赖项，并确保它们与你的Angular版本兼容。

##

在进行Angular CLI生产构建时遇到“未加载运行时编译器”的错误可能源于多个原因。通过确保引入正确的模块、更新依赖项、配置enableIvy等方式，你可以解决这一问题。在解决问题时，请注意查看详细的错误信息以更好地理解问题的根本原因。

希望本文对解决“未加载运行时编译器”错误有所帮助。如果你在实施这些解决方案时仍然遇到困难，请查阅官方文档或寻求社区的支持。