Angular 18迁移后Cypress E2E测试报错：@angular/compiler不可用

迁移Angular项目至18版本后，执行Cypress E2E测试时触发如下错误：

The following error originated from your test code, not from Cypress.

> The injectable 'PlatformNavigation' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available.

The injectable is part of a library that has been partially compiled.
However, the Angular Linker has not processed the library such that JIT compilation is used as fallback.

Ideally, the library is processed using the Angular Linker to become fully AOT compiled.
Alternatively, the JIT compiler should be loaded by bootstrapping using '@angular/platform-browser-dynamic' or '@angular/platform-server',
or manually provide the compiler with 'import "@angular/compiler";' before bootstrapping.

When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.

Cypress could not associate this error to any specific test.

We dynamically generated a new test to display this failure.

node_modules/@angular/core/fesm2022/core.mjs:3489:1


>message += `Alternatively, the JIT compiler should be loaded by bootstrapping using '@angular/platform-browser-dynamic' or '@angular/platform-server',\n`;
>message += `or manually provide the compiler with 'import >"@angular/compiler";' before bootstrapping.`;
>throw new Error(message);
 ^
>}
>else {
>  throw new Error('JIT compiler unavailable');


at getCompilerFacade (webpack://recorder/./node_modules/@angular/core/fesm2022/core.mjs:3489)
    at Module.ɵɵngDeclareFactory (webpack://recorder/./node_modules/@angular/core/fesm2022/core.mjs:37979)
    at <static_initializer> (webpack://recorder/./node_modules/@angular/common/fesm2022/common.mjs:33:46)
    at ./node_modules/@angular/common/fesm2022/common.mjs (webpack://recorder/./node_modules/@angular/common/fesm2022/common.mjs:25)
    at __webpack_require__ (webpack://recorder/webpack/bootstrap:19)
    at ./node_modules/@angular/common/fesm2022/http.mjs (http://localhost:52444/__cypress/tests?p=cypress\e2e\login\login.cy.js:7530:73)
    at __webpack_require__ (webpack://recorder/webpack/bootstrap:19)
    at ./node_modules/keycloak-angular/fesm2022/keycloak-angular.mjs (http://localhost:52444/__cypress/tests?p=cypress\e2e\login\login.cy.js:52812:78)
    at __webpack_require__ (webpack://recorder/webpack/bootstrap:19)
    at eval (webpack://recorder/./cypress/e2e/login/login.cy.js:2)
From previous event:
    at Promise.longStackTracesCaptureStackTrace [as _captureStackTrace] (http://localhost:52444/__cypress/runner/cypress_runner.js:3486:19)
    at Promise._then (http://localhost:52444/__cypress/runner/cypress_runner.js:1239:17)
    at Promise.then (http://localhost:52444/__cypress/runner/cypress_runner.js:1132:17)
    at runScriptsFromUrls (http://localhost:52444/__cypress/runner/cypress_runner.js:111747:136)
    at Object.runScripts (http://localhost:52444/__cypress/runner/cypress_runner.js:111788:12)
    at $Cypress.onSpecWindow (http://localhost:52444/__cypress/runner/cypress_runner.js:41303:67)

错误核心是依赖库（此处为keycloak-angular）未被Angular Linker处理，导致PlatformNavigation需要JIT编译，但当前构建未包含@angular/compiler。

解决方案 #

1. 升级依赖库至Angular 18兼容版本 #

检查keycloak-angular的npm版本，升级到支持Angular 18的最新版（通常v18.x或更高版本已适配Ivy和Angular 18的AOT要求）。

2. 启用Angular Linker处理依赖库 #

在angular.json的构建配置中，启用Linker并允许CommonJS依赖：

"architect": {
  "build": {
    "options": {
      "allowedCommonJsDependencies": ["keycloak-angular"],
      "linker": {
        "enabled": true
      }
    }
  }
}

Linker会将未完全AOT编译的库转换为兼容格式，避免JIT编译需求。

3. 在测试环境手动引入JIT编译器 #

如果无法立即升级依赖，可在Cypress测试入口文件（如cypress/support/e2e.ts）顶部添加：

import '@angular/compiler';

或者在测试环境的main.ts中改用动态引导方式：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

4. 检查Cypress的Webpack配置 #

若使用自定义Webpack配置，确保@angular/compiler被包含在测试构建中：

module.exports = {
  entry: ['@angular/compiler', './src/main.ts'],
  // 其他Webpack配置项
};

5. 确认测试环境AOT配置 #

确保angular.json中e2e测试的AOT编译已启用：

"architect": {
  "e2e": {
    "options": {
      "aot": true
    }
  }
}

内容的提问来源于stack exchange，提问作者krishna