angular-cli 自定义原理图/集合

Posted 2023-03-13

【中文标题】angular-cli 自定义原理图/集合

【英文标题】：angular-cli custom schematics / collection

【发布时间】：2018-03-07 20:50:42

【问题描述】：

我正在尝试为 angular cli 创建自定义原理图。到目前为止，我已经发现必须编译“集合”，cli 无法读取打字稿。这意味着您不能只克隆 https://github.com/angular/devkit/tree/master/packages/schematics/angular 更改您需要的任何内容并将其发布到 npm 上，这意味着 您需要克隆整个 https://github.com/angular/devkit 并使用它的npm run build创建编译原理图你需要run it thru tsc，然后你可以将这些编译文件发布到npm并使用npm全局安装，例如

npm i -g @thescrollbar/schematics

那么我应该能够做到ng new --collection=@thescrollbar/schematics my-app，但令人惊讶的是，它没有工作并且正在抛出tree.branch is not a function。

但是如果你把这个全局安装的包复制到cli的模块中

/usr/local/bin/node_modules/@thescrollbar/schematics -> /usr/local/bin/node_modules/@angular/cli/node_modules/@thescrollbar/schematics

它开始工作，您可以创建一个基于您的原理图的新应用程序..

现在，当我尝试使用

生成新组件时，我没有解决方法的新问题

ng g c --collection=@thescrollbar/schematics logo

它使用@schematics/angular 模板创建它，而不是我的收藏，尽管我故意这样做

ng g shat --collection=@thescrollbar/schematics logo

它说

在集合“@thescrollbar/schematics”中找不到示意图“shat”。

我认为这清楚地表明它确实在使用我的收藏？

有人设法让自定义集合正常工作吗？全局并用于生成组件/模块？

【问题讨论】：

我添加了一些 sn-ps 和信息到 github.com/angular/angular-cli/issues/7744 到目前为止我已经能够开始工作。

【参考方案1】：

/usr/local/bin/node_modules/@thescrollbar/schematics -> /usr/local/bin/node_modules/@angular/cli/node_modules/@thescrollbar/schematics

是的，这是当前实现的一个问题。那是因为我们（盲目地）在集合名称上调用 require.resolve，它只能从 CLI 的当前模块解析。本周应发布一个即将发布的修复 (PR 163)，将使用以下列表解决：

是不是相对于process.cwd()的node包？ 它是相对于工具（在您的情况下为 CLI）的节点包吗？ 是全局安装的node包吗？

您可能会注意到缺少两个缺少的后备；它是相对于您的原理图的包，还是相对于您的项目的包？这即将到来，只是实现起来有点复杂。在任何情况下，您都可以在全局范围内安装原理图，这样就可以正常工作。

ng g c --collection=@thescrollbar/schematics logo

它使用@schematics/angular 模板创建它，而不是我的集合

这是一个已知问题，我们有一个 PR 可以在 CLI 中修复它。这也是即将到来的修复。

感谢您试用 Schematics。现在这是一个很长时间的项目，我们仍在修复很多小的边缘案例。我们还将很快获得更好的文档和教程（包括原理图）。这几乎是一项正在进行的工作，所以感谢您对它的耐心等待。

您可以在 Angular DevKit 存储库 (https://github.com/angular/devkit) 中提交问题和错误。

【讨论】：

很好的答案！ （由编写原理图的开发人员提供）

现在都解决了吗？

【参考方案2】：

cli 1.4.1 的快速修复方法是编辑 node_modules/@angular/cli/commands/new.js，在 run:function(commandOptions, rawArgs) 中更改行

commandOptions.collectionName = this.getCollectionName(rawArgs);

到

commandOptions.collectionName = commandOptions.collection || this.getCollectionName(rawArgs);