ng add <package name> 与 npm install <package name> 在 Angular 6 中的区别

Posted 2023-03-06

【中文标题】ng add <package name> 与 npm install <package name> 在 Angular 6 中的区别

【英文标题】：Difference between ng add <package name> vs npm install <package name> in angular 6

【发布时间】：2018-10-14 15:09:36

【问题描述】：

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

【参考方案1】：

ng 添加

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

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

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

npm 安装

npm install <package> 只是安装依赖。

了解更多Version 6 of Angular Now Available。

【参考方案2】：

ng add

将使用您的包管理器下载新的依赖项并调用安装脚本，该脚本可以使用配置更改更新您的项目（在 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

【讨论】：

所以，你的意思是像ng add <package > 这样的命令也会在angular-cli.json 中配置包。

@Nimishgoel 是的，根据文档ng add @angular/material — Install and setup Angular Material and theming and register new starter components into ng generate

非常感谢您提供的好例子。我知道它实际上做了什么。

【参考方案3】：

Angular 7 以@ngrx/store 包为例。

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

1.在reducers文件夹下创建文件index.ts，并初始化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 ),
  ]
)