Как добавить стороннюю библиотеку при использовании angular-cli?

Question

Я хотел попробовать создать приложение Angular 2 с угловым cli (https://github.com/angular/angular-cli), а затем использовать ng2-материал (https://github.com/justindujardin/ng2-material) для компонентов пользовательского интерфейса. Но я просто не понимаю, как/где я должен включить библиотеку ng2-материала, чтобы использовать ее.

Я создал проект с ng new myproject, затем я запустил сервер с ng serve и открыл веб-страницу, которая только что сработала. Следующий шаг, я установил ng2-материал с npm install ng2-material --save. Затем я добавил MATERIAL_PROVIDERS в автозагрузку углового, как показано здесь https://github.com/AngularShowcase/angular2-seed-ng2-material/blob/master/app/bootstrap.ts.

В веб-браузере отображается сообщение GET http://localhost:4200/ng2-material/all 404 (Not Found), и я просто не могу понять, как избавиться от него.

angular-cli, похоже, что-то делает, чтобы создать папку dist, в которой находятся некоторые из модулей узлов, которые используются в index.html, но я не вижу, где и как это настроено.

Answer 1

[EDIT 29/09/2016] Теперь, когда угловой кли использует WebPack ISO system.js, этот ответ не сделать больше смысла. Проверьте страницы '3d party lib installation' и 'global lib installation' на вики-странице angular-cli.

[EDIT 10/05/2016] Это подробно описано на angular cli wiki.

Это работает для меня:

В Ember-CLI-build.js, зависимость добавляется к vendorNpmFiles, например

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

(где a2-в-памяти, веб-апи/веб-api.js файл в моем node_modules папку)

В index.html вы добавляете следующая строка:

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

Наконец, вы перезагрузите свой сервер.

Не проверял его с угловым материалом, но вы получили эту идею.

Answer 2

Попробуйте настройки SystemJS в index.html, как это:

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