自定义NX插件生成器调用@angular/material:ng-add无文件变更问题求助

我在自定义NX插件生成器中尝试调用@angular/material:ng-add生成器，执行后日志显示生成完成，但styles.scss、index.html、app.module.ts等预期文件完全没有变更，尽管node_modules中已存在@angular/material和@angular/cdk依赖。

已实现的代码 #

应用生成器（安装依赖） #

export default async function (tree: Tree, options: ApplicationGeneratorOptions) {
  const { appName, } = normalizeOptions(tree, options);

  const angularInitOptions: AngularInitOptions = {...};
  await angularInitGenerator(tree, angularInitOptions);

  const angularAppOptions: AngularApplicationOptions = {...};
  await applicationGenerator(tree, angularAppOptions);

  const addDepsToTargetWorkspace = addDependenciesToPackageJson(tree, {
    '@angular/material': VERSIONS.ANGULAR_MATERIAL,
    '@angular/cdk': VERSIONS.ANGULAR_CDK,
  }, {});

  await formatFiles(tree);
  return addDepsToTargetWorkspace;
}

Material生成器（调用ng-add） #

export default async function (tree: Tree, options: MaterialGeneratorSchema) {
  const { appName } = normalizeOptions(tree, options);

  const ngAddOptions: NgAddOptions = { project: appName, animations: 'enabled', theme: 'indigo-pink', typography: true };

  const ngAddMaterialGenerator = wrapAngularDevkitSchematic('@angular/material', 'ng-add');

  await ngAddMaterialGenerator(tree, ngAddOptions);

  return () => {
    logger.info(`Nx Qmaterial Generator: ${appName} has been generated.`);
  }
}

问题排查及解决方案 #

1. 显式添加skipInstall参数 #

由于依赖已提前安装，需告知Angular Material的ng-add schematic跳过依赖安装检查，避免因内部安装逻辑导致的无操作：

const ngAddOptions: NgAddOptions = { 
  project: appName, 
  animations: 'enabled', 
  theme: 'indigo-pink', 
  typography: true,
  skipInstall: true // 新增参数
};

2. 验证项目名称的正确性 #

检查normalizeOptions处理后的appName是否与NX项目的**完整名称（含scope）**完全匹配，ng-add会严格校验项目名称，不匹配则无法定位目标项目进行修改。可通过以下代码确认项目配置：

import { readProjectConfiguration } from '@nx/devkit';

// 在Material生成器中添加
const projectConfig = readProjectConfiguration(tree, appName);
console.log('目标项目配置:', projectConfig);

3. 确保变更被格式化并持久化 #

调用ng-add后需对更新的文件进行格式化，并确保Tree的变更被正确处理：

export default async function (tree: Tree, options: MaterialGeneratorSchema) {
  const { appName } = normalizeOptions(tree, options);

  const ngAddOptions: NgAddOptions = { 
    project: appName, 
    animations: 'enabled', 
    theme: 'indigo-pink', 
    typography: true,
    skipInstall: true
  };

  const ngAddMaterialGenerator = wrapAngularDevkitSchematic('@angular/material', 'ng-add');
  const updatedTree = await ngAddMaterialGenerator(tree, ngAddOptions);
  
  await formatFiles(updatedTree); // 格式化更新后的文件

  return () => {
    logger.info(`Nx Qmaterial Generator: ${appName} has been generated.`);
  }
}

4. 捕获隐藏错误 #

用try-catch包裹schematic调用，排查是否有未暴露的异常：

try {
  await ngAddMaterialGenerator(tree, ngAddOptions);
} catch (err) {
  console.error('Material ng-add执行失败:', err);
  throw err;
}

内容的提问来源于stack exchange，提问作者pax