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

时间:2019-01-23 20:57:18

标签: angular angular-schematics

我正在尝试创建一个新的原理图,该原理图无需先执行“ 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”库中包含的文件?

谢谢!

2 个答案:

答案 0 :(得分:0)

在您的询问中有几个与原理图相关的问题,因此我将尽力回答。首先,听起来您想运行一个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文件。< / p>

关于文件树的问题,当规则开始时它将为空,在ng-new原理图执行后将具有默认的〜30个Angular文件集,并在您的其余规则中具有已配置的应用程序链已执行。您可以选择在collection.json中为该原理图命名,也可以命名为ng-new(这将隐藏默认的Angular行为),或者命名为ng-new-custom(使它可以并排使用) -端带有默认的新应用程序原理图。

我发现另一个有用的逻辑示意图行为是在逻辑示意图collection.json中指定该逻辑示意图扩展了Angular逻辑示意图,即"extends":"@schematics/angular",然后在新应用程序的规则链中进行指定,将angular.json修改为use my custom schematic as the default。以我的经验,这为不熟悉指定逻辑示意图集合的同伴创建了更加统一和无缝的体验。

答案 1 :(得分:0)

我的问题实际上非常相似,但是上述解决方案似乎无效。

我想先调用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?