webpack 如何在Angular中将ngDevMode设置为true?

8zzbczxx  于 2022-11-13  发布在  Webpack
关注(0)|答案(1)|浏览(179)

在生产中出现此错误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"
}
yyhrrdl8

yyhrrdl81#

我找到了一种方法
所以我们需要使用webpack definePlugin

const webpack = require('webpack');

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'
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            ngDevMode: true,
        }),
    ],
}

在我将这个definePlugin添加到我的webpack配置中之后,我得到了更好的错误,指出哪个库是JIT编译的问题

相关问题