Friday, 18 January 2019

How to include additional ES6 sources in Angular app

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.

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



from How to include additional ES6 sources in Angular app

No comments:

Post a Comment