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

Question

我正在尝试从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)

这看起来像是罪魁祸首：

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.json的相关部分

{
  "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
    }
  }
}

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

const cssSourceMap = buildOptions.sourceMap.styles;`

显然，sourceMap是未定义的，即使它在我的options中。我试图将我的option中的option更改为test123，以确保这是正在读取的部分，并且我可以确认它是读取的。

然而，sourceMap还没有定义。

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

谢谢!

Answer 1

ngx-build-plus也需要升级到匹配的角度版本(即13)。

Answer 2

在运行了以下程序之后，它完美地工作了：

ng update ngx-build-plus --force

Answer 3

对于角13，升级到13。

ng update ngx-build-plus@13 --force