如何包含和使用包

Question

我試圖拉動ngx-bootstrap以下我可以找到的例子。

這裏是我有什麼

的package.json，下devDependencies
「NGX的自舉」： 「^ 1.8.1」

System.config.js

'@ngx-bootstrap':'npm:node_modules/ngx-bootstrap', 


    // other libraries 
    'rxjs':      'npm:rxjs', 
    'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' 
}, 
// packages tells the System loader how to load when no filename and/or no extension 
packages: { 
    app: { 
    main: './main.js', 
    'ngx-bootstrap': { format: 'cjs', main: 'bundles/ngx-bootstrap.umd.js', defaultExtension: 'js' }, 
    defaultExtension: 'js' 
    }, 
    rxjs: { 
    defaultExtension: 'js' 
    } 
} 

In app.module

import { AlertModule } from 'ngx-bootstrap'; 
@NgModule({ 
    imports: [ 
     BrowserModule, 
     DevBlogModule, 
     AlertModule.forRoot(), 
     HomeModule 
    ], 
    declarations: [ 
    AppComponent 
    ], 
    bootstrap: [ AppComponent ] 
}) 
export class MainModule { } 

在我app.component.ts

import { Component } from '@angular/core'; 
import { AlertModule } from 'ngx-bootstrap'; 


@Component({ 
    selector: 'myapp', 
    template: '<div> <alert type="success"> this is a test alert</alert>angular2 has been set and here is our first post...</div>' 
}) 

export class AppComponent { } 

當我跑，我在控制檯中的錯誤，我缺少什麼或者我怎麼踩？

無法加載資源：服務器與404 （未找到） 狀態迴應：49766/NGX-引導/警報

此外，參考有關使用System.js的這個帖子
How to use ngx-bootstrap in Angular 4 application with SystemJs module system

[更新2]
看起來我有其他問題，在視覺工作室01的輸出窗口看到源地圖'data：application/json; base64，';'對於文件'mdha：http://localhost:49766/node_modules/systemjs/dist/system.src.js'由於錯誤而無法正確加載。

[更新3 - 的情況下，任何其他system.js用戶發現這個]
現在，我有東西的工作...
@IlyaSurmay - 請隨意使用一些這在您的網站爲我們的新手。

system.config.js

/** 
* System configuration for Angular samples 
* Adjust as necessary for your application needs. 
*/ 
(function (global) { 
    System.config({ 


     paths: { 
      // paths serve as alias 
      'npm:': 'node_modules/', 
      'content:': 'content/' 
     }, 
     // map tells the System loader where to look for things 
     map: { 
      // our app is within the app folder 
      app: 'app', 

      // angular bundles 
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
      'moment': 'node_modules:moment/moment.js', 

      // other libraries 
      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api', 
      'jquery': 'npm:jquery/', 
      'lodash': 'npm:lodash/lodash.js', 
      'moment': 'npm:moment/',  
      'ngx-bootstrap': 'node_modules/ngx-bootstrap', 
      'symbol-observable': 'npm:symbol-observable', 
      'rxjs': 'node_modules/rxjs' // added this map section 
     }, 
     // packages tells the System loader how to load when no filename and/or no extension 
     packages: { 
      app: { 
       main: './main.js', 
       defaultExtension: 'js' 
      }, 
      rxjs: { 
       defaultExtension: 'js' 
      }, 
      'angular2-in-memory-web-api': { 
       main: './index.js', 
       defaultExtension: 'js' 
      }, 
      'ngx-bootstrap': { format: 'cjs', main: 'bundles/ngx-bootstrap.umd.js', defaultExtension: 'js' }, 
      'moment': { main: 'moment.js', defaultExtension: 'js' }, 
      'symbol-observable': { main: 'index.js', defaultExtension: 'js' } 
      } 

     }); 
    })(this); 

的package.json

{ 
    "author": "me", 
    "dependencies": { 
    "@angular/cdk": "^2.0.0-beta.8", 
    "@angular/common": "~4.3.0", 
    "@angular/compiler": "~4.3.0", 
    "@angular/core": "~4.3.0", 
    "@angular/forms": "~4.3.0", 
    "@angular/http": "~4.3.0", 
    "@angular/platform-browser": "~4.3.0", 
    "@angular/platform-browser-dynamic": "~4.3.0", 
    "@angular/router": "~4.3.0", 
    "angular-in-memory-web-api": "~0.2.4", 
    "core-js": "^2.5.0", 
    "moment": "^2.18.1", 
    "moment-timezone-all": "^0.5.5", 
    "rxjs": "5.0.1", 
    "systemjs": "0.19.40", 
    "zone.js": "^0.8.4" 
    }, 
    "description": "A starter app using Angular2, Bootstrap CSS for hosting within an ASP.NET MVC web app", 
    "devDependencies": { 
    "@types/node": "^6.0.85", 
    "alertify.js": "^1.0.12", 
    "bootstrap": "^3.3.7", 
    "font-awesome": "^4.7.0", 
    "jquery": "^3.2.1", 
    "modernizr": "^3.5.0", 
    "ngx-bootstrap": "^1.8.1", 
    "systemjs": "^0.19.40" 
    }, 
    "keywords": [], 
    "license": "MIT", 
    "name": "aspng2", 
    "repository": {}, 
    "version": "1.0.0" 
} 

Answer 1

System.JS用戶可以直接從NGX-引導導入模塊，就像官方演示說：http://valor-software.com/ngx-bootstrap/#/modals#usage

所以改變你的進口到這import { AlertModule } from 'ngx-bootstrap';