Angular+Nx单仓库下批量替换旧组件的最优实现方案

AST是解决这类批量代码替换的最优方案——正则容易出现误匹配，而AST能精准识别Angular的组件、模块结构，完全适配你的场景。针对Angular 14，不用再纠结ngast了，直接用Angular官方生态的工具即可，下面是具体指引：

推荐工具栈 #

• @angular/compiler-cli：Angular官方编译器，能完美解析Angular 14的组件元数据、模板AST，兼容性和可靠性拉满
• nx：自带项目遍历、执行器API，帮你快速定位仓库里的3个应用和UI类库
• typescript：TS AST解析工具，用于处理组件类、模块文件的导入和装饰器配置
• cheerio（可选）：如果需要对HTML模板做更灵活的DOM操作，可以辅助使用，但优先用Angular编译器的模板AST更准确

执行器核心步骤 #

1. 遍历Nx仓库目标项目 #

用Nx的缓存项目图API，快速筛选出需要处理的应用和类库：

import { readCachedProjectGraph } from '@nrwl/devkit';

const projectGraph = readCachedProjectGraph();
// 替换成你的UI类库名称
const targetProjects = Object.values(projectGraph.nodes).filter(node => 
  node.type === 'application' || node.name === 'your-ui-library'
);

2. 解析Angular组件与模块 #

用NgtscProgram解析项目代码，拿到组件的模板AST和模块元数据：

import { NgtscProgram } from '@angular/compiler-cli';
import * as ts from 'typescript';

// 每个项目的tsconfig路径可通过Nx项目配置获取
const tsConfigPath = 'apps/your-app/tsconfig.app.json';
const tsProgram = ts.createProgram([tsConfigPath], {});
const ngProgram = new NgtscProgram(tsProgram.getRootFileNames(), tsProgram.getCompilerOptions(), tsProgram);

// 获取旧组件的模板AST
const componentClass = tsProgram.getSourceFile('path/to/old-button.component.ts')?.statements.find(
  stmt => ts.isClassDeclaration(stmt) && stmt.decorators?.some(d => d.expression.getText().includes('Component'))
) as ts.ClassDeclaration;
const componentMeta = ngProgram.getNgComponentMetadata(componentClass);
const templateAst = componentMeta.template.ast;

3. 替换模板中的旧组件 #

遍历模板AST，找到旧组件节点，替换成新指令形式，同时迁移输入输出绑定：

import { ElementAst } from '@angular/compiler';

function transformTemplateAst(astNodes: any[]) {
  astNodes.forEach(node => {
    if (node instanceof ElementAst && node.name === 'my-button-component') {
      // 替换元素为button，添加my-button指令属性
      node.name = 'button';
      node.attrs.push({
        name: 'my-button',
        value: '',
        sourceSpan: node.sourceSpan
      });
      // 迁移输入属性，比如旧组件的[disabled]映射到新指令的[myButtonDisabled]
      node.inputs.forEach(input => {
        if (input.name === 'disabled') {
          input.name = 'myButtonDisabled';
        }
      });
      // 迁移输出事件，比如(oldClick)换成(myButtonClick)
      node.outputs.forEach(output => {
        if (output.name === 'click') {
          output.name = 'myButtonClick';
        }
      });
    }
    // 递归处理子节点
    if (node.children) transformTemplateAst(node.children);
  });
}

transformTemplateAst(templateAst);

4. 更新模块的导入与声明 #

用TS AST修改模块文件，移除旧组件的导入，添加新指令的导入，并更新@NgModule的配置：

// 解析模块文件
const moduleFile = tsProgram.getSourceFile('path/to/app.module.ts')!;
// 找到旧组件的导入声明
const oldComponentImport = moduleFile.statements.find(
  stmt => ts.isImportDeclaration(stmt) && stmt.moduleSpecifier.getText() === "'your-ui-library'" && stmt.importClause?.getText().includes('MyButtonComponent')
) as ts.ImportDeclaration;

// 修改导入内容，替换为新指令
const updatedImportClause = ts.factory.createImportClause(
  undefined,
  ts.factory.createNamedImports([
    ts.factory.createImportSpecifier(undefined, ts.factory.createIdentifier('MyButtonDirective'))
  ])
);
const updatedImport = ts.factory.updateImportDeclaration(
  oldComponentImport,
  oldComponentImport.decorators,
  oldComponentImport.modifiers,
  updatedImportClause,
  oldComponentImport.moduleSpecifier
);

// 更新@NgModule的declarations或imports数组（如果指令在共享模块里就更新imports）
// 需遍历模块类的装饰器，找到NgModule元数据并修改

5. 写入修改后的文件 #

用TS的Printer把修改后的AST转成代码，写入文件：

const printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed });
// 以模块文件为例
const updatedModuleCode = printer.printNode(ts.EmitHint.Unspecified, updatedImport, moduleFile);
fs.writeFileSync(moduleFile.fileName, updatedModuleCode);

关键注意事项 #

• 先在测试分支或备份代码后执行，避免误修改
• 务必处理输入输出的映射，确保替换后功能和原来一致
• 遵循Nx执行器规范：在executor.ts中导出执行函数，在项目的project.json里配置对应的目标

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