I'm new to Angular 2 and I know my query will certainly have some solution but at the time of posting this question I had bad luck for tackling this scene. Basically I have created a simple Angular 2 application by following instructions given on Angular.io and I have added some more components to it. But after running my Angular 2 application I've noticed that it made 100+ request for fetching every component that I had made and angular libraries. I did try bundling all the angular libraries to one file and import that file using SystemJS dynamic file loader but after that I've got 404 (file not found error) for angular libraries. I've seen following solutions which are there like How can you bundle Angular 2 using System JS Builder? and How to bundle Angular2 RC1 with systemjs but didn't succeed. I want to minimize the requests my application makes at the time on initial load so that my application gets loaded quickly (now it is sending 100+ request and takes approximately 20 secs to load application)
index.html
<html>
<head>
<base href="/">
<title>My Angular 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="public/assets/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="public/css/bundle-css.min.css">
</head>
<!-- 3. Display the application -->
<body>
<my-app>
Loading...
</my-app>
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="public/js/bundle-main.min.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
<script src="public/js/bundle-js.min.js"></script>
</body>
</html>
SystemJS.config.js
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
defaultJSExtensions: true,
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: 'public',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
// Vendor libraries
'ng2-tooltip': 'npm:ng2-tooltip',
'angular2-modal': 'npm:angular2-modal',
'angular2-modal/plugins/bootstrap': 'npm:angular2-modal/bundles'
},
// 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'
},
//Vendor libraries
'ng2-tooltip': {
main: 'index.js',
defaultExtension: 'js'
},
'angular2-modal': {
defaultExtension: 'js',
main: 'bundles/angular2-modal.umd'
},
'angular2-modal/plugins/bootstrap': {
defaultExtension: 'js',
main: 'angular2-modal.bootstrap.umd'
}
}
});
})(this);
Directory Structure
|_ app
|_ assets
|_ components
|_ MyComponents
|_ MyComponents.component.ts
|_ MyComponents.component.html
|_ MyComponents.routes.ts
|_ MyComponents.service.ts
|_ index.ts
|_ scss
|_ js
|_ main.ts
|_ app.component.ts
|_ app.component.html
|_ app.module.ts
|_ app.routes.ts
|_ node_modules
|_ typings
|_ gulpfile.js
|_ index.html
|_ package.json
|_ systemjs.config.js
|_ tsconfig.json
|_ tsd.json
|_ typings.json
