web-dev-qa-db-ja.com

angular-cliを使用するときにサードパーティのライブラリを追加するにはどうすればよいですか？

Angle-cli（ https://github.com/angular/angular-cli ）でAngular 2アプリを作成して、ng2-マテリアル（ https://github.com/justindujardin/ng2-material ）UIコンポーネント用。ただし、使用するためにng2-materialライブラリを含める方法/場所を理解していないそれ。

_ng new myproject_を使用してプロジェクトを作成し、_ng serve_を使用してサーバーを起動し、正常に機能したWebページを開きました。次のステップでは、ng2-materialを_npm install ng2-material --save_でインストールしました。次に、_MATERIAL_PROVIDERS_を角度のbootstrapにここに示すように追加しました https://github.com/AngularShowcase/angular2-seed-ng2-material/blob/master/ app/bootstrap.ts 。

これにより、WebブラウザーにGET http://localhost:4200/ng2-material/all 404 (Not Found)というエラーメッセージが表示されます。これを取り除く方法がわかりません。

angle-cliは、index.htmlで使用されるノードモジュールの一部が最終的に配置されるdist- folderを作成するために何かをしているようですが、どこでどのように設定されているかわかりません。

angularangular-materialangular-cli
23
zabbarob

[2016年9月29日編集]これで、angular-cliがwebpack iso system.jsを使用しているため、この回答はあまり意味をなさない。 angular-cli wikiのページ「 d party lib installation 」および「 global lib installation 」を確認してください。

[2016年10月5日編集]これは 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はmynode_modulesフォルダー内のファイルです）

index.htmlで、次の行を追加します。

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

最後に、サーバーを再起動します。

angular materialでテストしていませんが、アイデアは得られます。

13
David Bulté

index.htmlでSystemJSを次のように設定してみてください：

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