web-dev-qa-db-ja.com

angular-cliはwebpack.config.jsファイルです - 新しいangular6はng ejectをサポートしていません

更新日：2018年12月（ 'Aniket'の回答を参照）

Angular CLI 6を使用する場合、ng ejectは推奨されなくなり、8.0では間もなく削除されるため、Builderを使用する必要があります。

アップデート：2018年6月：Angular 6はng ejectをサポートしていません**

アップデート：2017年2月：ng ng ejectを使用

更新：2016年11月：angular-cliは現在webpackのみを使用しています。あなたはnpm install -g angular-cliで普通にインストールする必要があるだけです。 「私たちはSystemJSからWebpackに、beta10とbeta.14の間でビルドシステムを変更しました。」しかし、実際には構造とフォルダを見つけるためにAngular-Cliを使い、それからもうWebPackの設定を手動で使います

これでAngular Cliをインストールしました。

npm install -g angular-cli@webpack

Angular1とWeb Packを使用していたときは、すべてのタスクとプラグインを実行するように "webpack.config.js"ファイルを変更していましたが、Angular-Cliで作成されたこのプロジェクトでは動作しません。魔法です？

Webpackが動作しているときに動作します。

ng serve 

"Version: webpack 2.1.0-beta.18"

しかし、私はangular-cliの設定がどのように機能するのか理解していません...

angularwebpackangular-cli
123
stackdave

Angular CLI 6では、ng ejectは推奨されなくなり、8.0で間もなく削除される予定であるため、Builderを使用する必要があります。これは、ng ejectを実行しようとしたときの説明です。

enter image description here

カスタムWebパック設定を提供するには、Angular-Builderパッケージ（ https://github.com/meltedspark/angular-builders ）を使用できます。

私は私のブログの1つのブログ記事にすべてを要約しようとしました - Angular CLI 6のカスタムwebpack設定でビルド設定をカスタマイズする方法

しかし、本質的にあなたは以下の依存関係を追加します - 

  "devDependencies": {
    "@angular-builders/custom-webpack": "^7.0.0",
    "@angular-builders/dev-server": "^7.0.0",
    "@angular-devkit/build-angular": "~0.11.0",

angular.jsonで以下のように変更します - 

  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {"path": "./custom-webpack.config.js"},

Builderと新しいオプションcustomWebpackConfigの変更に注意してください。また変わる

    "serve": {
      "builder": "@angular-builders/dev-server:generic",

サーブターゲットに対するビルダーの変更に再び注目してください。これらの変更をポストすると、同じルートディレクトリにcustom-webpack.config.jsというファイルを作成し、そこにwebpack設定を追加できます。

ただし、ng ejectの設定はデフォルトの設定とマージされるので、編集/追加したいものを追加するだけです。

18
Aniket Thakur

angular-cliからwebpack.config.jsを取り出す良い方法があります。とにかく走れ：

$ ng eject

これにより、プロジェクトのルートフォルダにwebpack.config.jsが生成され、自由に設定できます。この欠点は、package.json内のビルド/起動スクリプトが新しいコマンドに置き換えられ、代わりに

$ ng serve

あなたはのような何かをしなければならないでしょう

$ npm run build & npm run start

このメソッドは最近のすべてのバージョンのAngular-Cli（私は個人的に試してみましたが、最も古いもの1.0.0-beta.21、そして最新のもの）で動作するはずです。 1.0.0-beta.32.3）

151
Anton Nikiforov

この 問題 によると、学習曲線を減らすためにユーザーがWebpackの設定を変更できないようにすることは設計上の決定でした。

Webpackの便利な設定の数を考えると、これは大きな欠点です。

非常に意欲的であるため、プロダクションアプリケーションにangular-cliを使用することはお勧めしません。

46
Ignatius Andrew

CLIのwebpack設定はイジェクトでき​​ます。 Anton Nikiforovの答えを確認してください .

期限切れ：

あなたはangular-cli/addon/ng2/modelsでconfigテンプレートをハックすることができます。現時点ではWebpackの設定を変更する正式な方法はありません。

これに関してgithubには「wont-fix」という閉じた問題があります： https://github.com/angular/angular-cli/issues/1656

11
j2L4e

私が考えているのは、WebPackを持っていることは製品リリース時には簡単だろうということです。

FYI： https://github.com/Piusha/ngx-lazyloading

0
Piusha

ng ejectの提案に従って、 ngx-build-plus を使うことができます。

メンテナンスのオーバーヘッドなしに取り出すことの利点を提供する新しい構成フォーマットと組み合わせて使用​​できるプロジェクトがいくつかあります。そのようなプロジェクトの1つがngx-build-plusです。 https://github.com/manfredsteyer/ngx-build-plus

0
Ravi Sevta