Angular 13 升级，角度开发套件问题：无法读取未定义的属性"样式"

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)

这看起来像罪魁祸首：

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是未定义的。

有人知道我可能遗漏了什么吗？

谢谢！

Answer 1

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

Answer 2

对于Angular 13，将其升级为13

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

Answer 3

运行以下程序后，它可以完美工作：

ng update ngx-build-plus --force

Answer 4

有时，我们可能会有旧版本的库和包，这些库和包在package-lock.json中没有更新到所需的最新版本

1. 删除node_modules和package-lock.json
2. 运行npm i
3. ng update ngx-build-plus@13 --force(用于Angular12至Angular13(