TypeError: Cannot read property 'call' of undefined

[JohanBeumer]

🐞 Bug report

Command (mark with an x)

- [ ] new
- [x] build
- [x] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

Yes, the previous version in which this bug was not present was: ....

I don't know what version it was, but when uglifyjs instead of terser was used it worked

Description

A clear and concise description of the problem...

The problem I have is that when I use a custom webpack.config in an attempt to prevent certain keywords (classnames in my case) from being mangled it does not work and still mangles the classname. This happens when I start the app with ng serve --prod --aot
I expect the page to show :

Classname is Foo

But in my case it shows :

ClassName is ip

When I build the app with ng build --prod --aot and then start the app I get the error as shown by "Exception or Error".

🔬 Minimal Reproduction

You can reproduce the issue by cloning this repo and use any of these commands :

- ng serve --prod --aot
- ng build --prod --aot

🔥 Exception or Error

Running the result of ng build --prod --aot gives this error :

runtime-es2015.29bb7a5678a9e1bc4d05.js:1 Uncaught TypeError: Cannot read property 'call' of undefined
    at f (runtime-es2015.29bb7a5678a9e1bc4d05.js:1)
    at Object.1 (polyfills-es2015.8f5c586921f6179cdfaf.js:1)
    at f (runtime-es2015.29bb7a5678a9e1bc4d05.js:1)
    at e (runtime-es2015.29bb7a5678a9e1bc4d05.js:1)
    at Array.r [as push] (runtime-es2015.29bb7a5678a9e1bc4d05.js:1)
    at polyfills-es2015.8f5c586921f6179cdfaf.js:1
f @ runtime-es2015.29bb7a5678a9e1bc4d05.js:1
1 @ polyfills-es2015.8f5c586921f6179cdfaf.js:1
f @ runtime-es2015.29bb7a5678a9e1bc4d05.js:1
e @ runtime-es2015.29bb7a5678a9e1bc4d05.js:1
r @ runtime-es2015.29bb7a5678a9e1bc4d05.js:1
(anonymous) @ polyfills-es2015.8f5c586921f6179cdfaf.js:1

🌍 Your Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.0.2
Node: 11.12.0
OS: win32 x64
Angular: 8.0.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.2
@angular-devkit/build-angular     0.800.2
@angular-devkit/build-optimizer   0.800.2
@angular-devkit/build-webpack     0.800.2
@angular-devkit/core              8.0.2
@angular-devkit/schematics        8.0.2
@angular/cli                      8.0.2
@ngtools/webpack                  8.0.2
@schematics/angular               8.0.2
@schematics/update                0.800.2
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.33.0

Anything else relevant?

Don't now if it's browser specific. I'm getting it in Google chrome version 75.0.3770.90 (Official Build) (64-bit)

I created an issue with webpack, but I got asked by @filipesilva to create the issue with angular-cli.

[filipesilva]

Heya, indeed it's not a webpack issue. It's happens because we mangle class names on our minification step. That is intended behaviour. #6454 (comment) explains the problem, and alternative approaches. #5883 was also a similar problem.

[JohanBeumer]

@filipesilva I added a static property to the class and use that, as is suggested in #6454.

With that adjustment in place
ng serve --prod --aot
shows the value of the static property and works as expected!

However build the app with
ng build --prod --aot
and then run it, does not work as expected. The console still gives me the error :

Uncaught TypeError: Cannot read property 'call' of undefined at f (runtime-es2015.198ddbbdf5cdf33526c8.js:1) at Object.1 (polyfills-es2015.6b281348ab3c9101b157.js:1) at f (runtime-es2015.198ddbbdf5cdf33526c8.js:1) at t (runtime-es2015.198ddbbdf5cdf33526c8.js:1) at Array.r [as push] (runtime-es2015.198ddbbdf5cdf33526c8.js:1) at polyfills-es2015.6b281348ab3c9101b157.js:1 f @ runtime-es2015.198ddbbdf5cdf33526c8.js:1 1 @ polyfills-es2015.6b281348ab3c9101b157.js:1 f @ runtime-es2015.198ddbbdf5cdf33526c8.js:1 t @ runtime-es2015.198ddbbdf5cdf33526c8.js:1 r @ runtime-es2015.198ddbbdf5cdf33526c8.js:1 (anonymous) @ polyfills-es2015.6b281348ab3c9101b157.js:1

I updated all dependencies in my sample repo the latest versions.
ng version now shows :

    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.0.3
Node: 11.12.0
OS: win32 x64
Angular: 8.0.1
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.3
@angular-devkit/build-angular     0.800.3
@angular-devkit/build-optimizer   0.800.3
@angular-devkit/build-webpack     0.800.3
@angular-devkit/core              8.0.3
@angular-devkit/schematics        8.0.3
@angular/cli                      8.0.3
@ngtools/webpack                  8.0.3
@schematics/angular               8.0.3
@schematics/update                0.800.3
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.34.0

Can you please take a look at this issue again and reopen it if appropriate?

I also have a question about the TerserOptions. The documentation says :
keep_fnames (default: false) - pass true to prevent discarding or mangling of function names. Pass a regular expression to only keep class names matching that regex. Useful for code relying on Function.prototype.name. If the top level minify option keep_classnames is undefined it will be overridden with the value of the top level minify option keep_fnames

Based on this I would expect my classname/functionname not to be mangled. But this conflicts the comment in #6454. Am I making a thinking mistake here?

[filipesilva]

Terser indeed has that option. But we do not use it or expose it. If you wish to configure Terser with custom options, we suggest using something like https://github.com/manfredsteyer/ngx-build-plus.

I tried to reproduce the Uncaught TypeError: Cannot read property 'call' of undefined error you saw by following these steps:

git clone https://bitbucket.org/JohanBeumer/angular-ivy-aot.git
cd angular-ivy-aot
npm install
ng build --prod --aot

Then to serve I used http-server by installing it globally and running http-server dist/shiney-ivy-app/ and then opening http://127.0.0.1:8080/index.html in Chrome 74.

I see Classname is Foo and no errors in the console.

[angular-automatic-lock-bot]

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