Différence entre ng add <package name> vs npm install <package name> en angulaire 6

Question

Comme Angular6 a été publié, ils ont ajouté une nouvelle commande ng add . Quelqu'un peut-il me dire quelle sera la différence entre command npm install <package> et ng add <package> existants

Answer 1

ng ajouter

ng add <package> utilise votre gestionnaire de paquets et installe la dépendance. Cette dépendance peut avoir un script d'installation qui peut être utilisé pour faire plus de travail à l'exception de l'installation des dépendances. Il peut mettre à jour vos configurations, en télécharger d'autres dépendances basé sur celui-ci ou de créer de l'échafaudage de modèles (avec initiale balisage et de la logique).

Pour utiliser ng add pour un tiers de la dépendance, l'équipe doit fournir les schémas qui décrit le script d'installation. Cela peut inclure certains .scss ou .css ou liés .js fichiers à inclure dans l' angular.json le fichier.

Dans votre lien fourni, vous pouvez installer le matériel de paquet et également créer des composants avec des composants

npm install

npm install <package> s'installe simplement la dépendance.

Pour plus de la Version 6 de Angulaire Maintenant Disponible.

Answer 2

ng ajouter

Permettra d'utiliser votre gestionnaire de paquets pour télécharger de nouvelles dépendances et d'appeler un script d'installation qui peut mettre à jour votre projet avec les modifications de la configuration (En angular.json le fichier en tant que bien), ajouter des dépendances supplémentaires (par exemple, polyfills si nécessaire), ou un échafaudage paquet-code d'initialisation spécifique.

Par exemple , vous exécutez la commande ng add @angular/material - Install, il va automatiquement installer le paquet et de le configurer en angular.json le fichier de trop.

npm install

Alors qu' npm install <package> ne s'installe que votre colis dans votre projet, mais ne sera pas configurer pour l'utiliser.

Par exemple , vous exécutez la commande npm install jquery il va installer jQuery dans votre projet, mais vous avez besoin de configurer manuellement en .angular-cli.json le fichier (comme en v5)

Pour plus d'informations, lire ici -

• https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4

Answer 3

Comme pour Angulaires 7, @ngrx/store colis par exemple.

En plus de l'installation de paquets et de les ajouter à l' package-lock.json et package.json, ng add va faire ces pour vous.

1.Créer le fichier index.ts sous reducers foler, et initialiser racine réducteur.

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.Ajouter StoreModule à AppModule. (Dans le fichier app.le module.ts)

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

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