Angular 13 升级，Angular-devkit 问题：无法读取未定义的属性“样式”

Question

我正在尝试将 Angular 从 12 升级到 13，在执行npx @angular/cli@13 update @angular/core@13 @angular/cli@13并启动我的应用程序后，出现以下错误：

[error] TypeError: Cannot read properties of undefined (reading 'styles')
    at getStylesConfig (/User/my-user/my-app/node_modules/@angular-devkit/build-angular/src/webpack/configs/styles.js:79:49)
    at /User/my-user/my-app/node_modules/@angular-devkit/build-angular/src/builders/dev-server/index.js:130:43
    at /User/my-user/my-app/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:72:16
    at generateWebpackConfig (/User/my-user/my-app/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:61:40)
    at async generateBrowserWebpackConfigFromContext (/User/my-user/my-app/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:123:20)
    at async generateI18nBrowserWebpackConfigFromContext (/User/my-user/my-app/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:70:20)
    at async setup (/User/my-user/my-app/node_modules/@angular-devkit/build-angular/src/builders/dev-server/index.js:127:47)

这看起来像是罪魁祸首：

[error] TypeError: Cannot read properties of undefined (reading 'styles')
    at getStylesConfig (/User/my-user/my-app/node_modules/@angular-devkit/build-angular/src/webpack/configs/styles.js:79:49)
    at /User/my-user/my-app/node_modules/@angular-devkit/build-angular/src/builders/dev-server/index.js:130:43
    at /User/my-user/my-app/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:72:16
    at generateWebpackConfig (/User/my-user/my-app/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:61:40)
    at async generateBrowserWebpackConfigFromContext (/User/my-user/my-app/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:123:20)
    at async generateI18nBrowserWebpackConfigFromContext (/User/my-user/my-app/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:70:20)
    at async setup (/User/my-user/my-app/node_modules/@angular-devkit/build-angular/src/builders/dev-server/index.js:127:47)

这是我的相关部分angular.json：

function getStylesConfig(wco) {
    var _a, _b, _c;
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    const postcssImports = require('postcss-import');
    const postcssPresetEnv = require('postcss-preset-env');
    const { root, buildOptions } = wco;
    const extraPlugins = [];
    extraPlugins.push(new plugins_1.AnyComponentStyleBudgetChecker(buildOptions.budgets));
    const cssSourceMap = buildOptions.sourceMap.styles;

我尝试在以下行中放置一个断点@angular-devkit/build-angular/src/webpack/configs/styles.js：

{
  "options": {
    "outputPath": "dist",
    "index": "src/index.html",
    "main": "src/main.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "src/tsconfig.app.json",
    "assets": [
      "src/favicon.ico",
      "src/assets"
    ],
    "styles": [
      {
        "input": "src/default-theme.scss",
        "inject": false,
        "bundleName": "assets/themes/default"
      },
      {
        "input": "src/high-contrast-theme.scss",
        "inject": false,
        "bundleName": "assets/themes/high-contrast"
      }
    ],
    "sourceMap": {
      "styles": false,
      "scripts": false
    }
  }
}

显然sourceMap是未定义的，即使它在我的options. 我尝试更改outputPath我的optiontotest123以确保这是正在阅读的部分，并且我可以确认它是。

然而，sourceMap是未定义的。

有人知道我可能会错过什么吗？

谢谢！

Answer 1

ngx-build-plus也需要升级到匹配的 Angular 版本（即 13）。