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

Я хотел попробовать создать приложение Angular 2 с angular -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 в Angular bootstrap, как показано здесь 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 -папки, где некоторые из модулей node, которые используются в index.html, входят, но я не вижу, где и как который настроен.

Ответы

Ответ 1

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

[РЕДАКТИРОВАТЬ 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-in-memory-web-api/web-api.js - это файл в моей папке node_modules)

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

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

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

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

Ответ 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'
    }
});