Angular-cli: Cannot read property 'kind' of undefined after upgrade to "@angular-devkit/build-angular": "^0.1001.0",

[ofirrifo]

🐞 Bug report

Command (mark with an x)

• [X] build
• [X] serve

Is this a regression?

Yes, the previous version in which this bug was not present was:
Prev version: 0.1000.7
Current Version: ^0.1001.0

Description

I'm using angular CLI project with multiple projects.
After I upgrade the package json with the latest >> "@angular-devkit/build-angular": "^0.1001.0",
I start to get this error:
ERROR in Cannot read property 'kind' of undefined

For this command:

ng build project-name --prod --aot --source-map --build-optimizer

When I downgrade to 0.1000.7 it back to work

🔬 Minimal Reproduction

🔥 Exception or Error

ERROR in Cannot read property 'kind' of undefined

🌍 Your Environment

Angular CLI: 10.1.0
Node: 12.3.1
OS: darwin x64

Angular: 10.1.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.12
@angular-devkit/build-angular     0.1001.0
@angular-devkit/build-optimizer   0.901.12
@angular-devkit/build-webpack     0.901.12
@angular-devkit/core              10.1.0
@angular-devkit/schematics        10.1.0
@angular-devkit/schematics-cli    0.901.12
@angular/cdk                      10.2.0
@angular/material                 10.2.0
@ngtools/webpack                  9.1.12
@nguniversal/common               10.0.2
@nguniversal/express-engine       10.0.2
@schematics/angular               10.1.0
@schematics/schematics            0.901.12
@schematics/update                0.1001.0
rxjs                              6.6.2
typescript                        3.9.7
webpack                           4.42.0

[alan-agius4]

Hi, from the ng version I am seeing a number of auto-dated packages example which might not be compatible with Angular CLI version 10.1:

Example:

@angular-devkit/architect         0.901.12
@angular-devkit/build-optimizer   0.901.12
@angular-devkit/build-webpack     0.901.12
@schematics/schematics            0.901.12

If you are depending on these directly you don't need them unless you are developing schematics and builders.

Are you using a custom CLI builder? If so, please try to update to the latest version.

[ofirrifo]

@alan-agius4
I update the above packages and I still have the same issue

Angular CLI: 10.1.0
Node: 12.3.1
OS: darwin x64

Angular: 10.1.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker
Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.1001.0
@angular-devkit/build-angular 0.1001.0
@angular-devkit/build-optimizer 0.1001.0
@angular-devkit/build-webpack 0.1001.0
@angular-devkit/core 10.1.0
@angular-devkit/schematics 10.1.0
@angular-devkit/schematics-cli 0.901.12
@angular/cdk 10.2.0
@angular/material 10.2.0
@ngtools/webpack 9.1.12
@nguniversal/common 10.0.2
@nguniversal/express-engine 10.0.2
@schematics/angular 10.1.0
@schematics/schematics 0.1001.0
@schematics/update 0.1001.0
rxjs 6.6.3
typescript 3.9.7
webpack 4.42.0

[alan-agius4]

Are you using a custom CLI builder? I am still seeing outdated packages example: @ngtools/webpack 9.1.12, which likely is due to a custom builder.

Most likely the root cause is similar to https://github.com/angular/angular-cli/issues/18615

Can you run npm ls typescript?

[ofirrifo]

@alan-agius4
I don't use a custom CLI builder. I don't know what is it.

The result for npm ls typescript

[email protected] /../console
├─┬ @angular-builders/[email protected]
│ └─┬ @angular-devkit/[email protected]
│   └─┬ @angular-devkit/[email protected]
│     └── [email protected] 
├─┬ @angular-devkit/[email protected]
│ └─┬ @angular-devkit/[email protected]
│   └── [email protected] 
├─┬ @sentinel-one/[email protected]
│ └── [email protected] 
├─┬ @sentinel-one/[email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]  deduped
│ └── [email protected] 
├─┬ [email protected]
│ └── [email protected]  deduped
├─┬ [email protected]
│ └── [email protected]  deduped
└── [email protected] 

I did try this

npm uninstall @angular-builders/custom-webpack
rm -rf node_modules package-lock.json
npm i

but it not work

[alan-agius4]

@ofirrifo, can you provide a reproduction? Unfortunately, without a reproduction it's hard to tell what is causing the issue.

[ofirrifo]

@alan-agius4
The project is private but I will try to create an public repo

[ofirrifo]

@alan-agius4
I created a new repo with reproduction of my issue

Steps to rep-reduce:

1. Clone project git clone [email protected]:ofirrifo/ng-issue.git
2. Install packages npm i
3. Execute npm scriptnpm run serve:app
4. Now you will get this error > ERROR in Cannot read property 'kind' of undefined

[alan-agius4]

Same cause as https://github.com/angular/angular-cli/issues/18615 where the presence of an outdate version @angular-builders/custom-webpack is causing issues during module hosting.

Kindly update @angular-builders/custom-webpack to the latest stable version.

npm i @angular-builders/custom-webpack@10 -D
rm -rf node_modules package-lock.json
npm i

/workspace/ng-issue $ npm run serve:app

> [email protected] serve:app /workspace/ng-issue
> ng serve app-a --open --port=4400

Compiling @angular/core : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015

chunk {main} main.js, main.js.map (main) 59.6 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 13.2 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.63 MB [initial] [rendered]
Date: 2020-09-08T12:56:21.900Z - Hash: ea4902c05542db6a1b0a - Time: 13875ms
** Angular Live Development Server is listening on localhost:4400, open your browser on http://localhost:4400/ **
: Compiled successfully.
50% building 0/1 modules 1 active /workspace/ng-issue/projects/app-a/$$_lazy_route_resource lazy groupOpti
Date: 2020-09-08T12:56:23.203Z - Hash: ea4902c05542db6a1b0a
5 unchanged chunks

[ofirrifo]

@alan-agius4 Thanks for your help :)
It did help and now it back to work.

is there a way that next time I will be able to understand alone what is the issue ?

[alan-agius4]

@ofirrifo, without debugging it’s hard to understand and find the root cause of the problem, though typically removing the lock file and node_modules does solve a number of issues.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}