如何在带有 SystemJs 模块系统的 Angular 4 应用程序中使用 ngx-bootstrap答案

【问题标题】：How to use ngx-bootstrap in Angular 4 application with SystemJs module system如何在带有 SystemJs 模块系统的 Angular 4 应用程序中使用 ngx-bootstrap
【发布时间】：2017-05-03 15:18:00
【问题描述】：

我已经尝试了许多指定路径以允许 SystemJS 加载 ngx-bootstrap 包的变体

    System.config({
    "defaultJSExtensions": true,
    "paths": {

        "@angular/core": "node_modules/@angular/core/bundles/core.umd.js",
        "@angular/forms": "node_modules/@angular/forms/bundles/forms.umd.js",
        "@angular/http": "node_modules/@angular/http/bundles/http.umd.js",
        ...
        "*": "node_modules/*",
        "ngx-bootstrap": "node_modules/ngx-bootstrap",
        "highcharts": "node_modules/highcharts/highcharts.js",
        "angular2-highcharts": "node_modules/angular2-highcharts/index.js"
    },
    "packages": {}
});

但它仍然无法正确加载..

我在控制台中看到以下错误

"(SystemJS) XHR error (404 Not Found) loading http://localhost:5555/node_modules/ngx-bootstrap.js 

wrapFn@http://localhost:5555/node_modules/zone.js/dist/zone.js?1493823577322:1230:30 [<root>]       

Error loading http://localhost:5555/node_modules/ngx-bootstrap.js as "ngx-bootstrap" from http://localhost:5555/hc/app.module.js" 

"Not expecting this error? Report it at https://github.com/mgechev/angular-seed/issues"

【问题讨论】：

标签： angular systemjs ngx-bootstrap

【解决方案1】：

你错过了这部分：

packages: {
  //... other code
  'ngx-bootstrap': { format: 'cjs', main: 'bundles/ngx-bootstrap.umd.js', defaultExtension: 'js' },
}

在这里演示：https://github.com/valor-software/angular2-quickstart/blob/e9ea3dfd6ea48acf40a99e8e0ab1c9908f3467cd/systemjs.config.js#L22

【讨论】：

您的解决方案是正确的。但是对于 Angular 种子项目...我需要它来 project.config.ts 如下let additionalPackages: ExtendPackages[] = [{ name: 'ngx-bootstrap', path: 'node_modules/ngx-bootstrap/bundles/ngx-bootstrap.umd.min.js' }, { name: 'highcharts', path: 'node_modules/highcharts/highcharts.js' }, { name: 'angular2-highcharts', path: 'node_modules/angular2-highcharts/index.js' }]; this.addPackagesBundles(additionalPackages);
在地图声明下只添加 'ngx-bootstrap': 'node_modules/ngx-bootstrap/bundles/ngx-bootstrap.umd.js' 对我有用，而无需进行额外的包声明。