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

[kisonay]

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.json and no errors in the console, everything works well.

• Running a build via ng build --aot and the output files work just like ng serve above.

• Running via ng serve --aot --prod and the application won't render and the following console messages appears.

• Running via ng build --aot --prod and the application won't render with the same console messages as ng 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.

[m-ghaoui]

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]

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]

Related: #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]

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]

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]

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]

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]

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]

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

[darkurse]

@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]

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

[korzh]

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)