如何创建自定义原理图以构建新的 Angular 项目

Posted 2023-03-13

【中文标题】如何创建自定义原理图以构建新的 Angular 项目

【英文标题】：How to create a custom schematic to build a new angular project

【发布时间】：2019-06-17 12:45:34

【问题描述】：

我正在尝试创建一个无需先执行“ng new project-name”然后运行“ng g my-schematic”即可运行的新原理图

当我什至在本地运行我的原理图时，我必须首先将我的 CLI 的 defaultCollection 设置为我的原理图，这没有意义，我不确定为什么会发生这种情况。

我得到的错误是“在@schematics/angular 中找不到我的示意图”

我的原理图非常简单，我希望它能够运行并在运行时生成项目的整个脚手架。

export function nextGen(options: any): Rule 
  return (tree: Tree, _context: SchematicContext) => 
    const rule = mergeWith(apply(url('./files'), [
      template(
        ...options
      ),
      forEach((fileEntry: FileEntry) => 
        console.log(fileEntry.path);
        if (tree.exists(fileEntry.path)) 
          tree.overwrite(fileEntry.path, fileEntry.content);
          return null;
        
        return fileEntry;
      )
    ]))
    return rule(tree, _context); 
  
;

是否有一种已知且简单的方法来完成此任务？我不确定尝试“扩展”“新”原理图或使用“ng new project-name collection=my-schematic”是否可行？

如果这些选项中的任何一个都是可能的，那么就传入的树而言，这意味着什么，以及如何操纵它来生成包含在“./files”库中的文件？

谢谢！

【参考方案1】：

您的问题中有几个与原理图相关的不同问题，所以我会尽可能多地回答。首先，听起来您想运行单个 Angular CLI 命令来生成基础项目。我从未使用过您建议的选项来更改全局 CLI 安装的默认原理图集合，而是运行 ng new project-name --collection collection-name。

现在，让我们谈谈您考虑过的两个选项：扩展与覆盖。如果您要扩展默认的 ng new 原理图，您的原理图规则可能如下所示：

const ruleChain = chain([
                    externalSchematic('@schematics/angular', 'ng-new', options),
                    mergeWith(apply(url('./files'), [
                    template(
                        ..options
                    ), ...

您执行 Angular 示意图 ng-new 命令，然后添加您的应用程序需要的任何不属于 Angular 默认值的新文件，例如，您的应用程序需要的新组件文件， 覆盖 Angular 默认中您需要大幅更改行为的任何文件，例如，导入您的自定义组件的更新的app.module.ts，或修改 任何略有不同的文件，例如，向package.json 添加新的依赖项（作为一般规则，我将修改 JSON 文件并覆盖 .ts 文件。

关于您关于文件树的问题，规则启动时它将为空，在ng-new 原理图执行后具有约 30 个 Angular 文件的默认集合，并在您的链中的其余规则具有时配置您的应用程序执行。您可以选择在collection.json 中随意命名此原理图，或者称其为ng-new，这将隐藏默认的Angular 行为或ng-new-custom，这将允许它与默认的新的并排生活应用示意图。

我发现另一个有用的原理图行为是在原理图collection.json 中指定原理图扩展了 Angular 原理图，即"extends":"@schematics/angular"，然后在新应用程序的规则链中修改@987654334 @到use my custom schematic as the default。根据我的经验，这为不熟悉指定原理图集合的同行创造了更加统一和无缝的体验。

【讨论】：

您是否碰巧在 GitHub 等上有一个工作示例，您可以在其中运行 ng new --collection <example-collection> 并添加您指定的文件？我正在尝试按照设置进行操作，但我不知道如何真正让原理图在 ng new

上实际运行

【参考方案2】：

我的问题其实很相似，但是上面的解决方法好像不行。

我想先调用Angular的ng-new，然后我的Rule需要对结果进行操作。

类似：

 chain([
                    externalSchematic('@schematics/angular', 'ng-new', options),
                    schematic('someRule', options)
])

但这不起作用。我的规则需要 angular.json ngNew 应该创建，当我的规则运行时它显然还不存在。

那么有没有办法等待外部原理图完成然后运行另一个原理图，或者告诉第二个原理图使用 ng-new 返回的树？

比如：

chain([
      externalSchematic('@schematics/angular', 'ng-new', options),
      mergeWith(apply(source(/* source created by ng-new */), [
        schematic('someStuff', options)
      ])
    )])

@ericksoen？