9

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!

4
  • Have you tried removing your node_modules and re-installing the packages? Commented Dec 11, 2021 at 15:34
  • @JSONDerulo yes, to no avail. I just updated the post with more info. Commented Dec 11, 2021 at 15:40
  • Did you find a solution of this issue yet? i am also having similar issue after upgrading to [email protected] Commented Dec 14, 2021 at 10:26
  • Yes, see my answer. Commented Dec 15, 2021 at 12:14

4 Answers 4

24

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

Sign up to request clarification or add additional context in comments.

2 Comments

I get this issue, but when I try to upgrade via ng update ngx-build-plus --force I get Package 'ngx-build-plus' is not a dependency.
Life saving! Thanks man
3

For Angular 13 , upgrade it to 13

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

2 Comments

Working after upgrade to angular version 13 from v12
I get Package 'ngx-build-plus' is not a dependency.
1

After running the following it works perfectly:

ng update ngx-build-plus --force

1 Comment

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

Sometimes, we could have old version of libraries and packages which didn't update to needed latest version in package-lock.json

  1. Remove node_modules and package-lock.json
  2. Run npm i
  3. ng update ngx-build-plus@13 --force (for Angular12 to Angular13)

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.