I am attempting to integrate the ng2-bootstrap modal functionality into a component of my project that is built using the angular2-starter.
Below is my systemjs.conf.js configuration:
/*
* This config is only used during development and build phase only
* It will not be available on production
*
*/
(function (global) {
// ENV
global.ENV = global.ENV || 'development';
// map tells the System loader where to look for things
var map = {
'app': 'src/tmp/app',
'test': 'src/tmp/test'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': {
defaultExtension: 'js'
},
'test': {
defaultExtension: 'js'
},
'rxjs': {
defaultExtension: 'js'
},
'ng2-bootstrap': {main: 'ng2-bootstrap', defaultExtension: 'js' }
};
// List npm packages here
var npmPackages = [
'@angular',
'rxjs',
'lodash'
];
// Add package entries for packages that expose barrels using index.js
var packageNames = [
// App barrels
'app/shared',
// 3rd party barrels
'lodash',
'vendor/ng2-bootstrap'
];
// Add package entries for angular packages
var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'router'
];
npmPackages.forEach(function (pkgName) {
map[pkgName] = 'node_modules/' + pkgName;
});
packageNames.forEach(function (pkgName) {
packages[pkgName] = {main: 'index.js', defaultExtension: 'js'};
});
ngPackageNames.forEach(function (pkgName) {
map['@angular/' + pkgName] = 'node_modules/@angular/' + pkgName +
'/bundles/' + pkgName + '.umd.js';
map['@angular/' + pkgName + '/testing'] = 'node_modules/@angular/' + pkgName +
'/bundles/' + pkgName + '-testing.umd.js';
});
var config = {
map: map,
packages: packages
};
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) {
global.filterSystemConfig(config);
}
System.config(config);
})(this);
I am importing ModalDirective into my component using the following syntax:
import {ModalDirective} from 'ng2-bootstrap/ng2-bootstrap';
In my package.json file, I have included the version of ng2-bootstrap as "^1.1.1":
"ng2-bootstrap": "^1.1.1",
However, when running the application, I encounter this error message:
(index):55 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/ng2-bootstrap/ng2-bootstrap.js(…)