web-dev-qa-db-ja.com

angular 6のng add <パッケージ名>とnpm install <パッケージ名>の違い

Angular6がリリースされると、新しいコマンド ng add が追加されました。既存のcommand npm install <package>とng add <package>の違いを教えてください

angularnpmangular-cliangular6
27
Nimish goel

ng add

ng add <package>はパッケージマネージャーを使用して、依存関係をインストールします。その依存関係には、依存関係のインストール以外のジョブを実行するために使用できるインストールスクリプトを含めることができます。構成を更新したり、それに基づいて別の依存関係をダウンロードしたり、scaffoldテンプレートを作成したりできます（初期マークアップとロジック）。

サードパーティの依存関係にng addを使用するには、そのチームはインストールスクリプトを説明するschematicsを提供する必要があります。これには、.scssファイルに含める.cssまたは.jsまたは関連するangular.jsonファイルを含めることができます。

提供されたリンクで、マテリアルパッケージをインストールし、コンポーネントでいくつかのコンポーネントを作成することもできます

npmインストール

npm install <package>は、依存関係をインストールするだけです。

詳細 Angularのバージョン6が利用可能になりました 。

18
Suren Srapyan

ng add

パッケージマネージャーを使用して新しい依存関係をダウンロードし、構成の変更（angular.jsonファイル内）でプロジェクトを更新できるインストールスクリプトを呼び出し、追加の依存関係（必要に応じてポリフィルなど）を追加します。コード。

たとえばコマンドng add @angular/material — Installを実行すると、パッケージが自動的にインストールされ、angular.jsonファイルでも構成されます。

npmインストール

npm install <package>はパッケージをプロジェクトにインストールするだけで、使用するための構成は行いません。

例npm install jqueryコマンドを実行すると、プロジェクトにjQueryがインストールされますが、.angular-cli.jsonファイルで手動で設定する必要があります（ v5のように）

詳細については、こちらをご覧ください-

14
Pardeep Jain

Angular 7の場合、@ngrx/storeパッケージを例に取ります。

パッケージをインストールしてpackage-lock.jsonおよびpackage.jsonに追加する以外に、ng addがこれらを行います。

1. reducers folerの下にファイルindex.tsを作成し、ルートレデューサーを初期化します。

import {
   ActionReducer,
   ActionReducerMap,
   createFeatureSelector,
   createSelector,
   MetaReducer
} from '@ngrx/store';
import { environment } from '../../environments/environment';

export interface State {

}

export const reducers: ActionReducerMap<State> = {

};

export const metaReducers: MetaReducer<State>[] = !environment.production ? [] : [];

2. StoreModuleをAppModuleに追加します。 （ファイルapp.module.ts内）

import { StoreModule } from '@ngrx/store';
import { reducers, metaReducers } from './reducers';

@NgModule({
  imports: [
    StoreModule.forRoot(reducers, { metaReducers }),
  ]
})
0
qinmu2127