angular - ng add 的区别与 npm 安装在角度 6

Question

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

Answer 1

吴加

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

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

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

npm 安装

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

更多Angular 6 版现已推出。

Answer 2

吴加

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

例如你运行命令ng add @angular/material — Install，它也会自动安装包和配置angular.json文件。

npm 安装

而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/storepackage 为例。

除了安装软件包并将它们添加到package-lock.jsonand之外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 }),
  ]
})