可注入的“PlatformLocation”需要使用JIT编译器进行编译，但“@angular/compiler”不可用

Question

我的 Angular 应用程序通过 Node 16.13.0 提供服务。更新到 Angular 13 后，我收到以下错误：

\n

\n

可注入 [类 PlatformLocation] 的 JIT 编译失败\nfile:///Users/btaylor/work/angular-apps/dz-outages-ui/node_modules/@angular/core/fesm2015/core.mjs:4058\n抛出新错误(消息）；\n^

\n

\n

\n

错误：可注入的“PlatformLocation”需要使用 JIT 编译器进行编译，但“@angular/compiler”不可用。

\n

\n

\n

可注入程序是已部分编译的库的一部分。\n但是，Angular 链接器尚未处理该库，因此 JIT 编译用作后备。

\n

\n

\n

理想情况下，使用 Angular 链接器处理该库以进行完全 AOT 编译。\n或者，应使用 \'@angular/platform-b​​rowser-dynamic\' 或 \'@angular/platform-server\ 通过引导加载 JIT 编译器'，\也不在引导之前手动为编译器提供 \'import "@angular/compiler";\'。\nat getCompilerFacade (file:///Users/btaylor/work/angular-apps/dz-outages-ui/node_modules /@angular/core/fesm2015/core.mjs:4058:15)\nat 模块。\xc9\xb5\xc9\xb5ngDeclareFactory (文件:///Users/btaylor/work/angular-apps/dz-outages-ui/ node_modules/@angular/core/fesm2015/core.mjs:32999:22)\nat 文件:///Users/btaylor/work/angular-apps/dz-outages-ui/node_modules/@angular/common/fesm2015/common .mjs:90:28\nat ModuleJob.run (节点:internal/modules/esm/module_job:185:25)\nat 异步 Promise.all (索引 0)\nat 异步 ESMLoader.import (节点:internal/modules/esm /loader:281:24)\nat 异步 loadESM (节点:internal/process/esm_loader:88:5)\nat 异步handleMainPromise (节点:internal/modules/run_main:65:12)

\n

\n

我尝试了多种解决方案，例如：Angular JIT 编译失败：'@angular/compiler' 未加载

\n

目前，我"type": "module"的 package.json 中有

\n

我已将安装后命令更新为：ngcc --properties es2020 browser module main --first-only --create-ivy-entry-points

\n

我也添加import \'@angular/compiler\';到我的main.ts文件中。

\n

该项目将编译，但不会通过 Node 运行。

\n

Answer 1

我相信我已经找到了解决方案（假设您使用 jest 作为测试运行程序）。在test-setup.ts文件中，我的项目仍然使用过时的 jest-preset-Angular 导入。而不是import 'jest-preset-angular';尝试使用import 'jest-preset-angular/setup-jest';.

这为我解决了这个问题。

Answer 2

似乎 Angular 13babel-loader强制要求链接 Ivy 原生包。https://github.com/angular/angular/issues/44026#issuecomment-974137408 - 问题的发生是因为核心 Angular 库已经使用 Ivy 包格式进行了编译。

我还没有在自己的项目中进行更改，但是.mjs使用 babel 和特殊链接器处理文件应该足够了。

import { dynamicImport } from 'tsimportlib';

/**
 * Webpack configuration
 *
 * See: http://webpack.github.io/docs/configuration.html#cli
 */
export default async (options: IWebpackOptions) => {
    const linkerPlugin = await dynamicImport('@angular/compiler-cli/linker/babel', module);
    
    const config: any = {
        module: {
            rules: [{
                test: /\.mjs$/,
                loader: 'babel-loader',
                options: {
                    compact: false,
                    plugins: [linkerPlugin.default],
                },
                resolve: {
                    fullySpecified: false
                }
            }
        }
    }
}

一旦我能够自己测试它，我将对这篇文章进行更多更新。