ng add <package name =“”> vs npm install <package name =“”>在角度6

Question

随着Angular6的发布， 他们添加了一个新命令ng add 。任何人都可以告诉我现有command npm install <package>和ng add <package>

之间的区别

Answer 1

ng add

ng add <package>使用您的包管理器并安装依赖项。该依赖项可以具有安装脚本，除了依赖项安装之外，该脚本可用于执行更多工作。它可以更新您的配置，根据该配置下载其他依赖项或创建脚手架模板（带有初始标记和逻辑）。

要将ng add用于第三方依赖项，该团队必须提供描述安装脚本的 schematics 。这可以包括要包含在.scss文件中的一些.css或.js或相关的angular.json文件。

在您提供的链接中，您可以安装材料包，还可以创建一些包含组件的组件

npm install

npm install <package>只需安装依赖项。

了解更多Version 6 of Angular Now Available。

Answer 2

ng add

将使用您的包管理器下载新的依赖项并调用安装脚本，该脚本可以通过配置更改来更新您的项目（在angular.json文件中也是如此），添加其他依赖项（例如，如果需要，可以使用polyfill）或者脚手架包特定的初始化代码。

例如运行命令ng add @angular/material — Install，它会自动安装软件包并在angular.json文件中进行配置。

npm install

npm install <package>只会将您的软件包安装到您的项目中，但不会进行配置以便使用。

例如运行命令npm install jquery它将在您的项目中安装jQuery，但您需要在.angular-cli.json文件中手动配置（如在v5中）

有关详细信息，请阅读此处 -

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

Answer 3

对于Angular 7，以@ngrx/store包为例。

除了安装软件包并将其添加到package-lock.json和package.json之外，ng add还将为您完成这些工作。

1。在index.ts文件下创建文件reducers，并初始化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。将StoreModule添加到AppModule。 （在app.module.ts文件中）

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

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