web-dev-qa-db-fra.com

Différence entre ng add <nom du paquet> et npm install <nom du paquet> dans angular 6

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 les command npm install <package> Existants et les ng add <package>

angularnpmangular-cliangular6
27
Nimish goel

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 effectuer davantage de tâches, à l'exception de l'installation de la dépendance. Il peut mettre à jour vos configurations, télécharger d'autres dépendances basées sur celle-là ou créer des modèles d'échafaudage (avec balisage initial et logique).

Utiliser ng add pour une dépendance tierce, cette équipe doit fournir schematics qui décrit le script d'installation. Cela peut inclure des .scss ou .css ou apparenté .js fichiers à inclure dans le angular.json fichier.

Dans votre lien fourni, vous pouvez installer un package de matériel et également créer des composants avec des composants.

npm installer

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

Pour plus Version 6 de Angular Maintenant disponible .

18
Suren Srapyan

ng add

Utilisera votre gestionnaire de paquets pour télécharger de nouvelles dépendances et invoquer un script d’installation permettant de mettre à jour votre projet avec les modifications de configuration (dans le fichier angular.json Également), d’ajouter des dépendances supplémentaires (par exemple, des polyfill si nécessaire) ou d’échafauder des packages spécifiques. code d'initialisation.

Par exemple vous exécutez la commande ng add @angular/material — Install, Le paquet sera automatiquement installé et configuré dans le fichier angular.json.

npm installer

Alors que npm install <package> Installera votre paquet uniquement dans votre projet mais ne le configurera pas pour l'utiliser.

Par exemple vous exécutez la commande npm install jquery Il installera jQuery dans votre projet mais vous devrez le configurer manuellement dans .angular-cli.json fichier (comme dans v5)

Pour plus d'informations, lisez ici -

14
Pardeep Jain

Quant à Angular 7, prenez @ngrx/store package par exemple.

En plus d'installer des paquets et de les ajouter à package-lock.json et package.json, ng add va les faire pour vous.

1.Créer un fichier index.ts sous reducers foler et initialisez le réducteur de racine.

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.module.ts)

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

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