There is an excellent answer to the question "Angular 2 How to Bundle for Production", see link below:
How to bundle an Angular app for production
I am most interested in using the strategy described in the answer given to this question with the title: "2.0.1 Final using Gulp (TypeScript - Target: ES5)".
This answer does a great job of walking me through every single step. A very basic summary of the strategy is to bundle all the javascript, including the angular core stuff all up into a couple javascript files that your application will then reference.
I followed the directions in this answer exactly, and it all seems to have gone well. The gulp job seems to have bundled all the javascript into 2 files I can then reference from the html, as the poster suggests with the following code:
...
...
...
<!-- Project Bundles -->
<script src="bundles/dependencies.bundle.js"></script>
<script src="bundles/app.bundle.js"></script>
<script src="dist-systemjs.config.js"></script>
<script>
System.import('app/boot').catch(function (err) {
console.error(err);
});
</script>
</body>
</html>
So far, so good, this all makes sense to me. But here's where I get confused...
When I run the app, it works fine, but all of the angular core files still get pulled in by the browser, along with the bundled up javascript files (dependencies.bundle.js and app.bundle.js). So in fact, I've only made things worse - I'm now pulling in 2 bundles of javascript, along with all the same files that went into the bundles!
So, I feel I am missing some crucial piece of understanding in how this is supposed to work. There is something about SystemJs I think I'm not understanding. How do I set up the SystemJs file so that it goes looking in the BUNDLES for the angular stuff, instead of looking in the base angular files I put into the bundles?
I may have misunderstood how the answer suggests the file "dist-systemjs.config.js" is supposed to look. I think he meant it should just be a copy of the "systemjs.config.js" file from the Angular2 quickstart, with a simple modification, so here's what my "dist-systemjs.config.js" looks like:
**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'dist/app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.min.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.min.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.min.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.min.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.min.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.min.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.min.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.min.js',
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.min.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);
So...when this html is evaluated:
...
...
...
<!-- Project Bundles -->
<script src="bundles/dependencies.bundle.js"></script>
<script src="bundles/app.bundle.js"></script>
<script src="dist-systemjs.config.js"></script>
<script>
System.import('app/boot').catch(function (err) {
console.error(err);
});
</script>
</body>
</html>
Isn't the dist-systemjs.config.js file just going to pull in all the base angular core js files anyway? Even though I also pull in the bundles with the script tags in the html?
That seems to be exactly what happens. What am I missing? I feel like I'm missing some very basic piece of this puzzle! I've seen dozens of other solutions that follow this same general idea, but none of them explain how, if at all, I'm supposed to be changing the system.config.js file so that it doesn't just pull the base angular files from the same place it always did, instead of the bundles.
