添加自定义 webpack 时 getProjectMetadata 不存在

Question

我正在关注这个 tutorial 并且我正在尝试让 brotli 与 angular 项目一起工作我创建了一个```custom-webpack.config.js 文件并放在根目录中angular.json 所在的位置。（也尝试了 src 文件夹，但没有用）一旦我将 angular.json 文件更新为

"architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./custom-webpack.config.js"
             },
            ...

我收到错误 An unhandled exception occurred: Job name "..getProjectMetadata" does not exist.

我也运行npm i -D compression-webpack-plugin brotli-webpack-plugin 并使我的 custom-webpack.config.js 文件看起来像

const CompressionPlugin = require(`compression-webpack-plugin`);
const BrotliPlugin = require(`brotli-webpack-plugin`);
const path = require(`path`);
module.exports = {
    plugins:[
        new BrotliPlugin({
            asset: '[fileWithoutExt].[ext].br',
            test: /\.(js|css|html|svg|txt|eot|otf|ttf|gif)$/
        }),
        new CompressionPlugin({
            test: /\.(js|css|html|svg|txt|eot|otf|ttf|gif)$/,
            filename(info){
                let opFile= info.path.split('.'),
                opFileType =  opFile.pop(),
                opFileName = opFile.join('.');
                return `${opFileName}.${opFileType}.gzip`;
            }
        })
    ],
}

package.json

{
  "name": "mean-course",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "start:server": "nodemon backend/server.js"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^8.2.13",
    "@angular/cdk": "~8.2.2",
    "@angular/common": "~8.2.4",
    "@angular/compiler": "~8.2.4",
    "@angular/core": "~8.2.4",
    "@angular/forms": "~8.2.4",
    "@angular/material": "^8.2.2",
    "@angular/platform-browser": "~8.2.4",
    "@angular/platform-browser-dynamic": "~8.2.4",
    "@angular/router": "~8.2.4",
    "@azure/storage-blob": "^12.1.0",
    "@ng-bootstrap/ng-bootstrap": "^5.1.5",
    "@ngrx/store": "^8.6.0",
    "ably": "^1.1.22",
    "angular-doka": "file:src/angular-doka",
    "angular-filepond": "^1.0.5",
    "azure-arm-rediscache": "^3.0.0",
    "bcrypt": "^3.0.6",
    "bootstrap": "^4.4.1",
    "classlist.js": "^1.1.20150312",
    "countdown": "^2.6.0",
    "crypto-js": "^4.0.0",
    "dependency-check": "^4.1.0",
    "dotenv": "^8.2.0",
    "filepond": "^4.13.4",
    "filepond-plugin-file-encode": "^2.1.5",
    "filepond-plugin-file-validate-size": "^2.2.0",
    "filepond-plugin-file-validate-type": "^1.2.5",
    "filepond-plugin-image-crop": "^2.0.3",
    "filepond-plugin-image-edit": "^1.6.0",
    "filepond-plugin-image-exif-orientation": "^1.0.7",
    "filepond-plugin-image-preview": "^4.6.1",
    "filepond-plugin-image-resize": "^2.0.4",
    "filepond-plugin-image-transform": "^3.7.2",
    "jquery": "^3.5.1",
    "jsonwebtoken": "^8.5.1",
    "lib-storage-service": "^1.0.2",
    "material": "^0.4.1",
    "moment-mini": "^2.24.0",
    "ng-starrating": "^1.0.11",
    "ngx-clipboard": "^12.3.0",
    "ngx-device-detector": "^1.3.20",
    "ngx-filepond": "^5.0.1",
    "ngx-light-carousel": "^1.0.37-beta.8",
    "ngx-pagination": "^5.0.0",
    "ngx-simple-countdown": "^1.0.2",
    "ngx-spinner": "^8.0.3",
    "ngx-toastr": "^11.2.1",
    "ngx-ui-carousel": "^1.3.2",
    "nodemon": "^2.0.2",
    "numeral": "^2.0.6",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "tsoa": "^2.5.7",
    "uid": "0.0.2",
    "web-animations-js": "^2.3.2",
    "yamljs": "^0.3.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^9.1.0",
    "@angular-devkit/build-angular": "^0.803.26",
    "@angular/cli": "~8.3.2",
    "@angular/compiler-cli": "~8.2.4",
    "@angular/language-service": "~8.2.4",
    "@types/crypto-js": "^3.1.43",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^8.10.59",
    "brotli-gzip-webpack-plugin": "^0.5.0",
    "brotli-webpack-plugin": "^1.1.0",
    "codelyzer": "^5.0.0",
    "compression-webpack-plugin": "^4.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.4.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  },
  "browser": {
    "crypto": false
  }
}

但是当我运行 ng build --prod 我得到了错误。有什么我想念的吗？感谢您的帮助！

Answer 1

降级您的 @angular-builders/custom-webpack，试试这个 8.4.1

添加自定义 webpack 时 getProjectMetadata 不存在

getProjectMetadata does not exist when adding custom webpack

webpack

brotli

angular