3

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.

DilumN
  • 2,889
  • 6
  • 30
  • 44
user39558
  • 141
  • 8
  • 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 Dec 19 '15 at 14:13

1 Answers1

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.

brando
  • 8,215
  • 8
  • 40
  • 59
  • 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. – Evan Plaice Dec 27 '15 at 02:13
  • @EvanPlaice for more detail on jspm bundling check out this answer: http://stackoverflow.com/a/34616199/3532945 – brando Jan 05 '16 at 17:24
  • 1
    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 https://github.com/evanplaice/evanplaice.com/blob/master/package.json. – Evan Plaice Jan 06 '16 at 04:12
  • @EvanPlaice Nice. does jspm also transpile your tyescript and minify/concat your dependencies not referenced in your import statements, e.g. angular2-polyfills.js? – brando Jan 06 '16 at 06:18
  • 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 ` – Evan Plaice Jan 06 '16 at 06:42