ngrx/effects breaks uglifyjs in Angular CLI with the use of es2015

[remmeier]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x ] Bug report  
[ ] Feature request
[ ] Documentation issue or request

What is the current behavior?

Angular CLI production build fails:

ERROR in vendor.8ab1d7bd4e428012688c.bundle.js from UglifyJs
Invalid assignment [C:/projects/asap/asap-resource-browser/asap-resource-browser-demo-frontend/node_modules/@ngrx/effects/src/effects_metadata.js:17,0][vendor.8ab1d7bd4e428012688c.bundle.js:19127,57]

The issue lies in

https://github.com/ngrx/platform/blob/master/modules/effects/tsconfig-build.json

making use of target=es2015

See angular/angular-cli#5730 for more information.

Expected behavior:

make use of target=es5 for compilation

Version of affected browser(s),operating system(s), npm, node and ngrx:

windows, @ngrx/[email protected], angular cli 1.4.3, angular 4.4.3.

[MikeRyanDev]

We will need a reproduction for this. @ngrx/effects is published in a variety of formats, including ES2015, ES5 with ES2015 modules, and an ES5 UMD build. You can explore the build artifacts in our nightly repositories and verify that the published package.json points to the correct distribution formats. https://github.com/ngrx/effects-builds

[RobotnickIsrael]

I have it too with ngrx4. Works on ng serve but fails on ng build.
I think it started after I switched to angular cli 1.3.2 from 1.1.
My Angular version is 4.2.2 and @ngrx is 4.0.0 (and @ngrx/effects 4.0.1)

Swtiching to ES6 on my tsconfig.app.json doesn't help, just multiply the issue.

Any ideas on this one? I researched the web about it and I didn't find any real solution
(seems like it's webpack2 issue with vendors using ES6 while I target ES5.
I recently installed angular-materials as well)

ERROR in vendor.58a358ad5ad796dccd3b.bundle.js from UglifyJs
Unexpected token operator «=», expected punc «,» [C:/Projects/Torch10/torch10-web/node_modules/@ngrx/store/src/utils.js:6,0][vendor.58a358
ad5ad796dccd3b.bundle.js:112548,48]

[remmeier]

thx, good to know I'm not the only one. As far as I understand ES5 is still the way to go for the time being. Everything else (ES2015) is nice to have, but currently not of much use. I did also migrate away from Angular CLI 1.1.

[RobotnickIsrael]

Just so you know I found a temp fix that worked:

Install babili for webpack by

npm install babili-webpack-plugin --save-dev

Go to:
{root}\node_modules@angular\cli\models\webpack-configs

Change production.js to:
"use strict"; const BabiliPlugin = require("babili-webpack-plugin"); Object.defineProperty(exports, "__esModule", { value: true }); const path = require("path"); const webpack = require("webpack"); const fs = require("fs"); const semver = require("semver"); const common_tags_1 = require("common-tags"); const build_optimizer_1 = require("@angular-devkit/build-optimizer"); const static_asset_1 = require("../../plugins/static-asset"); const glob_copy_webpack_plugin_1 = require("../../plugins/glob-copy-webpack-plugin"); const licensePlugin = require('license-webpack-plugin'); exports.getProdConfig = function (wco) { const { projectRoot, buildOptions, appConfig } = wco; let extraPlugins = []; let entryPoints = {}; if (appConfig.serviceWorker) { const nodeModules = path.resolve(projectRoot, 'node_modules'); const swModule = path.resolve(nodeModules, '@angular/service-worker'); // @angular/service-worker is required to be installed when serviceWorker is true. if (!fs.existsSync(swModule)) { throw new Error(common_tags_1.stripIndent
Your project is configured with serviceWorker = true, but @angular/service-worker
is not installed. Run `npm install --save-dev @angular/service-worker`
and try again, or run `ng set apps.0.serviceWorker=false` in your .angular-cli.json.
); } // Read the version of @angular/service-worker and throw if it doesn't match the // expected version. const allowedVersion = '>= 1.0.0-beta.5 < 2.0.0'; const swPackageJson = fs.readFileSync(${swModule}/package.json).toString(); const swVersion = JSON.parse(swPackageJson)['version']; if (!semver.satisfies(swVersion, allowedVersion)) { throw new Error(common_tags_1.stripIndent
The installed version of @angular/service-worker is ${swVersion}. This version of the CLI
requires the @angular/service-worker version to satisfy ${allowedVersion}. Please upgrade
your service worker version.
); } // Path to the worker script itself. const workerPath = path.resolve(swModule, 'bundles/worker-basic.min.js'); // Path to a small script to register a service worker. const registerPath = path.resolve(swModule, 'build/assets/register-basic.min.js'); // Sanity check - both of these files should be present in @angular/service-worker. if (!fs.existsSync(workerPath) || !fs.existsSync(registerPath)) { throw new Error(common_tags_1.stripIndent
The installed version of @angular/service-worker isn't supported by the CLI.
Please install a supported version. The following files should exist:
- ${registerPath}
- ${workerPath}
); } extraPlugins.push(new glob_copy_webpack_plugin_1.GlobCopyWebpackPlugin({ patterns: [ 'ngsw-manifest.json', { glob: 'ngsw-manifest.json', input: path.resolve(projectRoot, appConfig.root), output: '' } ], globOptions: { cwd: projectRoot, optional: true, }, })); // Load the Webpack plugin for manifest generation and install it. const AngularServiceWorkerPlugin = require('@angular/service-worker/build/webpack') .AngularServiceWorkerPlugin; extraPlugins.push(new AngularServiceWorkerPlugin({ baseHref: buildOptions.baseHref || '/', })); // Copy the worker script into assets. const workerContents = fs.readFileSync(workerPath).toString(); extraPlugins.push(new static_asset_1.StaticAssetPlugin('worker-basic.min.js', workerContents)); // Add a script to index.html that registers the service worker. // TODO(alxhub): inline this script somehow. entryPoints['sw-register'] = [registerPath]; } if (buildOptions.extractLicenses) { extraPlugins.push(new licensePlugin({ pattern: /^(MIT|ISC|BSD.*)$/, suppressErrors: true })); } const uglifyCompressOptions = { screw_ie8: true, warnings: buildOptions.verbose }; if (buildOptions.buildOptimizer) { // This plugin must be before webpack.optimize.UglifyJsPlugin. extraPlugins.push(new build_optimizer_1.PurifyPlugin()); uglifyCompressOptions.pure_getters = true; // PURE comments work best with 3 passes. // See https://github.com/webpack/webpack/issues/2899#issuecomment-317425926. uglifyCompressOptions.passes = 3; } return { entry: entryPoints, plugins: extraPlugins.concat([ new webpack.EnvironmentPlugin({ 'NODE_ENV': 'production' }), new webpack.HashedModuleIdsPlugin(), new webpack.optimize.ModuleConcatenationPlugin(), /*new webpack.optimize.UglifyJsPlugin({ mangle: { screw_ie8: true }, compress: uglifyCompressOptions, output: { ascii_only: true }, sourceMap: buildOptions.sourcemaps, comments: false })*/ new BabiliPlugin({}, {}) ]) }; }; //# sourceMappingURL=/users/hansl/sources/angular-cli/models/webpack-configs/production.js.map

(Or in other words change from uglifyJS to babili)
And it should work now.
But be aware, next time you do npm install you need to do it again...
But it's a good temp fix until webpack will finish with this problem.
If you have a CICD operation, just copy the production.js file after npm install (meaning overwrite)

[remmeier]

note that babili supports ES6, but that is not the thing I want to have. It will break for the users without having a ES6 compatible browser.

[kayjtea]

In case this helps someone: check for a bad import. Very easy with IDEs that (helpfully) offer alternatives for symbols that show up in more than one place.

import {createSelector} from "@ngrx/store/store";

That will pull in the ES2015 source...