Come aggiungere una libreria di terze parti quando si utilizza angular-cli?

Question

Volevo provare a creare un'app Angular 2 con angular-cli (https://github.com/angular/angular-cli) e quindi utilizzare il materiale ng2 (https://github.com/justindujardin/ng2-material) per i componenti dell'interfaccia utente. Ma non capisco come/dove devo includere la libreria di materiali ng2 per poterlo usare.

Ho creato un progetto con ng new myproject, quindi ho avviato il server con ng serve e ho aperto la pagina Web che ha funzionato correttamente. Il passo successivo, ho installato il materiale ng2 con npm install ng2-material --save. Quindi ho aggiunto MATERIAL_PROVIDERS al bootstrap di angular come mostrato qui https://github.com/AngularShowcase/angular2-seed-ng2-material/blob/master/app/bootstrap.ts.

Ciò restituisce un messaggio di errore GET http://localhost:4200/ng2-material/all 404 (Not Found) nel browser Web e non riesco proprio a capire come eliminarlo.

angular-cli sembra stia facendo qualcosa per creare una cartella dist dove alcuni dei moduli di nodo utilizzati nell'index.html finiscono, ma non vedo dove o come sia configurato.

Answer 1

[EDIT 29/09/2016] Ora che angolare-cli sta usando system.js webpack iso, questa risposta non lo fa ha più senso. Controlla le pagine '3d party lib installation' e 'global lib installation' sul wiki angular-cli.

[EDIT 10/05/2016] Questo è ora descritto in dettaglio sul angular cli wiki.

questo ha funzionato per me:

Negli tempora-CLI-build.js, si aggiunge la dipendenza alle vendorNpmFiles, per esempio

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

(dove a2-in-memory-web-api/web-api.js è un file nel mio node_modules cartella)

Nel index.html si aggiunge il linea seguente:

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

Infine riavviare il server.

Non l'ho testato con materiale angolare ma l'idea ti è venuta.

Answer 2

Prova configurazione SystemJS nel index.html come questo:

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' 
    } 
});