angular-cli: --build-optimizer errors "Cannot read property 'type' of undefined"
Bug Report or Feature Request (mark with an x
)
- [ ] bug report -> please search issues before submitting
- [x] feature request
Versions.
$ ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
@angular/cli: 1.3.0-rc.0
node: 8.1.1
os: win32 x64
@angular/animations: 4.3.1
@angular/common: 4.3.1
@angular/compiler: 4.3.1
@angular/core: 4.3.1
@angular/forms: 4.3.1
@angular/http: 4.3.1
@angular/platform-browser: 4.3.1
@angular/platform-browser-dynamic: 4.3.1
@angular/router: 4.3.1
@angular/cli: 1.3.0-rc.0
@angular/compiler-cli: 4.3.1
rxjs@^5.4.2:
version "5.4.2"
resolved "<registry>/rxjs/-/rxjs-5.4.2.tgz#2a3236fcbf03df57bae06fd6972fd99e5c08fcf7"
dependencies:
symbol-observable "^1.0.1"
Repro steps.
Use a mis-aligned rxjs import:
import { Observable } from 'rxjs/Rx';
$ ng build --aot --prod --build-optimizer
The log given by the failure.
ERROR in ./node_modules/rxjs/observable/BoundCallbackObservable.js
Module build failed: TypeError: Cannot read property 'type' of undefined
at Object.getEffectiveTypeAnnotationNode (...\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:9341:17)
at assignContextualParameterTypes (...\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:41652:25)
at checkFunctionExpressionOrObjectLiteralMethod (...\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:41948:29)
at checkExpressionWorker (...\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:42959:28)
at checkExpression (...\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:42898:42)
at checkExpressionCached (...\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:42779:38)
at checkReturnStatement (...\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:45418:54)
at checkSourceElement (...\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:46763:28)
at Object.forEach (...\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:1506:30)
at checkBlock (...\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:44563:16)
at checkSourceElement (...\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:46742:28)
at checkFunctionExpressionOrObjectLiteralMethodDeferred (...\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:41990:21)
at checkDeferredNodes (...\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:46828:25)
at checkSourceFileWorker (...\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:46863:17)
at checkSourceFile (...\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:46842:13)
at Object.forEach (...\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:1506:30)
@ ./node_modules/rxjs/observable/bindCallback.js 2:32-68
@ ./node_modules/rxjs/add/observable/bindCallback.js
@ ./node_modules/rxjs/Rx.js
@ ./src/root.component.ts
@ ./src/$$_gendir/app.module.ngfactory.ts
@ ./src/main.ts
@ multi ./src/main.ts
ERROR in ./node_modules/rxjs/observable/BoundNodeCallbackObservable.js
Module build failed: TypeError: Cannot read property 'type' of undefined
at Object.getEffectiveTypeAnnotationNode (...\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:9341:17)
at assignContextualParameterTypes (...\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:41652:25)
at checkFunctionExpressionOrObjectLiteralMethod (...\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:41948:29)
at checkExpressionWorker (...\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:42959:28)
at checkExpression (...\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:42898:42)
at checkExpressionCached (...\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:42779:38)
at checkReturnStatement (...\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:45418:54)
at checkSourceElement (...\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:46763:28)
at Object.forEach (...\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:1506:30)
at checkBlock (...\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:44563:16)
at checkSourceElement (...\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:46742:28)
at checkFunctionExpressionOrObjectLiteralMethodDeferred (...\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:41990:21)
at checkDeferredNodes (...\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:46828:25)
at checkSourceFileWorker (...\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:46863:17)
at checkSourceFile (...\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:46842:13)
at Object.forEach (...\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:1506:30)
@ ./node_modules/rxjs/observable/bindNodeCallback.js 2:36-76
@ ./node_modules/rxjs/add/observable/bindNodeCallback.js
@ ./node_modules/rxjs/Rx.js
@ ./src/root.component.ts
@ ./src/$$_gendir/app.module.ngfactory.ts
@ ./src/main.ts
@ multi ./src/main.ts
Desired functionality.
Whether that rxjs syntax should be build success? I don’t think so!
A better error message is good!
Mention any other details that might be useful.
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 44
- Comments: 89 (13 by maintainers)
Commits related to this issue
- fix(@angular/cli): update build-optimizer Fix #7114 Fix #7110 Fix #7093 — committed to filipesilva/angular-cli by filipesilva 7 years ago
- fix(@angular/cli): update build-optimizer Fix #7114 Fix #7110 Fix #7093 — committed to angular/angular-cli by filipesilva 7 years ago
- fix(@angular/cli): update build-optimizer Fix #7114 Fix #7110 Fix #7093 — committed to angular/angular-cli by filipesilva 7 years ago
- fix: import Observable, Subscription seperately to fix --build-optimizer flag (ref: https://github.com/angular/angular-cli/issues/7110#issuecomment-318429320) — committed to Sirimangalo/meditation-plus-angular by deleted user 7 years ago
- mockup-service provider prod build issues - https://github.com/angular/angular-cli/issues/7110 — committed to u4bi-store/cms by myungjaeyu 7 years ago
- mockup-service provider prod build issues - https://github.com/angular/angular-cli/issues/7110 — committed to u4bi-store/cms by myungjaeyu 7 years ago
- comment entry prod build issues - angular/angular-cli#7110 — committed to u4bi-store/cms by myungjaeyu 7 years ago
- fix(@angular/cli): update build-optimizer Fix #7114 Fix #7110 Fix #7093 — committed to d2clouds/speedray-cli by filipesilva 7 years ago
I had a similar problem and solved it by replacing
import { Observable } from 'rxjs/Rx';
withimport { Observable } from 'rxjs/Observable';
.Same issue over here with
"@angular/cli": "^1.5.0" @angular/compiler-cli": "^5.0.0"
try this
npm install typescript@latest
working fine!
@nmorenor You should NOT have any imports from ‘rxjs/Rx’
All imports should be like
import { BlaBla } from 'rxjs/BlaBla'
or it also allows you to import operators like this:
import 'rxjs/add/operator/blaperator';
Any attempt to
import { BlaBla } from 'rxjs/Rx'
WILL FAIL to build with new flag!Please reopen this issue @hansl
I habe the same issue with Angular CLI 1.3.0 and Angular 4.3.4 😦
Same warning as @MrBlaise & @
With Angular5,
ng build --prod
with “typescript”: “2.5.0”
with “typescript”: “2.6.1”
Solution (with Warning):
npm install typescript@latest
I have the same issue, version 1.3.0
Fixed by https://github.com/angular/devkit/pull/299, will be out on the next release.
It’s odd that the the versions of typescript that they recommend don’t actually work… I can also confirm bumping to Typescript 2.6.1 solved the issue.
Im getting same issue - but dont think the import is “mis-aligned”. Im using a 3rd party library which imports Observable bindCallback like this:
import 'rxjs/add/observable/bindCallback';
and then my build results in:
Encountered the same error, solved with upgrade to Typescript 2.6.1, disabled the Typescript mismatch warning in angular-cli.json
"warnings": { "typescriptMismatch": false }
However, this is concerning and it would be nice to know why the recommended Typescript version 2.4.2 is not working correctly with Angular 5.x + rxjs 5.5.2
I’m getting the same error when building and using a third party dependency ng2-responsive.
@ multi ./src/main.ts
Upgrading typescript to 2.6.1 solved the problem. Not sure if there is a reason to look at cli warning about typescript
Solved: with : @angular/cli "^v1.5.0-rc.8
While a barrel import may be undesirable in some instances, you absolutely CAN have imports directly from “rxjs/Rx”. There’s no reason why these should fail.
@filipesilva @hansl Can this issue be re-opened?
@jinder well, I get that one if I use Angular 4.4.4 with the CLI 1.5.0-beta.3. If I use Angular 5 RC0 I get the weird typescript stack trace, which actually looking closer is different than in this issue:
I’ve already have the import {} from ‘rxjs/Rx’; form on all of the files of my project but I keep having the same error. Any ideas?
Fixed changing form es5 to “target”: “es6”, on tsconfig.json
no need to downgrade the typescript version
Upgraded to ng 5.0.0-rc.8 + cli 1.5.0-rc.6 => i get the same issue. Before that, was on ng rc.6 & cli rc 3, and no problem.
same here. Angular 5.0.0-beta.3 and CLI 1.3.0
“ERROR in ./node_modules/rxjs/observable/BoundCallbackObservable.js Module build failed: TypeError: Cannot read property ‘type’ of undefined”
only when adding --build-optimizer to my build command
I was running into the same issue, even with all the imports correct.
Upgrading TypeScript from 2.4.2 (default from Angular Cli) to 2.6.1 solved the issue without any other change.
After updating to Angular 5.0 and CLI 1.5 the problem si back: ./node_modules/rxjs/observable/BoundNodeCallbackObservable.js
i have to mention we haven’t migrated to “lettable operators” yet, so we have to import ‘rxjs/Rx’; in main.ts.
breaking change for me going from Angular 4 to Angular 5 when running “ng build --prod”. change import ‘rxjs/Rx’ to import ‘rxjs/add/operator/map’ and for all other operators, catch, map, etc.
On a new project, I added this to the start of
src/main.ts
:Then ran
ng build --prod --build-optimizer
. I had no build errors.Can someone give me repro steps to see the issue in
1.3.1
please? Also can you donpm ls @angular-devkit/build-optimizer
and tell me what version is in your project?The same issue here. Angular CLI 1.3 with latest libraries
ERROR in ./node_modules/rxjs/observable/BoundCallbackObservable.js Module build failed: TypeError: Cannot read property ‘type’ of undefined at Object.getEffectiveTypeAnnotationNode
I’ve solved it installing typescript@2.6.1
Hopefully this gets addressed as many projects will have third party dependencies that are still importing from “rxjs/Rx” and this will break your build following the guidelines the angular team has posted on updating your app.
They really should reopen this issue.
Importing from ‘rxjs/Observable’ will break webSocket functionality.
Hi there, thanks !
I had the same issue with angular 5 / cli 1.5 / typescript 2.4.2. Upgrading typescript to 2.6.1 also solved the problem, but the compiler shows a warning because it expects typescript >=2.4.2 and < 2.5.
In our case, we got rid of this error by modifying a custom decorator which was receiving a lambda as a parameter. We moved the lambda into a named function and it started building.
I also encountered this error after upgrading to angular-cli 1.5, Angular 5, TypeScript 2.4 building with command:
ng build -prod --extract-css --named-chunks
(-prod
should be the only relevant argument)EDIT: My code is still using chained RxJS, nothing is using lettable operators. I’m still importing with ‘rxjs/add//’ in a single rxjs.import.ts file, which is imported by my SharedModule.
Upgrading to TypeScript 2.5 fixed the build!
I tried other solutions with TypeScript 2.4
import { X } from 'rxjs'
toimport { X } from 'rxjs/X'
import 'rxjs/add/observable/bindNodeCallback';
But this didn’t work. I reverted the changes after upgrading to TypeScript 2.5 and the build continued to work. I think bindCallback/bindNodeCallback is a just a red herring, I think it may be an artifact of being one of the first files (due to a default alphabetic sort).
angular-cli prints a warning when using TypeScript 2.5, is there a reason not to use it?
This seems to be coming up again so I’m reopening. Can someone provide me with a reproduction please?
According to @rtm in https://github.com/angular/angular-cli/issues/7110#issuecomment-318429320 it might be related to rxjs imports:
If someone can get me a repro with Angular 5.0.0-rc.9 + cli 1.5.0-rc.8 I’d love to take a look and try to fix it.
@filipesilva I just tried the same on a fresh
@angular/cli 1.3.1
project and the one single thing I did to reproduce the error was to upgrade typescript from2.3.4
to2.4.2
and add the import like you did insrc/main.ts
.Actually it’s even sufficient to import the following to reproduce the error:
I resolved these errors by refactoring all the imports, some imports we had were from angular 2 time, they are now outdated, making sure there is no whole library import, just the object and operator you need. Like below. import {Subscription} from “rxjs/Subscription”; import ‘rxjs/add/operator/map’; import ‘rxjs/add/operator/take’; import ‘rxjs/add/operator/toPromise’;