Angular 13 upgrade, problem with angular-devkit: cannot read property 'styles' of undefined

Question

I'm trying to upgrade Angular from 12 to 13, and after doing npx @angular/cli@13 update @angular/core@13 @angular/cli@13 and starting my app, I get the following error:

[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)

This looks like the culprit:

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;

Here's the relevant part of my 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
    }
  }
}

I tried to put a breakpoint at the following line in @angular-devkit/build-angular/src/webpack/configs/styles.js:

const cssSourceMap = buildOptions.sourceMap.styles;`

Apparently sourceMap is undefined even if it is in my options. I tried to change the outputPath in my option to test123 to make sure that was the section being read, and I can confirm that it was.

Yet, sourceMap is undefined.

Does anybody know what I might be missing?

Thanks!

Answer 1

ngx-build-plus too needs to be upgrade to the matching Angular version (i.e. 13).