Angular-cli: --prod does not work in Firefox ESR 45.9.0

[jmajnek]

Hi,

running ´ng serve --prod´ and opening the application in Firefox ESR 45.9.0 throws an exception.

TypeError: this is undefined

Versions

ng: 1.6.5
npm: 5.6.0
Node: 8.9.4

Repro steps

• ng new foobar
• cd foobar
• ng serve --prod
• Open in Firefox ESR 45.9.0

Observed behavior

Blank page, error in console

Desired behavior

Everything works as expected

BR
Jakob

[matthiaslischka]

I can reproduce this with Firefox 45.9.0 ESR win 32. Get it here.
BR

[hansl]

error in console

Could you be more specific?

[matthiaslischka]

There is not much more to it. One Warning and one error that this is undefinded

[Warning] mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create 
  main.0836c96b9484632bf48c.bundle.js:1:10588
[Error] TypeError: this is undefined   main.0836c96b9484632bf48c.bundle.js:1:87832

It works just fine with any other browser or when you do not add the --prod flag.

BR

[wunaidage]

same here, exactly the same behavior and console output

[TheParad0X]

Same problem here with Firefox 50.1.0. See #9362
Current workaround: instead of using
ng build --prod
use
ng build --aot --environment=prod --output-hashing=all --sourcemaps=false --extract-css=true --named-chunks=false --build-optimizer=true

The culprit is --target=production

[nstod]

We are seeing the same issue. The workaround submitted by @TheParad0X does indeed work, but it appears to bypass uglify, which we would greatly desire. I'm hoping to see this fixed as soon as possible.

[pfeigl]

We are facing the same problem and leaving the production flag out is no real option, because the dist size is not an option than (because of the missing uglify process).

Also all code is effectively visible to everyone way to easily (which might be a problem to closed-source projects)

[nstod]

We found a temporary workaround by reverting uglifyjs-webpack-plugin from version 1.1.8 to 1.1.5. Uglify is once again working on Firefox 45 for us.

[wunaidage]

https://github.com/angular/angular-cli/issues/8997 see this issue, will reverting uglifyjs cause this issue again?

[nstod]

No. [email protected] references [email protected], which is where fix #8997 was implemented. [email protected] updated to uglify-es@~3.3, which is where this error is occurring.

[stas-kh]

Oh, guys. I was looking exactly for this issue. Our users post bugs from Firefox 35.1 with the same issue in their dev console.

It would be really nice if you could fix the issue.

Thanks @nstod for the temporary workaround, the following helped me to figure out the problem:

npm i [email protected] --save-exact
rm -rf package-lock.json node_modules
npm install

[ericparton]

Could this issue have more than one cause? Pinning the webpack plugin version doesn't fix it for me.

[vdespa]

@ericparton Same here.

[stas-kh]

@ericparton @vdespa Make sure that in package.lock you have exactly the same version as you pinned.

Our app is running on production without any issues after the fix.

[ericparton]

@stas-kh Yeah, I just double checked the package lock and even went as far as to make sure that the only version of the uglifyjs-webpack-plugin in node_modules was 1.1.5. Still no dice. And for what it's worth, I'm also seeing this issue on Firefox 46.

[solael]

The uglifyjs-webpack-plugin workaround doesn't work for our project. And if I remove the --target=projection, it breaks utf-8 encoding support and localization support, even I added --locale=fr option... our project uses utf-8 for displaying French characters, it's all messed up (display, string comparison, numbers formatting...).

[vdespa]

Does anybody know if this bug has been reported to uglifyjs? I couldn't find anything in the issue tracker.

[rdrenker]

I'm also seeing this problem and it is occuring in Firefox v50 and lower; its working fine in v51 and v52 (current as of this writing).

Note that the tweak to the cli build params suggested by @TheParad0X worked for us, but as @nstod mentions, it has some undesirable side-effects.

I managed to work-around the problem using a similar solution to @stas-kh

1. Deleted my node-modules folder
2. Ran:
   npm i [email protected] [email protected] --save-exact

Adding [email protected] to the install did the trick, whereas [email protected] alone was not sufficient.

[solael]

Another workaround works for our project (angular cli 1.7.1) : just change command line option to --build-optimizer=false

[rdrenker]

You are right @solael - this worked for us too, but unfortunately almost doubled the size of our package, so we didn't want to go with that option.

[DavidBowdoin]

Thanks @rdrenker, your solution worked for me though angular cli 1.6.7

It did not work in cli 1.6.8 or 1.7.2

I encounter the issue all the way through Firefox v50. v51 is not affected.

[jonsamwell]

Any update on getting this resolved? The work around works but only for pre 1.6.8 versions of the cli so it is less than ideal.

[wunaidage]

any updates?

[7185]

Is there at least a workaround for the latest version?

[Luis3ma]

any updates?

[bastienlemaitre]

Same problem..

[xblader]

Folks,

I solved it turning off aot option. Of course, Its a workaround until this bug is fixed.
ng build --prod --aot=false

[Koesters]

same here, the workarounds function though

angular-cli 1.7.4

[timmyktom]

Same issue
angular-cli : 1.7.3
uglifyjs-webpack-plugin: 1.2.4
uglify-es: 3.3.9

In FireFox (versions 38, versions 49) TypeError : this is undefined

Even I tired by npm i [email protected] [email protected] --save-exact.
But no luck.

[FDIM]

Here is the fix I had to do for [email protected]:
in some postinstall script do:

const fs = require('fs');
// due to https://github.com/angular/angular-cli/issues/9340
// [email protected] and [email protected] are added to package.json
console.info('Removing uglifyjs-webpack-plugin and uglify-es from angular cli node_modules');
fs.renameSync('./node_modules/@angular/cli/node_modules/uglify-es', './node_modules/@angular/cli/node_modules/uglify-es-unused');
fs.renameSync('./node_modules/@angular/cli/node_modules/uglifyjs-webpack-plugin', './node_modules/@angular/cli/node_modules/uglifyjs-webpack-plugin-unused');

and add below to package.json:

"uglify-es": "3.2.2",
"uglifyjs-webpack-plugin": "1.1.5"

It is very ugly, but this is the only fix that works now. Sadly this not the only one we need :/ (looking at you momentjs)

[rbleuse]

Same error here, still the case with ng-cli 6.0.0 which uses [email protected] :

$ npm ls uglifyjs-webpack-plugin
[email protected] C:\workspace\Nouveau dossier\ng6
`-- @angular-devkit/[email protected]
  +-- [email protected]
  `-- [email protected]
    `-- [email protected]

npm i [email protected] [email protected] --save-exact doesn't fix a fresh ng6 project

[DavidBowdoin]

Here is my [email protected] workaround: (Adapted from @FDIM's solution)

add these two lines to package.json:

"uglify-es": "3.2.2",
"uglifyjs-webpack-plugin": "1.1.5"

run npm install on your project

manualy delete the following two folders from your project:

.\node_modules\@angular-devkit\build-angular\node_modules\uglify-es
.\node_modules\@angular-devkit\build-angular\node_modules\uglifyjs-webpack-plugin

ng build --prod now produces output that works on firefox 50 and older.

[rbleuse]

Indeed it's working if I install these deps :

"rimraf": "2.6.2",
"uglify-es": "3.2.2",
"uglifyjs-webpack-plugin": "1.1.5"

and this postinstall script :

"postinstall": "rimraf node_modules/@angular-devkit/build-angular/node_modules/uglify-es && rimraf node_modules/@angular-devkit/build-angular/node_modules/uglifyjs-webpack-plugin"

Thanks @DavidBowdoin

[eweap]

Hi everyone,
I've found an acceptable temporary solution for this problem in my projects.

If, like me you are using yarn, you can take advantage of the resolutions block in package.json (see doc https://yarnpkg.com/lang/en/docs/selective-version-resolutions/)

With this:

"resolutions": {
    "uglifyjs-webpack-plugin": "1.1.5"
}

added in your package.json, it will force your @angular/cli to use that exact version of uglifyjs-webpack-plugin

Hope it helps !

[amarnathm]

Solution provided by TheParad0X was working for me until today. Today, with Firefox 50.0.1, it works for some cases, doesn't for others.

The error "TypeError: this is undefined" is generated inside a firebase/angular file. Not happening with Chrome. And in dev env, it works fine for Firefox as well.

EDIT: going to the top-level url first, and then navigating to the various urls work. But going directly to a path url is failing. Does this work for you all?

[raphaelcps]

I could make it work for me after using @Spanja 's solution and adding two new directories to the postinstall step:

"dependencies": { ..., "rimraf": "2.6.2", "uglify-es": "3.2.2", "uglifyjs-webpack-plugin": "1.1.5" }

"postinstall": "rimraf node_modules/@angular-devkit/build-angular/node_modules/uglify-es && rimraf node_modules/@angular/cli/node_modules/uglify-es && rimraf node_modules/@angular-devkit/build-angular/node_modules/uglifyjs-webpack-plugin && rimraf node_modules/@angular/cli/node_modules/uglifyjs-webpack-plugin"

[LiamDotPro]

This is still not working, this needs more priority.

[josephliccini]

If it's an Uglify-ES bug, I think we just need to get a minimum code sample that reproduces the issue and file a bug in their repo.

I think the this is in PlatformRef according to this comment: https://github.com/angular/angular-cli/issues/8326#issuecomment-360808495

[josephliccini]

Might be related:
http://statichtml.com/2011/spidermonkey-function-hoisting.html

I confirmed in my testing that it is indeed PlatformRef (you can tell because this minified function has prototype property bootstrapModuleFactory

Here's the constructor that succeeds:

Here's the constructor that fails:

I'll continue investigating what is causing this, but my guess is function hoisting issues in old versions of FF that UglifyES did not account for.

[suau]

This isn't working for @angular/[email protected] either, here's a workaround:
install dev-dependencies:

npm i -D --save-exact [email protected] [email protected]

Now open package-lock.json

1. 
   
   • search for uglify-es until you found the entry with "version": "3.2.2"
   
   
   • copy the content like this:
     
     "version": "3.2.2", "resolved": "https://registry.npmjs.org/uglify-es/-/uglify-es-3.2.2.tgz", "integrity": "sha512-l+s5VLzFwGJfS+fbqaGf/Dfwo1MF13jLOF2ekL0PytzqEqQ6cVppvHf4jquqFok+35USMpKjqkYxy6pQyUcuug==", "dev": true, "requires": { "commander": "~2.12.1", "source-map": "~0.6.1" }
   
   
   • now search for @angular-devkit/build-angular and scroll down to the dependencies and replace the content for uglify-es with your clipboard.
   
   
2. 
   
   • search for uglifyjs-webpack-plugin until you found the entry with "version": "1.1.5"
   
   
   • copy the content like this:
     
     "version": "1.1.5", "resolved": "https://registry.npmjs.org/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.1.5.tgz", "integrity": "sha512-YBGc9G7dv12Vjx8vUQs54DZgAXVf04LlG6dNNiEbTZjL3PbUqiY4uPB9Kv+fUJaqRskEGva/lS7sh08yJr7jnA==", "dev": true, "requires": { "cacache": "^10.0.0", "find-cache-dir": "^1.0.0", "schema-utils": "^0.3.0", "serialize-javascript": "^1.4.0", "source-map": "^0.6.1", "uglify-es": "3.2.2", "webpack-sources": "^1.0.1", "worker-farm": "^1.4.1" }
   
   
   • now search for @angular-devkit/build-angular and scroll down to the dependencies and replace the content for uglifyjs-webpack-plugin with your clipboard.
   
   
3. Open your node_modules folder and find and delete the folder @angular-devkit/build-angular
4. Run npm install
5. Open your node_modules/@angular-devkit/build-angular/node_modules/uglify-es check the package.json file and confirm it's version [email protected]
6. Open your node_modules/@angular-devkit/build-angular/node_modules/uglifyjs-webpack-plugin check the package.json file and confirm it's version [email protected]

It would be great if someone working on @angular-devkit/build-angular could just pin the uglifyjs-webpack-plugin version number to 1.1.5

[WizardPC]

A definitive solution has been identified ? We are planning to migrate from Angular 4 to Angular 6 and it's not possible for our client to lost one of the main browser...

[LiamDotPro]

@WizardPC This problem is present in more than just 6, there's a couple of versions in 5 and 4 that I tried moving too which also experience the same issue.

[filipesilva]

Hi all,

@suau has provided a good summary of this issue in https://github.com/angular/angular-cli/issues/11552, but unfortunately we cannot follow through it with. Reverting to an older version of uglify-es might address this problem, but will cause other bugs that have meanwhile been fixed in uglify-es to manifest themselves again.

Updating to a newer version of uglify-es is also not an option, because it is not being maintained anymore.

The affected versions of Firefox ESR seem to be <50, but according to https://www.mozilla.org/en-US/firefox/organizations/ the current ESR is 52, which is not affected according to https://github.com/angular/angular-cli/issues/9340#issuecomment-368590267.

Given that the latest Firefox ESR should work, together with the stated Angular browser support for Firefox listing latest only, and not having a good way to address the problem on uglify-es itself, we have decided to not take action on this issue.

I'm sorry that there isn't anything we can do right now to address the problem you all are experiencing, but in the future we will be looking at alternatives to uglify-es to prevent situations like this. Meanwhile, I suggest updating to the latest Firefox ESR.

[kubbafox]

Hi @filipesilva, we just updated CLI to a new release but we are still having this issues with FF < 51

Error - TypeError - This is undefined.

"devDependencies": {
"@angular-devkit/build-angular": "^0.8.1",
"@angular/cli": "~6.2.1",
"@angular/compiler-cli": "^6.1.7",
"@angular/language-service": "^6.1.7",
.....
}

[filipesilva]

For Angular CLI 7 we are replacing uglify-es with terser: https://github.com/angular/angular-cli/pull/11996.

It should help address this issue.

[WizardPC]

A definitive solution has been identified ? We are planning to migrate from Angular 4 to Angular 6 and it's not possible for our client to lost one of the main browser...

Update :

Angular CLI: 6.2.3
Node: 8.10.0
OS: win32 x64
Angular: 6.1.8

Working again on Firefox 45.2.0 :cake:

[raDiesle]

Are you sure? How it can be fixed in 6.2.3, which should be 7.0.0

[WizardPC]

Hem... Sorry for false hope ! The teams who build the app (with Jenkins) failed and forgot to use the flag "prod" so the code wasn't minified and working on Firefox... "It's not a bug it's a feature" kind of 👍

[josephliccini]

Hi all,

I have upgraded to use the latest build of Terser and Terser Webpack Plugin in Angular 7, and I am still seeing this reproduce in FireFox <50.

Has anyone upgraded and has confirmed the issue is fixed in 7.x?

[DavidBowdoin]

It has been working for us for quite a while. We are currently running 7.2.1 along with Angular 7.2.0. I would suggest creating a new/blank CLI project and then compare package.json and angular.json

[GreedyA1]

have the same issue. Transfered my project from angular 6 to 7. Still getting the same problem.

[DavidBowdoin]

@GreedyA1 Make sure you have upgraded the AngularCLI as it is the key (rather than Angular) Make sure you have the current CLI version installed globally, then create a new blank CLI project and use a tool like WinMerge to verify that your package.json and other files are up to speed.

[angular-automatic-lock-bot[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._}