angular-cli 自定义原理图/collection

Question

我正在尝试为 angular cli 创建自定义原理图。到目前为止我已经弄清楚 "collection" 必须编译，cli 无法读取打字稿。这意味着您不能只克隆 https://github.com/angular/devkit/tree/master/packages/schematics/angular change whatever you need and publish it on npm, which means you need to clone the whole https://github.com/angular/devkit and use its npm run build to create compiled schematics you need to 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 模板创建它，而不是我的 collection，尽管事实上当我故意这样做时

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

它说

Schematic "shat" not found in collection "@thescrollbar/schematics".

我认为这清楚地表明它确实在使用我的 collection?

有人设法使自定义 collection 正常工作吗？在全球范围内并用于生成组件/模块？

Answer 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

it creates it using @schematics/angular template, instead of my collection

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

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

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

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