如何在扩展ng-new的Angular Schematics中添加开发依赖

问题分析 #

• 使用NodePackageInstallTask可添加依赖，但无法指定为开发依赖
• 使用addPackageJsonDependency在已有项目中正常生效，但新项目创建流程里，package.json生成滞后，导致找不到文件无法执行

可行解决方案 #

方案1：通过NodePackageInstallTask直接执行带参数的包管理命令 #

利用npm/yarn的--save-dev（或-D）参数，直接在安装命令中指定开发依赖，无需提前修改package.json，适配新项目创建流程：

context.addTask(
  new NodePackageInstallTask({
    workingDirectory: `./${options.name}`,
    command: 'npm install --save-dev husky lodash-es',
  })
);

该方式会自动将依赖写入devDependencies，且完全遵循Angular CLI默认的包管理工具配置（npm/yarn/pnpm均可适配），无需自定义包逻辑，自然跟随Angular版本更新。

方案2：在angular-starter schematic中延迟处理依赖 #

借助schematic的执行顺序，确保ng-new生成package.json后再修改文件并触发安装：

// angular-starter schematic核心代码
import { chain, Rule, Tree, SchematicContext } from '@angular-devkit/schematics';
import { addPackageJsonDependency, NodeDependencyType } from '@schematics/angular/utils';
import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';

export function angularStarter(options): Rule {
  return chain([
    (tree: Tree) => {
      // 此时package.json已由ng-new生成，可正常修改
      const devDependencies = [
        { type: NodeDependencyType.Dev, name: 'husky', version: '*' },
        { type: NodeDependencyType.Dev, name: 'lodash-es', version: '*' },
      ];
      devDependencies.forEach(dep => addPackageJsonDependency(tree, dep));
      return tree;
    },
    (_tree: Tree, context: SchematicContext) => {
      // 触发安装任务
      context.addTask(new NodePackageInstallTask({ workingDirectory: `./${options.name}` }));
      return _tree;
    }
  ]);
}

这种方式既能精准控制依赖类型，又能沿用Angular CLI的包管理逻辑，避免自定义包带来的版本兼容问题。

注意事项 #

• 版本号建议使用匹配Angular项目的范围（如^x.y.z），而非*，避免引入不兼容依赖
• 始终使用Angular官方提供的NodePackageInstallTask，自动适配项目选择的包管理器

内容的提问来源于stack exchange，提问作者Iván Jiménez Luque