Angular JIT 编译失败：未加载“@angular 编译器”! - Shell-Bash

如果你在使用 Angular 开发应用时遇到了 “Angular JIT 编译失败：未加载“@angular 编译器”!” 的错误，那么这篇文章就是为你准备的。在这篇文章中，我们将会探讨这个错误的原因，以及如何解决这个问题。

错误原因

这个错误通常是由于缺少 @angular/compiler 模块所导致的。在 Angular 中，@angular/compiler 模块是负责编译 Angular 应用的。它包含了 Angular JIT 编译器的核心实现，可以将 Angular 组件的源代码转换成可执行的 JavaScript 代码。

当 Angular JIT 编译器没有正确加载时，就会出现 “Angular JIT 编译失败：未加载“@angular 编译器”!” 的错误。

解决方法

要解决这个错误，我们需要确保 @angular/compiler 模块已经被正确安装，并且在应用程序中正确导入。下面是一些可能有用的解决方法：

方法 1: 检查 @angular/compiler 模块是否存在

首先，我们需要确保 @angular/compiler 模块已经被安装到应用程序中。可以通过运行以下命令来检查：

npm ls @angular/compiler

如果 @angular/compiler 模块不存在，那么就需要将它安装到应用程序中：

npm install @angular/compiler --save

方法 2: 检查 tsconfig.json 是否正确配置

如果 @angular/compiler 模块已经被安装到应用程序中，那么需要检查 tsconfig.json 文件是否正确配置。确保 tsconfig.json 文件中包含了以下配置项：

{
  "compilerOptions": {
    "target": "es2015",
    "module": "es2015",
    "lib": ["es2018", "dom"],
    "declaration": false,
    "sourceMap": true,
    "outDir": "./dist/out-tsc",
    "baseUrl": "./",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "noImplicitAny": false,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "moduleResolution": "node"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "src/**/*.spec.ts"]
}

特别注意，experimentalDecorators 和 emitDecoratorMetadata 这两个配置项必须设置为 true。

方法 3: 检查 main.ts 是否正确导入编译器

最后，我们需要确保 main.ts 文件中正确导入了 Angular JIT 编译器。以下是一个可能的示例：

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();
}

import {Compiler} from '@angular/core';

platformBrowserDynamic().bootstrapModule(AppModule)
  .then((moduleRef) => {
    const compiler: Compiler = moduleRef.injector.get(Compiler);
  })
  .catch(err => console.error(err));

在上面的代码中，我们导入了 Angular 编译器，并且确保了它被正确注入。

结论

如果你在使用 Angular 开发应用时遇到了 “Angular JIT 编译失败：未加载“@angular 编译器”!” 的错误，那么通过上面的方法，你应该能够成功解决这个问题。通常情况下，这个错误是由 @angular/compiler 模块缺失导致的，因此你需要确保它已经被正确安装。如果你遇到了其他问题，请留言并提出，我们将尽力为你解答。