How to include additional ES6 sources in Angular app

Question

I have a custom mode module written in ES6 syntax that I am including in my angular application and I am encountering problems (from uglifyjs) when I attempt to build the app with the -prod flag enabled:

Unexpected token: punc ()

This is an angular 5 app using angular-cli 1.7.4 also.

The entry file for my node module is as follows:

const MyModule = require('./src/index.js');

const myModule = new MyModule();

module.exports = {
  doStuff: myModule.doStuff,
  doOtherStuff: myModule.doOtherStuff
}

This then gets required into one of my ts files like so:

import MyModule = require('@acme/mymodule');

When running the ng serve task, I have no problems and can use the application as expected.

Its when trying to produce a production build that I see this issue.

Within the ./src/index.js file for there are many functions defined that use const\let\async\await.

Reading around, I believe this is down to me using ES6 and the sources not being compatible with uglifyjs under the hood when the angular cli performs the build steps.

From what I also have read, webpack configuration can be controlled from the angular-cli config, at least not in 1.x, otherwise I would have tried one of the many plugins out there to help me get around this.

I am assuming I need to be running the code through an extra step before it hits angular-cli, e.g, use babel to transform my es6 code.

I'm struggling to find examples of how to do this in relation to angular and the cli, I can find how to use babel and have been able to test this on one of my node module sources and can see the es5 version of this produced.

I actually have 4 node modules and some of these require each other, so I want to make sure they can still require in each other after being transpiled.

BTW way, not sure how relevant it is but the following polyfills are enabled in my polyfills.ts file:

import "core-js/es5";
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

I appreciate any advice you can provide!

Thanks

UPDATE

I have produced a minimal Angular 5 application, that used 1.x of the angular-cli. I have replicated the build behaviour in this which generates the error from UglifyJS also.

You can find the app on my Github here

I have seen that UglifyJS used in the version of Webpack the angular-cli uses, does not support es6 transpilation.

Without migrating angular\cli versions, I am interested to see if there is a way to get the sample app compiling for production and functioning without any issues.

UPDATE 2

So after some more experimenting, I have concluded that the most graceful way of handling ES6 transpilation when building an Angular 5 app is to use ng eject to get the webpack.config.js file and configure the uglifyjs-webpack-plugin as explained in this article

This works perfectly fine, and does actually allow more finer grained control over webpack which the angular-cli hides you from initially.

I'm open to other suggestions\answers, so feel free to add here!

I would still love to find a way to use angular-cli if at all possible though.

Answer 1

I can see three options to resolve your problem:

1. Update to the latest Angular version including cli and re-build your project which should be just fine. (optimal option)
2. If for some reason (as your git repo only shows minimal version of the project) you cannot update. You can try "uglify-js": "github:mishoo/UglifyJS2#harmony" it's an es6 friendly version of UglifyJS
3. As you already discovered, you can always eject and fine tune your config (more advanced option)