Angular-builders: @angular-builders/custom-webpack with @angular-devkit/build-angular version 0.1000.0-next.0 throws error - ERROR in Cannot read property 'flags' of undefined

Created on 21 Apr 2020 · 14Comments · Source: just-jeb/angular-builders

Describe the Bug

This issue is based on the issue https://github.com/angular/angular-cli/issues/17499

When using @angular-builders/custom-webpack with @angular-devkit/build-angular version 0.1000.0-next.0 throws error - ERROR in Cannot read property 'flags' of undefined

Minimal Reproduction

More details on the issue can be found at https://github.com/angular/angular-cli/issues/17499

The issue and possible solution is further explained in comment
https://github.com/angular/angular-cli/issues/17499#issuecomment-617303792

Expected Behavior

It should compile successfully without throwing error.

Environment


Libs
- @angular/core version: 10.0.0-next.2
- @angular-devkit/build-angular version: 0.901.0
- @angular-builders/custom-webpack: 9.1.0-beta.0

Angular CLI: 10.0.0-next.0
Node: 13.13.0
OS: win32 x64

Angular: 10.0.0-next.2
... animations, 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.900.7
@angular-devkit/build-angular              0.901.0
@angular-devkit/build-optimizer            0.900.7
@angular-devkit/build-webpack              0.900.7
@angular-devkit/core                       10.0.0-next.0
@angular-devkit/schematics                 10.0.0-next.0
@angular/cdk                               9.2.1
@angular/cli                               10.0.0-next.0
@angular/fire                              6.0.0-rc.1
@angular/google-maps                       9.2.1
@angular/material                          9.2.1
@angular/pwa                               0.1000.0-next.0
@ngtools/webpack                           9.0.7
@nguniversal/module-map-ngfactory-loader   9.0.0-next.9
@schematics/angular                        10.0.0-next.0
@schematics/update                         0.1000.0-next.0
rxjs                                       6.5.5
typescript                                 3.8.3
webpack                                    4.41.2

Additional Context

Add any other context about the problem here.

Source

naveedahmed1

👍4

Most helpful comment

angular-builders 9 do not support Angular 10. Use 10.0.0-beta.0.

just-jeb on 6 Jul 2020

👍6 🎉2

All 14 comments

On one hand you're using Angular 10 beta, on the other hand you're using version 0.9xx.0 of various @angular-devkit libraries, version 9.2.1 of CDK and version 9.0.7 of ngtools/webpack. All these should be aligned.
In any case angular-builders still don't have versions for Angular 10, so most probably the build will continue to fail even when you align all the versions.
May I ask why you need Angular 10 right now?

just-jeb on 22 Apr 2020

I'm currently seeing this with consistent v9.1.x Angular dependencies.

package.json

 "dependencies": {
    "@angular/animations": "9.1.3",
    "@angular/cdk": "9.2.1",
    "@angular/common": "9.1.3",
    "@angular/compiler": "9.1.3",
    "@angular/core": "9.1.3",
    "@angular/forms": "9.1.3",
    "@angular/platform-browser": "9.1.3",
    "@angular/platform-browser-dynamic": "9.1.3",
    "@angular/router": "9.1.3",
    // ...
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "9.1.0",
    "@angular-devkit/build-angular": "0.901.3",
    "@angular/cli": "9.1.3",
    "@angular/compiler-cli": "9.1.3",
    "@angular/language-service": "9.1.3",
    "ts-node": "8.9.0",
    "tslint": "6.1.1",
    "typescript": "3.8.3",
    // ...
}

angular.json

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./custom-webpack.config.js",
        "mergeStrategies": {
          "optimization.minimize": "replace"
        }
      },

custom-webpack.config.js

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    optimization: {
        minimizer: [
            new TerserPlugin({
                parallel: 4,
                sourceMap: true,
            }),
        ],
    },
};

Running ng build "-c" "production" results in ERROR in Cannot read property 'flags' of undefined.

seangwright on 23 Apr 2020

👍5

On one hand you're using Angular 10 beta, on the other hand you're using version 0.9xx.0 of various @angular-devkit libraries

You are right because using @angular-devkit/build-angular version 0.1000.0-next.0 throws this error. And as per Angular team it requires a fix in @angular-builders/custom-webpack https://github.com/angular/angular-cli/issues/17499#issuecomment-617303792

version 9.2.1 of CDK , version 9.0.7 of ngtools/webpack

I believe since there aren't any breaking changes so this should work, right? I have tried it with latest version of CDK as well, but issue persists.

I have latest version of Angualr CLI installed and I think it automatically installed ngtools/webpack with this version (current latest I think).

May I ask why you need Angular 10 right now?

I was just testing my app with latest version of Angular, encountered this issue so I thought I must report it.

naveedahmed1 on 23 Apr 2020

@naveedahmed1 the reason for the issue is clearly two different versions of @angular-devkit/build-angular which, in turn, depend on different Typescript versions. Not sure how to help you here except for suggesting to wait until version 10 of the builders (compatible with version 0.1000.0 of the devkit) is released.
@seangwright If this happens with version 9 it's a problem. Gonna need a reproduction though, hard to tell what's going on without one.

just-jeb on 5 May 2020

Thanks for the update @just-jeb . How about @alan-agius4 suggestion for future release?

I suggest to file an issue with @angular-builders/custom-webpack, to suggest that @angular-devkit/build-angular is added as peerDependency instead of a direct dependency. (https://github.com/angular/angular-cli/issues/17499#issuecomment-617303792)

Can it help in preventing such issues in future versions?

naveedahmed1 on 5 May 2020

This is how it used to work and after a very constructive discussion with Angular team we agreed that it should be a direct dependency and handled by package manager (like npm).
The reason is that I faced numerous issues where the user had to install @angular-devkit/core manually because it was missing at the top-level node_modules (although the majors were matching). Here is one for example: https://github.com/just-jeb/angular-builders/issues/426.
It shouldn't cause any problems when the major versions match (and it wasn't) and it's perfectly fine if there are errors when you use a next major version which is incompatible with the current major.

just-jeb on 5 May 2020

👍1

I'm currently seeing this with consistent v9.1.x Angular dependencies.
@seangwright Same here

I updated my global angular-cli from 8.x.x to the latest version (currently) 9.1.4 and wanted to create a new project from scratch. Then I ended up with this error.

Environment

That's what I got when I created the project with ng new test-angular-nine. I did not modify the packages after the project has been created and still I get the error below when I execute ng serve

Angular CLI: 9.1.4
Node: 12.14.1
OS: win32 x64

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

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.4
@angular-devkit/build-angular     0.901.4
@angular-devkit/build-optimizer   0.901.4
@angular-devkit/build-webpack     0.901.4
@angular-devkit/core              9.1.4
@angular-devkit/schematics        9.1.4
@angular/cli                      9.1.4
@ngtools/webpack                  9.1.4
@schematics/angular               9.1.4
@schematics/update                0.901.4
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

Error with NG Serve

ERROR in TypeError: Cannot read property 'flags' of undefined
    at resolveAlias (c:\Entwicklung\ADD-Apps\test-angular-nine\node_modules\typescript\lib\typescript.js:36513:37)
    at checkAliasSymbol (c:\Entwicklung\ADD-Apps\test-angular-nine\node_modules\typescript\lib\typescript.js:64502:26)
    at checkImportBinding (c:\Entwicklung\ADD-Apps\test-angular-nine\node_modules\typescript\lib\typescript.js:64534:13)
    at checkImportDeclaration (c:\Entwicklung\ADD-Apps\test-angular-nine\node_modules\typescript\lib\typescript.js:64552:29)
    at checkSourceElementWorker (c:\Entwicklung\ADD-Apps\test-angular-nine\node_modules\typescript\lib\typescript.js:64961:28)
    at checkSourceElement (c:\Entwicklung\ADD-Apps\test-angular-nine\node_modules\typescript\lib\typescript.js:64800:17)
    at Object.forEach (c:\Entwicklung\ADD-Apps\test-angular-nine\node_modules\typescript\lib\typescript.js:317:30)
    at checkSourceFileWorker (c:\Entwicklung\ADD-Apps\test-angular-nine\node_modules\typescript\lib\typescript.js:65123:20)
    at checkSourceFile (c:\Entwicklung\ADD-Apps\test-angular-nine\node_modules\typescript\lib\typescript.js:65091:13)
    at getDiagnosticsWorker (c:\Entwicklung\ADD-Apps\test-angular-nine\node_modules\typescript\lib\typescript.js:65179:17)
    at Object.getDiagnostics (c:\Entwicklung\ADD-Apps\test-angular-nine\node_modules\typescript\lib\typescript.js:65165:24)
    at c:\Entwicklung\ADD-Apps\test-angular-nine\node_modules\typescript\lib\typescript.js:98703:85
    at runWithCancellationToken (c:\Entwicklung\ADD-Apps\test-angular-nine\node_modules\typescript\lib\typescript.js:98665:24)
    at getBindAndCheckDiagnosticsForFileNoCache (c:\Entwicklung\ADD-Apps\test-angular-nine\node_modules\typescript\lib\typescript.js:98691:20)
    at getAndCacheDiagnostics (c:\Entwicklung\ADD-Apps\test-angular-nine\node_modules\typescript\lib\typescript.js:98956:26)
    at getBindAndCheckDiagnosticsForFile (c:\Entwicklung\ADD-Apps\test-angular-nine\node_modules\typescript\lib\typescript.js:98688:20)

I tried several times to clear the npm cache with npm cache clean -f, delete the node_modules folder and the package-lock.json of my project and install everything again with npm install. I also uninstalled and reinstalled my global angular-cli but neither of those actions worked.

@just-jeb is that information enough to reproduce this issue? Please let me know if you need something more.

chenoekl on 8 May 2020

Hello, try this as it worked for me :
npm install @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected]

claudejaspart on 8 May 2020

🎉1 👍1

@misterclode thanks for your quick reply. I followed your instruction and the error gone. The project is now compiling successfully. But this also means, that I have several outdated packages when I execute npm outdated.

chenoekl on 8 May 2020

Closing the issue as there is nothing to do here except for waiting for version 10 beta.

just-jeb on 10 May 2020

angular 10 out with ts 3.9, @angular-builders/custom-webpack at 9.2.0 claiming to support angular 10, but the issue still persists. it's a development killer for me, as i'm unable to use tailwindcss with custom webpack config, which is needed to run aforementioned.

albertzubkowicz on 6 Jul 2020

👍3 👀1

angular 10 out with ts 3.9, @angular-builders/custom-webpack at 9.2.0 claiming to support angular 10, but the issue still persists. it's a development killer for me, as i'm unable to use tailwindcss with custom webpack config, which is needed to run aforementioned.

I have the same issue.