Angular 2 ng2-bootstrap datepicker systemjs 404错误

Question

我使用的是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)

我不确定为什么它仍然在我指定要在node_modules/ng2-bootstrap/components/datepicker.中查找的/content/node_modules/ng2-bootstrap/components/datepicker，中搜索datepicker

Answer 1

你必须确保在你的index.html中包含ng2-bootstrap库：

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