Angular2 with angularjs uglify

Question

Now that I have successfully integration angular 2 components into our angularJS application I want to uglify them for the release. However if I make us of the SystemJS builder I get the following error:

Fatal error: ENOENT: no such file or directory, open '{webAppRoot}angular2\angular2.js'

It seems that it is trying to uglify the require('angular2/angular2') and it does not resolve it correctly. How do I correctly uglify an an angular2 app?

Note that the angularJS part of the applications is written in ES5 JS and AMD and the angular2 modules are being compiled to ES5 with SystemJS. SystemJS is then used to load the AMD as well as the CommonJS modules.

Good question. I was thinking that in the System.Config params you would set defaultExtension to 'min.js', but I haven't gotten it to work to load minified modules. — brando
– brando, Commented Dec 19, 2015 at 14:13

brando · Accepted Answer · 2015-12-22 17:52:14Z

2

I use JSPM to make my angular2 projects production ready. Other popular tools like JSPM include webpack, and browserfy. One of the important tasks that JSPM will accomplish is to bundle the various modules that make up your angular2 project. I also set the "selfExecutingBundle" flag to true and have JSPM make one bundled js file (e.g. myApp.bundle.js) and from there I minify/uglify it (myApp.bundle.min.js) and this one script reference is used in the index.html file.

<html>

<head>
    <title>Hello Angular World</title>
</head>
<body>
<div>
    <my-app>Loading...</my-app>
</div>
    <script src="/js/myApp.bundle.min.js"></script>
</body>

</html>

And that is all you need!

In the future when the HTTP/2 spec is more common, there may be less of a need to bundle/minify your module-based projects, but for now I think it is needed.

answered Dec 22, 2015 at 17:52

brando

8,43110 gold badges44 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Evan Plaice Over a year ago

Just a suggestion, it would be beneficial to demonstrate what the bundle-sfx command looks like. Likewise, I also can't wait until HTTP/2.

brando Over a year ago

@EvanPlaice for more detail on jspm bundling check out this answer: stackoverflow.com/a/34616199/3532945

Evan Plaice Over a year ago

Wat? That's an unnecessarily complicated approach to bundling. You could accomplish the same using jspm bundle-sfx --minify js/myApp.js js/myApp.bundle.min.js. JSPM will trace all the dependencies from the import statements in your app. That's what I use here github.com/evanplaice/evanplaice.com/blob/master/package.json.

brando Over a year ago

@EvanPlaice Nice. does jspm also transpile your tyescript and minify/concat your dependencies not referenced in your import statements, e.g. angular2-polyfills.js?

Evan Plaice Over a year ago

If you use bundle-sfx it does transpile to ES5. External dependencies do not get included in the bundle. Instead of using the polyfills, I import zone.js via a <script> tag and indlude reflect-metadata via an import statement. zone.js and system.js don't get included but they don't require transpilation so it doesn't make a big difference. You can see how I'm using it @ github.com/evanplaice/evanplaice.com.

Collectives™ on Stack Overflow

Angular2 with angularjs uglify

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related