webpack Angular 14:需要使用JIT编译器编译可注入的“PlatformLocation”,但“@angular/compiler”不可用

0pizxfdo  于 2023-01-26  发布在  Webpack
关注(0)|答案(1)|浏览(219)

我面临这个错误,尝试了几个解决方案,但没有一个工作:
错误:需要使用JIT编译器编译可注入的"PlatformLocation",但"@angular/compiler "不可用。
可注入是已部分编译的库的一部分。但是,Angular 链接器尚未处理该库,因此将JIT编译用作后备。
理想情况下,使用Angular 链接器处理库,使其完全AOT编译。或者,应使用"@angular/platform-browser-dynamic "或"@angular/platform-server"通过引导加载JIT编译器,或手动为编译器提供"import "@angular/compiler";'在引导之前。
因此,正如我所说,我已经尝试了不同的方法,我发现在互联网上:
1.使用似乎是强制性的巴伯尔装载机:
我的webpack. js:

module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          '@ngtools/webpack',
          {
            loader: 'cache-loader',
            options: {
              cacheDirectory: path.resolve('target/cache-loader')
            }
          },
          {
            loader: 'thread-loader',
            options: {
              // There should be 1 cpu for the fork-ts-checker-webpack-plugin.
              // The value may need to be adjusted (e.g. to 1) in some CI environments,
              // as cpus() may report more cores than what are available to the build.
              workers: require('os').cpus().length - 1
            }
          },
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true,
              happyPackMode: true
            }
          }
        ],
        exclude: /(node_modules)/
      },
      {
        test: /\.m?js$/,
        exclude: {
          and: [/node_modules/],
          not: [
            /unfetch/,
            /d3-array|d3-scale/,
            /@hapi[\\/]joi-date/,
          ]
        },
        use: {
          loader: 'babel-loader',
          options: {
            plugins: ['@angular/compiler-cli/linker/babel'],
            compact: false,
            cacheDirectory: true,
          }
        }
      },
      {
        test: /\.scss$/,
        use: ['to-string-loader', 'css-loader', {
          loader: 'sass-loader',
          options: { implementation: sass }
        }],
        exclude: /(vendor\.scss|global\.scss)/
      },
      {
        test: /(vendor\.scss|global\.scss)/,
        use: ['style-loader', 'css-loader', 'postcss-loader', {
          loader: 'sass-loader',
          options: { implementation: sass }
        }]
      }]
  }

在这种情况下,可能把简单的字符串'@angular/compiler-cli/linker/babel'到插件数组的原因,但我不能importe它,因为:
从"@angular/compiler-cli/linker/babel "导入链接器插件;^^^^^^语法错误:不能在模块外部使用import语句
当我在package.json中将type更改为module时,会遇到以下问题:

const webpack = require('webpack');
const writeFilePlugin = require('write-file-webpack-plugin');
const { merge: webpackMerge } = require('webpack-merge');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
....

我在我的自定义webpack配置中使用它。
1.我试着运行npm update-什么都没有。
1.我把import '@angular/compiler';作为app. main. ts中的第一个导入(我知道这不是最好的解决方案,但即使这样,它也会不断抛出错误)

一组可能有用的信息:

Package                            Version
@angular/cdk-experimental          14.2.7
@angular/cli                       14.2.10
@angular/flex-layout               14.0.0-beta.41
@angular/material                  14.2.7
@angular/material-moment-adapter   14.2.7
@ngtools/webpack                   14.2.10
@schematics/angular                14.2.10
rxjs                               7.4.0
typescript                         4.6.4
webpack                            5.75.0

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ES2020",
    "moduleResolution": "node",
    "sourceMap": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "skipLibCheck": true,
    "suppressImplicitAnyIndexErrors": true,
    "outDir": "target/classes/static/app",
    "lib": [
      "ES2020",
      "dom"
    ],
    "typeRoots": [
      "node_modules/@types"
    ],
    "baseUrl": "./",
    "paths": {
      "app/*": [
        "src/main/webapp/app/*"
      ]
    },
    "importHelpers": true,
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "emitDecoratorMetadata": true
  },
  "files": [
    "src/main/webapp/app/app.main.ts",
    "src/main/webapp/app/polyfills.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

我真的被困在这一步,找不到任何其他的解决办法。也许你们中的任何人可以帮助我?

uurity8g

uurity8g1#

在我的项目中,我有一个定制的webpack配置文件webpack.config.js,它从@ngtools/webpack导入AngularWebpackPlugin。
我通过向jitMode添加“@angular/compiler”解决了这个问题。
我的webpack.config.js就像

new AngularWebpackPlugin({
  ...
  jitMode: '@angular/compiler'
})

参考:https://www.npmjs.com/package/@ngtools/webpack
希望能有所帮助!

相关问题