Angular-cli: @ngtools/webpack above 1.8.0 is not working because of removing the decorators

Created on 17 Nov 2017 · 26Comments · Source: angular/angular-cli

Versions

Not using ng, just using @ngtools/webpack with webpack.

Repro steps

tsconfig.aot.json

{
  "compilerOptions": {
    "skipLibCheck": true,
    "outDir": "build/aot",
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "lib": [
      "es5",
      "es6",
      "dom",
      "es2015.collection",
      "es2015.promise",
      "es2015.core",
      "es2016",
      "es2017"
    ]
  },
  "includes": [
    "src/angular/**/*",
    "test/angular-webpack/**/*"
  ],
  "exclude": [
    "node_modules",
    "src/angular/boot.ts",
    "test/angular-webpack/angular/boot.ts",
    "build/browser"
  ],
  "angularCompilerOptions": {
    "annotationsAs": "decorators",
    "preserveWhitespaces": false
  }
}

Observed behavior

ERROR in Error: TypeError: Cannot read property 'getTsProgram' of undefined
  at AngularCompilerPlugin._getTsProgram (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:186:62)
  at getTypeChecker (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:487:43)
  at ast_helpers_1.collectDeepNodes.filter (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/@ngtools/webpack/src/transformers/remove_decorators.js:14:60)
  at Array.filter (<anonymous>:null:null)
  at standardTransform (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/@ngtools/webpack/src/transformers/remove_decorators.js:14:14)
  at transformer (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/@ngtools/webpack/src/transformers/make_transform.js:14:25)
  at /home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/typescript/lib/typescript.js:2492:86
  at reduceLeft (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/typescript/lib/typescript.js:2188:30)
  at /home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/typescript/lib/typescript.js:2492:42
  at transformRoot (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/typescript/lib/typescript.js:63602:82)
  at Object.map (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/typescript/lib/typescript.js:1696:29)
  at Object.transformNodes (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/typescript/lib/typescript.js:63590:30)
  at Object.emitFiles (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/typescript/lib/typescript.js:66273:28)
  at emitWorker (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/typescript/lib/typescript.js:69725:33)
  at /home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/typescript/lib/typescript.js:69687:66
  at runWithCancellationToken (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/typescript/lib/typescript.js:69779:24)
  at Object.emit (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/typescript/lib/typescript.js:69687:20)
  at defaultEmitCallback (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/@angular/compiler-cli/src/transformers/program.js:33:20)
  at AngularCompilerProgram.emit (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/@angular/compiler-cli/src/transformers/program.js:242:30)
  at AngularCompilerPlugin._emit (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:717:49)
  at Promise.resolve.then.then.then (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:553:54)
  at <anonymous>:null:null
  at process._tickCallback (internal/process/next_tick.js:188:7)

Desired behavior

With Angular 5.0.1 it was working.

Mention any other details that might be useful (optional)

Is @ngtools/webpack behind with Angular 5.0.2 ?

ngtoolwebpack

Source

p3x-robot

👍5

Most helpful comment

Still same error on 1.9.0

danieleds on 10 Dec 2017

👍2

All 26 comments

Ok, i confirmed, Angular 5.0.2 is not broken, only @ngtools/webpack is broken in 1.8.2 and 1.8.3. With 1.8.0 it works.

p3x-robot on 17 Nov 2017

Heya, I can reproduce this issue with our tests that use the plugin by itself.

Can you setup a minimal repro please? You can read here why this is needed. A good way to make a minimal repro is to create a new app app that uses the plugin with a simplified webpack config and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

filipesilva on 22 Nov 2017

heya!

Heya, I can reproduce this issue with our tests that use the plugin by itself.

you mean

Heya, I cannot reproduce this issue with our tests that use the plugin by itself.
Is that what you are saying?

p3x-robot on 23 Nov 2017

Yes, that is what I meant. Sorry for the confusion 😞

filipesilva on 23 Nov 2017

Well, you can built it like this:

git clone https://github.com/patrikx3/corifeus-builder-angular
cd corifeus-builder-angular
yarn install
yarn link
git clone https://github.com/patrikx3/corifeus-web-material
cd corifeus-web-material
yarn install
grunt

With 1.8.0 it works, with 1.8.5 is not, same error.

The webpack settings are in
https://github.com/patrikx3/corifeus-builder-angular/tree/master/src/config/webpack/angular

Now if you change at corifeus-builder-angular/package.json and change @ngtools/webpack to 1.8.5 you can observe that it is that error.

I guess you still have to go to corifeus-builder-angular directory and:
```bash
rm -rf ./node_modules
yarn install

Then go to ```cd corifeus-web-material```

```bash
rm -rf ./node_modules
yarn install
yarn link corifeus-builder-angular
grunt

Now you get the same error. Is it in the webpack that changed? Or the tsconfig.json?

Here are the files the are connected to @ngtools/webpack:
https://github.com/patrikx3/corifeus-builder-angular/blob/master/src/config/webpack/angular/prod.js
(it is using AngularCompilerPlugin)

https://github.com/patrikx3/corifeus-web-material/blob/master/tsconfig.aot.json

Is something changed?

p3x-robot on 1 Dec 2017

Still same error on 1.9.0

danieleds on 10 Dec 2017

👍2

I have given the repro steps, now it is Angular 5.1.1 and 1.9 and it is the same error. With a simple test it works, but given I have a complex repo I have no idea what the error is. Right now it doesn't even show what the error is in my repo, it is all about angular-cli and @ngtools/webpack and typescript.

Very fishy. Is there something changed, I need a new decorator or what? I can't find the error.
With 1.8.0 it works as expected.

I guess you could understand more about the @ngtools/webpack internals why it throws these errors.

Running "webpack:cory-build-aot" (webpack) task
Hash: 4152ea35cf6303d1eec7                                                         
Version: webpack 3.10.0
Time: 5108ms
 2 assets
   [0] ./test/angular-webpack/angular/polyfills.ts 0 bytes {1} [built]
   [1] ./test/angular-webpack/angular/bundle.aot.ts 0 bytes {0} [built]

ERROR in : TypeError: Cannot read property 'getTsProgram' of undefined
  at AngularCompilerPlugin._getTsProgram (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web-material/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:187:62)
  at getTypeChecker (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web-material/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:511:43)
  at ast_helpers_1.collectDeepNodes.filter (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web-material/node_modules/@ngtools/webpack/src/transformers/remove_decorators.js:14:60)
  at Array.filter (<anonymous>:null:null)
  at standardTransform (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web-material/node_modules/@ngtools/webpack/src/transformers/remove_decorators.js:14:14)
  at transformer (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web-material/node_modules/@ngtools/webpack/src/transformers/make_transform.js:14:25)
  at /home/patrikx3/Projects/patrikx3/corifeus/corifeus-web-material/node_modules/typescript/lib/typescript.js:2479:86
  at reduceLeft (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web-material/node_modules/typescript/lib/typescript.js:2186:30)
  at /home/patrikx3/Projects/patrikx3/corifeus/corifeus-web-material/node_modules/typescript/lib/typescript.js:2479:42
  at transformRoot (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web-material/node_modules/typescript/lib/typescript.js:63992:82)
  at Object.map (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web-material/node_modules/typescript/lib/typescript.js:1693:29)
  at Object.transformNodes (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web-material/node_modules/typescript/lib/typescript.js:63980:30)
  at Object.emitFiles (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web-material/node_modules/typescript/lib/typescript.js:66715:28)
  at emitWorker (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web-material/node_modules/typescript/lib/typescript.js:70241:33)
  at /home/patrikx3/Projects/patrikx3/corifeus/corifeus-web-material/node_modules/typescript/lib/typescript.js:70203:66
  at runWithCancellationToken (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web-material/node_modules/typescript/lib/typescript.js:70295:24)
  at Object.emit (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web-material/node_modules/typescript/lib/typescript.js:70203:20)
  at defaultEmitCallback (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web-material/node_modules/@angular/compiler-cli/src/transformers/program.js:33:20)
  at AngularCompilerProgram.emit (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web-material/node_modules/@angular/compiler-cli/src/transformers/program.js:241:30)
  at AngularCompilerPlugin._emit (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web-material/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:741:49)
  at Promise.resolve.then.then.then (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web-material/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:577:54)
  at <anonymous>:null:null
  at process._tickCallback (internal/process/next_tick.js:160:7)


Child test/angular-webpack/angular/layout.html:
     1 asset
       [0] ./test/angular-webpack/angular/layout.html 1.4 kB {0} [built]
Child test/angular-webpack/angular/page/raw.html:
     1 asset
       [0] ./test/angular-webpack/angular/page/raw.html 20 bytes {0} [built]
Child src/component/cory-mat-login/cory-mat-login.html:
     1 asset
       [0] ./src/component/cory-mat-login/cory-mat-login.html 1.27 kB {0} [built]
Child html-webpack-plugin for "index.html":
     1 asset
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./test/angular-webpack/index.html 279 bytes {0} [built]
Warning:  Use --force to continue.

Aborted due to warnings.

If I build it with patrikx3/corifeus-web and change @ngtools/webpack to 1.9.0 it works, but when I move to patrikx3/corifeus-web-material then it is not working. Maybe it is Angular Material ?

p3x-robot on 15 Dec 2017

I think it is not in sync with Angular itself. Some small error must be. Given with 1.8.0 it works, but I logged and the getTsProgram is always undefined.

p3x-robot on 25 Dec 2017

Isn't it because of this?

In the tsconfig.aot.json I heavily use exclude and when I was trying with hacking I saw that sometimes it is not using the exclude and I have to run in JIT and then build with AOT, so I have a bundle.aot.ts and a bundle.ts. I think this is the root cause.

p3x-robot on 25 Dec 2017

i have uncommented but still error. I dont know. :( Reverted to 1.8.0.

p3x-robot on 25 Dec 2017

With 1.9.3 the error presists:

ERROR in : TypeError: Cannot read property 'getTsProgram' of undefined
  at AngularCompilerPlugin._getTsProgram (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:188:62)
  at getTypeChecker (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:512:43)
  at ast_helpers_1.collectDeepNodes.filter (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/@ngtools/webpack/src/transformers/remove_decorators.js:14:60)
  at Array.filter (<anonymous>:null:null)
  at standardTransform (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/@ngtools/webpack/src/transformers/remove_decorators.js:14:14)
  at transformer (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/@ngtools/webpack/src/transformers/make_transform.js:14:25)
  at /home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/typescript/lib/typescript.js:2479:86
  at reduceLeft (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/typescript/lib/typescript.js:2186:30)
  at /home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/typescript/lib/typescript.js:2479:42
  at transformRoot (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/typescript/lib/typescript.js:63992:82)
  at Object.map (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/typescript/lib/typescript.js:1693:29)
  at Object.transformNodes (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/typescript/lib/typescript.js:63980:30)
  at Object.emitFiles (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/typescript/lib/typescript.js:66715:28)
  at emitWorker (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/typescript/lib/typescript.js:70241:33)
  at /home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/typescript/lib/typescript.js:70203:66
  at runWithCancellationToken (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/typescript/lib/typescript.js:70295:24)
  at Object.emit (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/typescript/lib/typescript.js:70203:20)
  at defaultEmitCallback (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/@angular/compiler-cli/src/transformers/program.js:33:20)
  at AngularCompilerProgram.emit (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/@angular/compiler-cli/src/transformers/program.js:241:30)
  at AngularCompilerPlugin._emit (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:745:49)
  at Promise.resolve.then.then.then (/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:578:54)
  at <anonymous>:null:null
  at process._tickCallback (internal/process/next_tick.js:160:7)

p3x-robot on 1 Jan 2018

How can I find out the error? Why it is somewhere an error in AngularCompilerPlugin not the code.

p3x-robot on 1 Jan 2018

Versions

Using webpack, not using ng.
Angular CLI (latest) and Angular all the latest (5.1.3).

Repro steps

It is written here to repro: https://github.com/angular/angular-cli/issues/8525

Observed behavior

It is related to this: https://github.com/angular/angular-cli/issues/8525

Desired behavior

Should not remove decorators or kindly fix it, so it works with my repro steps.
I couldn't at all create a new project of my own with this remove decorators new function in 1.8.1.

Mention any other details that might be useful (optional)

This file is in @ngtools/webpack 1.9.3 :
File: angular_compiler_plugin.ts

If I comment this code:

// Remove unneeded angular decorators.
//this._transformers.push(removeDecorators(isAppPath, getTypeChecker));

It works.
I think the removeDecorators is not working for sure.

Is there an options to keep the decorators? While is it removing something that is doing this?

p3x-robot on 5 Jan 2018

Ciao!
How are you!
@ngtools/webpack 1.10.0-beta.0 is still the same error.

p3x-robot on 12 Jan 2018

Ciao!
How are you!
1.10.0-beta.1 is still the same error.

p3x-robot on 19 Jan 2018

Ciao!
How are you!
1.10.0-beta.3 is still the same error including 1.9.7.

p3x-robot on 3 Feb 2018

Ciao!
How are you!
1.10.0-rc.0 is still the same error .... Decorators are removed... Thanks....

p3x-robot on 9 Feb 2018

👍1

Seeing the same thing here.
Switching skipCodeGeneration to false brings the decorators back but I lose template type-checking amongst other niceties of template codegen.

getsaf on 10 Feb 2018

ciao!
how are you?
so what it means loose template type-checking amongst other niceties of template codegen?
bigger bundle?

p3x-robot on 10 Feb 2018

@getsaf no change at all, same error

p3x-robot on 10 Feb 2018

@p3x-robot I mean template type-safety checks aren't run so any template errors aren't caught during the build.

I do see the decorators and inlined html/scss in the output when I turn the flag off. I'm working in a rather large project with multiple teams so type checking the templates is necessary. I need a fix for this soon.

getsaf on 10 Feb 2018

👍1

For now, I created a hack:
https://gist.github.com/p3x-robot/e12ed76acb7033638b4179149546bb73

p3x-robot on 8 Mar 2018

It works, with all latest versions, including Typescript 2.7.x

p3x-robot on 8 Mar 2018

https://github.com/angular/angular-cli/pull/10059

p3x-robot on 24 Mar 2018

Hi. I saw you have the same issue with AOT compiling and you also use Grunt with grunt-webpack. You might be interested to the issues I created:
https://github.com/angular/angular-cli/issues/12248

And most importantly here: https://github.com/webpack-contrib/grunt-webpack/issues/168