Difference between ng add <package name> vs npm install <package name> in angular 6

Question

As Angular6 has been released, They have added a new command ng add . Can anyone tell me what will be the difference between existing command npm install <package> and ng add <package>

Solution 1

ng add

ng add <package> uses your package manager and installs the dependency. That dependency can have an installation script which can be used to do more job except the dependency installation. It can update your configurations, download another dependencies based on that one or create scaffold templates (with initial markup and logic).

To use ng add for a third party dependency, that team must provide schematics which describes the installation script. This can include some .scss or .css or related .js files to be included in the angular.json file.

In your provided link, you can install material package and also create some components with components

npm install

npm install <package> just installs the dependency.

For more Version 6 of Angular Now Available.

Solution 2

ng add

Will use your package manager to download new dependencies and invoke an installation script which can update your project with configuration changes (In angular.json file as well), add additional dependencies (e.g. polyfills if needed), or scaffold package-specific initialization code.

For example you run the command ng add @angular/material — Install, it will automatically install the package and configure in angular.json file too.

npm install

Whereas npm install <package> will only install your package into your project but will not configure in order to use.

For example you run the command npm install jquery it will install jQuery in your project but you need to configure manually in .angular-cli.json file (as in v5)

For more information read out here -

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

Solution 3

As for Angular 7, take @ngrx/store package for example.

Besides installing packages and adding them to package-lock.json and package.json, ng add will do these for you.

1.Create file index.ts under reducers foler, and initialize root reducer.

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.Add StoreModule to AppModule. (In file app.module.ts)

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

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

Comments

[Nimish goel]

So, you mean a command like, ng add <package > will configure the package in angular-cli.json as well.

[Pardeep Jain]

@Nimishgoel yes as per doc ng add @angular/material — Install and setup Angular Material and theming and register new starter components into ng generate

[Surendranath Sonawane]

Thank you so much for nice examples. I got the ideas about what it does actually.