I am new to angular 2 and trying to use the ng2-datetime-picker in my project. Now after installing the ng2-datetime-picker package when I run the project got an 404 err
For those, who are looking for systemjs.config.js
content. It will be something similar to this, You can configure it as per your requirements.
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'@angular': 'node_modules/@angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
map: map,
packages: packages
};
System.config(config);
})(this);
And your index.html will look like : (Take care the order of .js file)
<head>
<meta charset="UTF-8">
<title>My Angular 2 App!</title>
<!-- css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css">
<style>body { padding: 50px 0; }</style>
<!-- js -->
<!-- load the dependencies -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<!-- load our angular app with systemjs -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err) { console.error(err); });
</script>
</head>
You need to create a "systemjs.config.js" file and load it from index.html, like a regular script:
<script src="systemjs.config.js"></script>
Make sure you also include System.JS before the config script:
<script src="node_modules/systemjs/dist/system.src.js"></script>
The following script loads the first module:
System.import('app').catch(function (err) { console.error(err); });
By default (according to your systemjs.config.js), SystemJS will look for app.js or app/main.js.
In your systemjs.config.js file, you want to map the node package to a path where there is an index.js or package.json, which indicates where the module is located. The module should be compatible with your module loader that you intend to use: AMD, UMD, CommonJS, SystemJS, es6 etc
The following should work in your systemjs.config.js file:
'paths': {
'npm:':'node_modules/'
},
'map': {
'ng2-datetime-picker': 'npm:ng2-datetime-picker'
...
},
'packages': {
'ng2-datetime-picker': 'dist/ng2-datetime-picker.umd.js'
}
Or, you could map the UMD file directly:
'paths': {
'npm:':'node_modules/'
},
'map': {
'ng2-datetime-picker': 'npm:ng2-datetime-picker/dist/ng2-datetime-picker.umd.js'
...
}
The following will only work with CommonJS/AMD/SystemJS as index.js uses the 'require' syntax:
'paths': {
'npm:':'node_modules/'
},
'map': {
'ng2-datetime-picker': 'npm:ng2-datetime-picker'
...
},
'packages': {
'ng2-datetime-picker': 'dist/index.js'
}
EDIT
This should work:
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: { main: 'boot.js', defaultExtension: 'js' },
rxjs: { defaultExtension: 'js' },
'ng2-datetime-picker': { main: 'dist/ng2-datetime-picker.umd.js', defaultExtension: 'js' }
}