search

angular / angular-cli

CLI tool for Angular
https://cli.angular.dev
MIT License
26.78k stars 11.98k forks source link

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.. #9244

Closed kisonay closed 6 years ago

kisonay commented 6 years ago

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

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.

m-ghaoui commented 6 years ago

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)
kisonay commented 6 years ago

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.

NickToony commented 6 years ago

Related: https://github.com/angular/angular-cli/issues/6196

Facing this issue also, making no progress.

  1. Using --aot=false flag does not work for me
  2. Reverting to previously successful deployments now throw the same error
  3. 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.

vikash20186 commented 6 years ago

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" }

m-ghaoui commented 6 years ago

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=/
darkurse commented 6 years ago

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.

kisonay commented 6 years ago

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?

m-ghaoui commented 6 years ago

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.

kisonay commented 6 years ago

@m-ghaoui yes, i see that. looks the hope will be that this will be fixed in 1.6.5.

darkurse commented 6 years ago

@kisonay , downgrade with npm uninstall reflect-metadata and then installed npm install reflect-metadata@0.1.10.

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 :)

m-ghaoui commented 6 years ago

@darkurse It was @angular-devkit/build-optimizer

korzh commented 6 years ago

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)

kisonay commented 6 years ago

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.

korzh commented 6 years ago

@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
NickToony commented 6 years ago

Resolved with 1.6.6, thanks guys!

pgossmann commented 6 years ago

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.

AndrewMilko commented 6 years ago

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 ]

arunkkumar2207j commented 5 years ago

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

  1. ng new ng7Proj1
  2. uncomment in src/polyfills.ts for IE and Firefox to run
  3. npm install --save classlist.js
  4. npm install --save web-animations-js
  5. npm install reflect-metadata@0.1.10
  6. ng build --aot=false
  7. npm serve -g
  8. (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

adhivenkatesh commented 5 years ago

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 '(work: (this: import("D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/src/internal/types").SchedulerAction, state?: T) => void, delay?: number, state?: T) => import("D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/src/internal/Subscription").Subscription' is not assignable to type '(work: (this: import("D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/internal/types").SchedulerAction, state?: T) => void, delay?: number, state?: T) => import("D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/internal/Subscription").Subscription'. 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' is not assignable to 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/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 '(work: (this: import("D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/internal/types").SchedulerAction, state?: T) => void, delay?: number, state?: T) => import("D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/internal/Subscription").Subscription' is not assignable to type '(work: (this: import("D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/src/internal/types").SchedulerAction, state?: T) => void, delay?: number, state?: T) => import("D:/AngularProjects/AngularRouting/Routing/node_modules/rxjs/src/internal/Subscription").Subscription'. 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' is not assignable to 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/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 commented 5 years ago

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)

angular-automatic-lock-bot[bot] commented 5 years ago

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.