我面临这个错误,尝试了几个解决方案,但没有一个工作:
错误:需要使用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"
]
}
我真的被困在这一步,找不到任何其他的解决办法。也许你们中的任何人可以帮助我?
1条答案
按热度按时间uurity8g1#
在我的项目中,我有一个定制的webpack配置文件webpack.config.js,它从@ngtools/webpack导入AngularWebpackPlugin。
我通过向jitMode添加“@angular/compiler”解决了这个问题。
我的webpack.config.js就像
参考:https://www.npmjs.com/package/@ngtools/webpack
希望能有所帮助!