This snippet is extracted from your systemjs file.
Start by mapping the ng2 router module, similar to how it is done in your application:
var map = {
<...>
'@angular/router': 'node_modules/@angular/router',
<...>
};
Then, manually set the packIndex for it:
packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' };
To resolve this issue, customize the code snippet below according to your specific requirements.
Note the various ng2 modules and their versions that you intend to use, as well as your application's name (adjust if necessary):
(function(global) {
// The map directive informs the System loader where to search for resources
var map = {
'YourApp': 'YourApp', // 'dist',
'@angular': 'node_modules/@angular',
'@angular/router': 'node_modules/@angular/router',
'rxjs': 'node_modules/rxjs'
};
// The packages directive guides the System loader on loading files without specified filenames and/or extensions
var packages = {
'YourApp': { main: 'app.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' }
};
var ngPackageNames = [
'common',
'forms',
'compiler',
'core',
'http',
'platform-browser',
'platform-browser-dynamic',
'router-deprecated',
'upgrade',
];
// For individual files (~300 requests):
function packIndex(pkgName) {
packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// For bundled files (~40 requests):
function packUmd(pkgName) {
packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' };
// Most environments should utilize UMD; however, some environments like Karma require individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Include package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
map: map,
packages: packages
};
System.config(config);
})(this);