CODEWITHSUNDEEP
angularsystemjsangular2-directivesng2-bootstrap
Naveed Ahmed
Naveed Ahmed

Reputation: 10386

Angular 2 ng2-bootstrap datepicker systemjs 404 error

I am using datepicker from ng2-bootstrap.

https://valor-software.com/ng2-bootstrap/#/datepicker

I have imported DATEPICKER_DIRECTIVES in my component

import { DATEPICKER_DIRECTIVES } from './../../../node_modules/ng2-bootstrap/components/datepicker';

added it to directives list

directives: [DATEPICKER_DIRECTIVES],

and then in my template I am using it like this:

<datepicker [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="true"></datepicker>

My systemjs configuration looks like this:

var map = {
        'app': 'content/app',
        'rxjs': 'node_modules/rxjs',
        '@angular': 'node_modules/@angular',
        "angular2-masonry": "node_modules/angular2-masonry",
        'datepicker': 'node_modules/ng2-bootstrap/components/datepicker'
    };

var paths = {
        "masonry-layout": "node_modules/masonry-layout/dist/masonry.pkgd.js",
        'datepicker': 'node_modules/ng2-bootstrap/components/datepicker/datepicker.component.js',
    };


var packages = {
        'app': { main: 'main.js', defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js' },
        "angular2-masonry": { defaultExtension: 'js', main: "index" },
        'datepicker': { defaultExtension: 'js', main: "datepicker.component" }
    };

var angularPackages = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router'
];

angularPackages.forEach(function (pkgName) {
    packages[pkgName] = {
        main: 'index.js', defaultExtension: 'js'
    };
});


var config = {
        map: map,
        packages: packages,
        paths: paths
    };

    System.config(config);

Everything compiles without any error, but when I run it in browser it displays below error in console:

/content/node_modules/ng2-bootstrap/components/datepicker 404 (Not Found)

I am not sure why is it still searching for datepicker in /content/node_modules/ng2-bootstrap/components/datepicker, I have specified to look in node_modules/ng2-bootstrap/components/datepicker.

Upvotes: 0

Views: 855

Answers (1)

pd farhad
pd farhad

Reputation: 6432

you have to make sure to include ng2-bootstrap library in your index.html:

<script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>

Upvotes: 0

Related Questions