Wie Sie eine Drittanbieter-Bibliothek hinzufügen, wenn Sie angular-cli verwenden?

Question

Ich wollte versuchen, eine Angular 2 App mit angular-cli (https://github.com/angular/angular-cli) zu erstellen und dann ng2-material (https://github.com/justindujardin/ng2-material) für UI-Komponenten zu verwenden. Aber ich verstehe einfach nicht, wie/wo ich die ng2-Materialbibliothek einbinden muss, um sie nutzen zu können.

Ich erstellte ein Projekt mit ng new myproject dann startete ich den Server mit ng serve und öffnete die Webseite, die gerade gut geklappt hat. Als nächstes habe ich ng2-material mit npm install ng2-material --save installiert. Dann habe ich MATERIAL_PROVIDERS zu eckigen Bootstrap hinzugefügt, wie hier gezeigt https://github.com/AngularShowcase/angular2-seed-ng2-material/blob/master/app/bootstrap.ts.

Dies führt zu einer Fehlermeldung GET http://localhost:4200/ng2-material/all 404 (Not Found) im Webbrowser, und ich kann einfach nicht herausfinden, wie man es loswerden.

angle-cli scheint etwas zu tun, um einen dist -Ordner zu erstellen, in dem einige der Knotenmodule, die in index.html verwendet werden, enden, aber ich sehe nicht, wo oder wie das konfiguriert ist.

Answer 1

[EDIT 29/09/2016] Nun, da Winkel-cli webpack iso system.js verwendet, diese Antwort nicht macht viel Sinn mehr. Überprüfen Sie die Seiten '3d party lib installation' und 'global lib installation' auf dem angular-cli wiki.

[EDIT 10/05/2016] Dies wird jetzt ausführlich auf der angular cli wiki beschrieben.

Das ist für mich gearbeitet:

In den glut-cli-build.js Sie die Abhängigkeit zu den vendorNpmFiles hinzufügen, z.B.

module.exports = function (defaults) { 
    var app = new Angular2App(defaults, { 
     vendorNpmFiles: [ 
      'a2-in-memory-web-api/web-api.js' 
     ] 
    }); 
    return app.toTree(); 
} 

Im index.html (wo a2-in-Speicher-web-api/web-api.js eine Datei in meinem node_modules Ordner) fügen Sie die folgende Zeile:

<script src="vendor/a2-in-memory-web-api/web-api.js"></script> 

Schließlich starten Sie Ihren Server neu.

Haben Sie es nicht mit eckigem Material getestet, aber Sie bekommen die Idee.

Answer 2

Versuchen SystemJS im index.html wie folgt konfigurieren:

System.config({ 
    packages: { 
     app: { 
      format: 'register', 
      defaultExtension: 'js' 
     }, 
     'node_modules/ng2-material': { 
      format: 'register', 
      defaultExtension: 'js' 
     } 
    }, 
    paths: { 
     'ng2-material/all': 'node_modules/ng2-material/all' 
    } 
});