Angular-cli: Angular app runs fine via "ng serve -aot" and "ng build -aot" but once --prod is appended, build is successful but console errors in browser..
Versions
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ â–³ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 1.6.4
Node: 8.9.1
OS: darwin x64
Angular: 5.2.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
@angular/cli: 1.6.4
@angular-devkit/build-optimizer: 0.0.38
@angular-devkit/core: 0.0.25
@angular-devkit/schematics: 0.0.48
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.4
@schematics/angular: 0.1.13
@schematics/schematics: 0.0.13
typescript: 2.6.2
webpack: 3.10.0
Observed behavior
Running via
ng serve --aot --progress=false --proxy-config proxy.conf.jsonand no errors in the console, everything works well.Running a build via
ng build --aotand the output files work just like ng serve above.Running via
ng serve --aot --prodand the application won't render and the following console messages appears.Running via
ng build --aot --prodand the application won't render with the same console messages asng serve --aot --prod.
FireFox Error:
TypeError: t[r] is undefined main.1eda0feb0dddc7c4747b.bundle.js:1:791705
Chrome Error:
Uncaught TypeError: Cannot read property 'call' of undefined main.d8cd32d2ec09f8365918.bundle.js:1
at n (main.d8cd32d2ec09f8365918.bundle.js:1)
at Object.t.exports (main.d8cd32d2ec09f8365918.bundle.js:1)
at n (main.d8cd32d2ec09f8365918.bundle.js:1)
at Object.t.exports (main.d8cd32d2ec09f8365918.bundle.js:1)
at n (main.d8cd32d2ec09f8365918.bundle.js:1)
at Object.t.exports (main.d8cd32d2ec09f8365918.bundle.js:1)
at n (main.d8cd32d2ec09f8365918.bundle.js:1)
at Object.t.exports (main.d8cd32d2ec09f8365918.bundle.js:1)
at n (main.d8cd32d2ec09f8365918.bundle.js:1)
at Object.<anonymous> (main.d8cd32d2ec09f8365918.bundle.js:1)
Desired behavior
when appending --prod no errors should be produced
Mention any other details that might be useful (optional)
I'm at a bit of a loss as I have no idea how to debug this. Is is the compiler or something I'm doing?
I can provide the repo if needed.
kisonay
All 21 comments
I'm having the same problem.
Angular CLI: 1.6.4
Node: 8.9.4
OS: win32 x64
Angular: 5.2.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
@angular/cdk: 5.1.0
@angular/cli: 1.6.4
@angular/material-moment-adapter: 5.1.0
@angular/material: 5.1.0
@angular-devkit/build-optimizer: 0.0.38
@angular-devkit/core: 0.0.25
@angular-devkit/schematics: 0.0.48
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.4
@schematics/angular: 0.1.13
@schematics/schematics: 0.0.13
typescript: 2.6.2
webpack: 3.10.0
Adding the flag --target=production (or -prod) causes this error to be thrown in Chrome:
main.5b7fd60cb6045ff958dd.bundle.js:1 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'call' of undefined
TypeError: Cannot read property 'call' of undefined
at n (0.18c49551e7ce1dbc96cc.chunk.js:1)
at Object.e.exports (0.18c49551e7ce1dbc96cc.chunk.js:1)
at n (0.18c49551e7ce1dbc96cc.chunk.js:1)
at Object.e.exports (0.18c49551e7ce1dbc96cc.chunk.js:1)
at n (0.18c49551e7ce1dbc96cc.chunk.js:1)
at Object.e.exports (0.18c49551e7ce1dbc96cc.chunk.js:1)
at n (0.18c49551e7ce1dbc96cc.chunk.js:1)
at Object.e.exports (0.18c49551e7ce1dbc96cc.chunk.js:1)
at n (0.18c49551e7ce1dbc96cc.chunk.js:1)
at Object.<anonymous> (0.18c49551e7ce1dbc96cc.chunk.js:1)
at n (0.18c49551e7ce1dbc96cc.chunk.js:1)
at Object.e.exports (0.18c49551e7ce1dbc96cc.chunk.js:1)
at n (0.18c49551e7ce1dbc96cc.chunk.js:1)
at Object.e.exports (0.18c49551e7ce1dbc96cc.chunk.js:1)
at n (0.18c49551e7ce1dbc96cc.chunk.js:1)
at Object.e.exports (0.18c49551e7ce1dbc96cc.chunk.js:1)
at n (0.18c49551e7ce1dbc96cc.chunk.js:1)
at Object.e.exports (0.18c49551e7ce1dbc96cc.chunk.js:1)
at n (0.18c49551e7ce1dbc96cc.chunk.js:1)
at Object.<anonymous> (0.18c49551e7ce1dbc96cc.chunk.js:1)
at x (polyfills.36f8c8e88559416ea82a.bundle.js:1)
at x (polyfills.36f8c8e88559416ea82a.bundle.js:1)
at polyfills.36f8c8e88559416ea82a.bundle.js:1
at t.invokeTask (polyfills.36f8c8e88559416ea82a.bundle.js:1)
at Object.onInvokeTask (main.5b7fd60cb6045ff958dd.bundle.js:1)
at t.invokeTask (polyfills.36f8c8e88559416ea82a.bundle.js:1)
at n.runTask (polyfills.36f8c8e88559416ea82a.bundle.js:1)
at g (polyfills.36f8c8e88559416ea82a.bundle.js:1)
m-ghaoui
on 18 Jan 2018
Yes, that does look like the same issue. I've deconstructed my project trying to determine the peice of code that is causing this without success. I have found that if I add the flag --aot=false to the build, this problem is no longer present. So it appears related to AOT.
kisonay
on 18 Jan 2018
Related: https://github.com/angular/angular-cli/issues/6196
Facing this issue also, making no progress.
- Using --aot=false flag does not work for me
- Reverting to previously successful deployments now throw the same error
- Tried as many of the suggestions in the linked issue as I could
I'm stumped on this one - debugging this is beyond me. Hopefully someone can resolve this soon.
NickToony
on 18 Jan 2018
I am having the same issue. it works fine with --aot=false.
without --aot=false, its not generating vendor.bundle.js file
"dependencies": {
"@angular/animations": "^5.1.0",
"@angular/common": "^5.1.0",
"@angular/cdk": "^5.0.0-rc.1",
"@angular/compiler": "^5.1.0",
"@angular/core": "^5.1.0",
"@angular/forms": "^5.1.0",
"@angular/http": "^5.1.0",
"@angular/material": "^5.0.0-rc.1",
"@angular/platform-browser": "^5.1.0",
"@angular/platform-browser-dynamic": "^5.1.0",
"@angular/router": "^5.1.0",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
"@ngrx/router-store": "^4.1.1",
"@ngrx/store": "^4.1.1",
"@ngrx/store-devtools": "^4.1.1",
"angular-handsontable": "^1.0.0-beta3",
"classlist.js": "^1.1.20150312",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19"
},
"devDependencies": {
"@angular/cli": "^1.6.3",
"@angular/compiler-cli": "^5.1.0",
"@angular/language-service": "^5.1.0",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"highcharts": "^6.0.3",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"ngrx-store-freeze": "^0.2.0",
"pptxgenjs": "^1.10.0",
"protractor": "~5.1.2",
"quill": "^1.3.4",
"ts-node": "~3.2.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
}
vikash20186
on 19 Jan 2018
I don't get errors in the browser when I build with --build-optimizer=false
Here is my (redacted) build script (powershell):
ng build --target=production `
--environment=production --output-path=C:\Temp\My-Project\wwwroot `
--aot --build-optimizer=false `
--namedChunks `
--base-href=/
I managed to make it work and it seemed to be related to a dependency which got updated ... 3 days ago (coincidence ?)
The package is reflect-metadata which got a new version 0.1.12. When I restore the older version which is 0.1.10 (0.1.11 got deprecated within a day) things start to work again with the following flags.
$> ng build --aot=true --prod --build-optimizer=false
When doing an npm list reflect-metadata, it seems that @angular/compiler-cli is using this dependency.
darkurse
on 19 Jan 2018
ng build --prod --aot --build-optimizer=false does work for me. @darkurse how did you downgrade? Curious if after the downgrade it would build with just ng build --prod --aot
Would this be considered a bug with @angular/cli or it's dependency?
kisonay
on 19 Jan 2018
From a conversation I had in Gitter, it seems to be an issue with @angular-devkit/build-optimizer . I don't have any details about this, though.
m-ghaoui
on 19 Jan 2018
@m-ghaoui yes, i see that. looks the hope will be that this will be fixed in 1.6.5.
kisonay
on 19 Jan 2018
@kisonay , downgrade with npm uninstall reflect-metadata and then installed npm install [email protected].
As for the build flags, what makes the difference for me when aot is on, is the _--build-optimizer=false_
There are two separate issues here. One with a dependency that gives the error Cannot read property 'call' of undefined mentioned at the very beginning. And another issue related to the build process itself.
@m-ghaoui, it is an issue with what ? A crucial word is missing in your comment :)
darkurse
on 19 Jan 2018
@darkurse It was @angular-devkit/build-optimizer
m-ghaoui
on 19 Jan 2018
Same issue with CLI 1.6.5
With
ng build --prod --aot=false
our application works well.
But with
ng build --prod --aot=true
(or without --aot parameter as well) - it fails with the same error message ('call' of undefined)
korzh
on 21 Jan 2018
Yes, it looks like the issue is still present in 1.6.5.
It is my understanding that --aot is true by default on a --prod build which is why you see the issue with or without it.
kisonay
on 21 Jan 2018
@kisonay Yes, you are totally right: --aot is turned on by default.
We made some additional tests. It seems, it also works fine with the following combination:
ng build --prod --build-optimizer=false
Resolved with 1.6.6, thanks guys!
NickToony
on 25 Jan 2018
Seems the issue is back in 1.7.1 (and also 1.7.3)!
We had to apply the workaround with
--build-optimizer=false
and this worked.
pgossmann
on 14 Mar 2018
It works for me:
ng build --aot=false --prod --build-optimizer=false
The size of the builded files in this case is not much larger than with "ng build --prod --aot ":
1). ng build --prod --aot #[size of js: 7 items, totalling 3,6 MB, all files in /dist/: 84 items, totalling 10,3 MB]
2). ng build --aot=false --prod --build-optimizer=false #[size of js: 7 items, totalling 4,1 MB, all files in /dist/: 84 items, totalling 10,8 MB ]
AndrewMilko
on 14 Nov 2018
I was having the issue that Angular 7 project is not displaying in Firefox and IE Edge. I followed below steps and it all started working in Chrome, IE Edge and Firefox
- ng new ng7Proj1
- uncomment in src/polyfills.ts for IE and Firefox to run
- npm install --save classlist.js
- npm install --save web-animations-js
- npm install [email protected]
- ng build --aot=false
- npm serve -g
- (from dist/ProjectName) serve -s -l 5678
For those who are facing the similiar issue, can try these steps
OS: Windows 7 Enterprises, Node: 10.0.0, npm: 6.4.0
arunkkumar2207j
on 18 Dec 2018
i am getting this error using ANGULAR7 , I HAVE TRIED ALL THE POSSIBILITIES PLEASE HELP ME
ERROR in node_modules/rxjs/src/internal/observable/from.ts(116,29): error TS2345: Argument of type 'import("D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/src/internal/types").SchedulerLike' is not assignable to parameter of type 'import("D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/internal/types").SchedulerLike'.
Types of property 'schedule' are incompatible.
Type '
Types of parameters 'work' and 'work' are incompatible.
The 'this' types of each signature are incompatible.
Type 'import("D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/src/internal/types").SchedulerAction
Types of property 'schedule' are incompatible.
Type '(state?: T, delay?: number) => import("D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/src/internal/Subscription").Subscription' is not assignable to type '(state?: T, delay?: number) => import("D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/internal/Subscription").Subscription'.
Type 'import("D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/src/internal/Subscription").Subscription' is
not assignable to type 'import("D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/internal/Subscription").Subscription'.
Property '_parentOrParents' is protected but type 'Subscription' is not a class derived from 'Subscription'.
node_modules/rxjs/src/internal/scheduled/scheduled.ts(25,40): error TS2345: Argument of type 'import("D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/internal/types").SchedulerLike' is not assignable to parameter of type 'import("D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/src/internal/types").SchedulerLike'.
Types of property 'schedule' are incompatible.
Type '
Types of parameters 'work' and 'work' are incompatible.
The 'this' types of each signature are incompatible.
Type 'import("D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/internal/types").SchedulerAction
Types of property 'schedule' are incompatible.
Type '(state?: T, delay?: number) => import("D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/internal/Subscription").Subscription' is not assignable to type '(state?: T, delay?: number) => import("D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/src/internal/Subscription").Subscription'.
Type 'import("D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/internal/Subscription").Subscription' is not
assignable to type 'import("D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/src/internal/Subscription").Subscription'.
Property '_parentOrParents' is protected but type 'Subscription' is not a class derived from 'Subscription'.
node_modules/rxjs/src/internal/scheduled/scheduled.ts(27,37): error TS2345: Argument of type 'import("D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/internal/types").SchedulerLike' is not assignable to parameter of type 'import("D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/src/internal/types").SchedulerLike'.
node_modules/rxjs/src/internal/scheduled/scheduled.ts(29,35): error TS2345: Argument of type 'import("D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/internal/types").SchedulerLike' is not assignable to parameter of type 'import("D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/src/internal/types").SchedulerLike'.
node_modules/rxjs/src/internal/scheduled/scheduled.ts(31,38): error TS2345: Argument of type 'import("D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/internal/types").SchedulerLike' is not assignable to parameter of type 'import("D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/src/internal/types").SchedulerLike'.
adhivenkatesh
on 14 May 2019
Hi Good day , ---, When ever i am creating new projects i am getting the following then i have to manually remove those error dependencies using npm uninstall 'error dependencies' , then npm install 'missing error dependencies'
Why it is?, any one experienced like this? Welcoming best solution for this.
@angular-devkit/architect 0.13.9 (cli-only)
@angular-devkit/build-angular
@angular-devkit/core 7.3.9 (cli-only)
@angular-devkit/schematics 7.3.9 (cli-only)
@angular/cli
@angular/compiler-cli
@angular/language-service
@schematics/angular 7.3.9 (cli-only)
@schematics/update 0.13.9 (cli-only)
rxjs 6.3.3
typescript 3.2.4 (cli-only)
adhivenkatesh
on 18 May 2019
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._
![angular-automatic-lock-bot[bot] picture](https://avatars0.githubusercontent.com/in/40213?v=4&s=40)
angular-automatic-lock-bot[bot]
on 9 Sep 2019
Related issues
ericel
·
3Comments
rwillmer
·
3Comments
daBishMan
·
3Comments
gotschmarcel
·
3Comments
jbeckton
·
3Comments
Most helpful comment
Seems the issue is back in 1.7.1 (and also 1.7.3)!
We had to apply the workaround with
--build-optimizer=false
and this worked.