angular 中 ng add <package name> 与 npm install <package name> 之间的区别 6

Question

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

之间有什么区别

Answer 1

添加

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

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

在您提供的 link 中，您可以安装 material 包并创建一些组件

npm 安装

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

更多Version 6 of Angular Now Available.

Answer 2

ng add

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

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

npm 安装

而 npm install <package> 只会将您的包安装到您的项目中，但不会为了使用而进行配置。

例如你运行命令npm install jquery它会在你的项目中安装jQuery但是你需要在[=中手动配置15=] 文件（如 v5）

有关更多信息，请在此处阅读 -

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

Answer 3

至于Angular7，以@ngrx/store包为例

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

1.Create file index.ts under reducers foler, 并初始化 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 到 AppModule。（在文件 app.module.ts 中）

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

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

angular 中 ng add <package name> 与 npm install <package name> 之间的区别 6

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

npm

angular-cli

angular

angular6

添加

npm 安装

ng add

npm 安装