在生产中出现此错误JIT编译器不可用
我在谷歌上搜索了很多这个问题,并得到更具体的错误,我发现我需要terser webpack插件内我的webpack配置,以获得具体的错误,这是使我的JIT编译的问题。
这里有一个解释
https://github.com/angular/angular/issues/43415
stevethemacguy的第二条评论。
但是我找不到一种方法将此添加到我的extra.webpack.config.js
文件中。
"我所做的"
我安装了npm install terser-webpack-plugin --save-dev
我在我的webpack中添加了更简洁的插件
const webpack = require('webpack');
const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
/**
* Remove all unused MomentJS locales
* The problem is described in this article
* https://medium.jonasbandi.net/angular-cli-and-moment-js-a-recipe-for-disaster-and-how-to-fix-it-163a79180173
*/
plugins: [
new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /de|en|fr|it/),
],
module: {
rules: [
{
include: /node_modules/,
test: /\.mjs$/,
type: 'javascript/auto'
}
]
},
"terserOptions": {
"warnings": true,
"safari10": true,
"output": {
"ecma": 5,
"comments": false,
"webkit": true
},
"compress": {
"ecma": 5,
"pure_getters": {
"scripts": true,
"styles": true
},
"passes": 3,
"global_defs": {
"ngDevMode": false,
"ngI18nClosureMode": false
}
},
"mangle": true
}
}
现在我得到错误
An unhandled exception occurred: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration has an unknown property 'terserOptions'. These properties are valid:
object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, externals?, infrastructureLogging?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, serve?, stats?, target?, watch?, watchOptions? }
For typos: please correct them.
For loader options: webpack >= v2.0.0 no longer allows custom properties in configuration.
我需要对此进行配置,以便在生产环境中获得输出,其中的依赖项会在Angular 编译中产生问题
我的Angular 项目中有以下Webpack依赖项
"@angular-builders/custom-webpack": "10.0.1",
"terser-webpack-plugin": "^5.3.6",
"webpack-bundle-analyzer": "3.9.0"
ts配置
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "es2020",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
棱角分明的json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"xecm": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "xecm",
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "config/extra-webpack.config.js",
"mergeStrategies": {
"plugins": "prepend"
}
},
"outputPath": "target/dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"aot": false,
"assets": [
{ "glob": "favicon.ico", "input": "./src", "output": "/" },
{ "glob": "**/*", "input": "./src/assets", "output": "assets" }
],
"styles": [
"src/../node_modules/customLib-scss/dist/imports.css",
"src/../node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/../node_modules/customLib-scss/dist/customLib-scss.min.css",
"src/styles/main.scss",
"./node_modules/xcomponent-angular/widgets/lookup-text-field/lib/theme/lookup-text-field.scss"
],
"stylePreprocessorOptions": {
"includePaths": ["src/styles/partials"]
},
"scripts": [
"node_modules/moment/min/moment.min.js",
"node_modules/hammerjs/hammer.min.js",
"node_modules/bootstrap.native/dist/bootstrap-native.min.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"baseHref": "/xecm-web/xecm-app/ng2/",
"deployUrl": "/xecm-web/xecm-app/ng2/",
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "10mb",
"maximumError": "15mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "xecm:build",
"proxyConfig": "config/proxy.conf.js"
},
"configurations": {
"production": {
"browserTarget": "xecm:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "xecm:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": ["src/favicon.ico", "src/assets"],
"styles": ["src/styles.css"],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json", "e2e/tsconfig.json"],
"exclude": ["**/node_modules/**"]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "xecm:serve"
},
"configurations": {
"production": {
"devServerTarget": "xecm:serve:production"
}
}
}
}
}
},
"defaultProject": "xecm"
}
1条答案
按热度按时间yyhrrdl81#
我找到了一种方法
所以我们需要使用webpack definePlugin
在我将这个definePlugin添加到我的webpack配置中之后,我得到了更好的错误,指出哪个库是JIT编译的问题