Angular 2 ng2-bootstrap datepicker systemjs 404错误

时间:2016-06-12 19:01:49

标签: angular systemjs angular2-directives ng2-bootstrap

我正在使用ng2-bootstrap中的datepicker。

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

我在我的组件中导入了DATEPICKER_DIRECTIVES

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

将其添加到指令列表

directives: [DATEPICKER_DIRECTIVES],

然后在我的模板中,我正在使用它:

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

我的systemjs配置如下所示:

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);

所有内容都编译没有任何错误,但是当我在浏览器中运行它时,它会在控制台中显示以下错误:

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

我不确定为什么它还在/ content / node_modules / ng2-bootstrap / components / datepicker中搜索datepicker,我已指定查看node_modules / ng2-bootstrap / components / datepicker。

1 个答案:

答案 0 :(得分:0)

您必须确保在index.html中包含ng2-bootstrap库:

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