Wie man das Paket einbezieht und benutzt

Question

Ich versuche, ngx-Bootstrap nach den Beispielen zu ziehen, die ich finden kann. Hier

ist, was ich habe

package.json unter devDependencies
"NGX-Bootstrap": "^ 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.Modul

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

In meinem 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 { } 

Wenn ich laufe, ich Fehler in der Konsole, was mir fehlt oder was hat trete ich auf?

fehlgeschlagen Ressource laden: der Server mit einem Status von 404 reagiert (nicht gefunden) : 49766/NGX-Bootstrap/alert

Auch diesen Beitrag Referenzierung über die Verwendung System.js
How to use ngx-bootstrap in Angular 4 application with SystemJs module system

[Update 2]
Sieht aus wie ich andere Fragen haben, 01 im Ausgabefenster von Visual Studio gesehenDie Datenquelle der Quellkarte: application/json; base64, ';' für die Datei 'mdha: http://localhost:49766/node_modules/systemjs/dist/system.src.js' konnte aufgrund eines Fehlers nicht korrekt geladen werden.

[Update 3 - falls andere system.js Nutzer finden dieses]
Jetzt, wo ich Dinge arbeiten ...
@IlyaSurmay - sprechen Sie einige dieser auf Ihrer Website verwenden für uns Neulinge.

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 Benutzer haben Module direkt von NGX-Bootstrap zu importieren, wie offizielle Demo sagt http://valor-software.com/ngx-bootstrap/#/modals#usage

So ändern Sie Ihren Import zu diesem import { AlertModule } from 'ngx-bootstrap';