使用 angular ng-update 示意图迁移重大更改

Question

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

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;
  };
}

Answer 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;
  };
}

使用 angular ng-update 示意图迁移重大更改

Migrating breaking change using angular ng-update schematic

abstract-syntax-tree

typescript

typescript-compiler-api

angular-library

angular-schematics