使用角度 ng-update 示意图迁移重大更改答案

【问题标题】：Migrating breaking change using angular ng-update schematic使用角度 ng-update 示意图迁移重大更改
【发布时间】：2021-06-26 00:54:09
【问题描述】：

无法运行自定义 ng 更新原理图。目标是遍历 html 文件并搜索某些 dom 属性，但是我不确定如何在 Angular 应用程序中正确遍历 Tree 结构。我在网上没有找到很多关于这个的信息，我希望在这里能得到一些结果。下面是我目前尝试访问文件系统的规则工厂。

export default function MigrationUpdate(_options: any): Rule {
  return (host: Tree, _context: SchematicContext) => {
    
    //Traverse file system in angular application
    //Searching for html files 
    host.getDir('/files').visit(filePath => {
      if (!filePath.endsWith('.html')) {
        return;
      }
      const text = host.read(filePath);
      if (text === null) {
        throw new SchematicsException('Unable to read file path.');
      }
    });

    return host;
  };
}

【问题讨论】：

标签： typescript abstract-syntax-tree angular-library typescript-compiler-api angular-schematics

【解决方案1】：

在我看到其他开发人员遇到此问题时将其发布在这里。为了正确访问项目文件结构，getDir() 接受一个字符串参数，该参数表示该项目的文件路径。首先使用从here 找到的getWorkSpace() 检索适当的项目。将传入getDir()的options.path设置为src目录文件。

export default function (options: any): Rule {
  return (host: Tree, context: SchematicContext) => {
    
    const workspace = getWorkspace(host);
    if(!options.project){
      options.project = Object.keys(workspace.projects)[0];
    }
    const project = workspace.projects[options.project];
    options.path = join(normalize(project.root), 'src');

    host.getDir(options.path).visit(file => {
      if (file.endsWith('component.html')) {
        context.logger.log('info','Successfully found HTML files'); 
      }
    });

    return host;
  };
}

【讨论】：