Angular 13 升级，angular-devkit 的问题：无法读取未定义的属性 \'styles\'答案

【问题标题】：Angular 13 upgrade, problem with angular-devkit: cannot read property 'styles' of undefinedAngular 13 升级，angular-devkit 的问题：无法读取未定义的属性 \'styles\'
【发布时间】：2022-10-26 01:52:34
【问题描述】：

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

这看起来像罪魁祸首：

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 中的outputPath 更改为test123，以确保这是正在阅读的部分，并且我可以确认它是。

然而，sourceMap 是未定义的。

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

谢谢！

【问题讨论】：

您是否尝试过删除 node_modules 并重新安装软件包？
@JSONDerulo 是的，但无济于事。我刚刚用更多信息更新了帖子。
你找到这个问题的解决方案了吗？升级到 angular@13.1.0 后我也遇到了类似的问题
是的，看我的回答。

标签： angular

【解决方案1】：

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

【讨论】：

【解决方案2】：

运行以下命令后，它可以完美运行：

ng update ngx-build-plus --force

【讨论】：

ng 更新 ngx-build-plus@13 --force

【解决方案3】：

对于 Angular 13 ，将其升级到 13

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

【讨论】：