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

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.

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

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 !

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.

This is still not working, this needs more priority.

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.

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

Here is my cli@6.0.0 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.

Same error here, still the case with ng-cli 6.0.0 which uses uglifyjs-webpack-plugin@1.2.5 :

$ npm ls uglifyjs-webpack-plugin
ng6@0.0.0 C:\workspace\Nouveau dossier\ng6
`-- @angular-devkit/build-angular@0.6.0
  +-- uglifyjs-webpack-plugin@1.2.5
  `-- webpack@4.6.0
    `-- uglifyjs-webpack-plugin@1.2.5

npm i uglifyjs-webpack-plugin@1.1.5 uglify-es@3.2.2 --save-exact doesn’t fix a fresh ng6 project

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 🍰

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.

Here is the fix I had to do for cli@1.7.3: in some postinstall script do:

const fs = require('fs');
// due to https://github.com/angular/angular-cli/issues/9340
// uglifyjs-webpack-plugin@1.1.5 and uglify-es@3.2.2 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)

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.

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.

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 uglifyjs-webpack-plugin@1.1.5 uglify-es@3.2.2 --save-exact

Adding uglify-es@3.2.2 to the install did the trick, whereas uglifyjs-webpack-plugin@1.1.5 alone was not sufficient.

This isn’t working for @angular/cli@6.1.0-rc.2 either, here’s a workaround: install dev-dependencies:

npm i -D --save-exact uglify-es@3.2.2 uglifyjs-webpack-plugin@1.1.5

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 uglify-es@3.2.2
6. Open your node_modules/@angular-devkit/build-angular/node_modules/uglifyjs-webpack-plugin check the package.json file and confirm it’s version uglifyjs-webpack-plugin@1.1.5

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

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.

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…

Folks,

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