Cannot start development server for the project

[eneajaho]

Angular DevTools version (required): Latest master version

Description of issue: After installing the dependencies, and try to yarn start I get this error:

Steps to reproduce:

1. yarn

2. yarn start

Log file

[error] TypeError: Cannot read property 'styles' of undefined
    at getStylesConfig (/Users/enea/Documents/GitHub/angular-devtools/node_modules/@angular-devkit/build-angular/src/webpack/configs/styles.js:79:49)
    at /Users/enea/Documents/GitHub/angular-devtools/node_modules/@angular-devkit/build-angular/src/builders/dev-server/index.js:127:43
    at /Users/enea/Documents/GitHub/angular-devtools/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:72:16
    at generateWebpackConfig (/Users/enea/Documents/GitHub/angular-devtools/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:61:40)
    at async generateBrowserWebpackConfigFromContext (/Users/enea/Documents/GitHub/angular-devtools/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:123:20)
    at async generateI18nBrowserWebpackConfigFromContext (/Users/enea/Documents/GitHub/angular-devtools/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:70:20)
    at async setup (/Users/enea/Documents/GitHub/angular-devtools/node_modules/@angular-devkit/build-angular/src/builders/dev-server/index.js:124:47)

[JimMorrison723]

I believe version mismatch causes the problem. I managed to tackle this part of the build process, after manually changing the angular dependency versions. I have no idea why is the angular version numbers are set using this format: github:angular/animations-builds#e814a6149fd654e265a465837f17bdebdc976a9d - but quickly replacing with shorter, semantic versioning, it run further (i used v12 instaed of v13 versions)

[JimMorrison723]

I got it working. src/styles.css: 2nd line: @use '@angular/material' as mat; With these dependencies:

  "dependencies": {
    "@angular/animations": "13.1.0",
    "@angular/cdk": "13.1.0",
    "@angular/common": "13.1.0",
    "@angular/compiler": "13.1.0",
    "@angular/core": "13.1.0",
    "@angular/forms": "13.1.0",
    "@angular/material": "13.1.0",
    "@angular/platform-browser": "13.1.0",
    "@angular/platform-browser-dynamic": "13.1.0",
...
  "devDependencies": {
    "@angular-devkit/build-angular": "13.1.1",
    "@angular-devkit/build-ng-packagr": "~0.1002.0",
    "@angular/cli": "13.1.1",
    "@angular/compiler-cli": "13.1.0",
    "@angular/elements": "13.1.0",
    "@angular/language-service": "13.1.0",
    "@angular/router": "13.1.0",
...
    "ng-packagr": "13.0.0",
    "ngx-build-plus": "13.0.0",
...
      "ts-node": "10.4.0",

using

    "node": "16.10.0",
    "yarn": "1.22.0",
    "npm": "8.3.0"

[JimMorrison723]

hey @mgechev , i found, that updating packages via ng update solves this issue. Could you merge #964 and #971?

[mgechev]

We're moving the project to the Angular monorepo, which changes the whole build pipeline. I'll close this issue since it'll not be relevant once the transition completes.