Angular CLI自定义图表/集合

10
我正在尝试为Angular CLI创建自定义原理图。到目前为止,我已经发现必须编译“collection”,因为CLI无法读取TypeScript。这意味着你不能只克隆https://github.com/angular/devkit/tree/master/packages/schematics/angular,更改所需的内容并将其发布到npm上,这意味着你需要运行tsc来编译整个https://github.com/angular/devkit,然后可以将这些编译文件发布到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 它显示:
“Schematic "shat" not found in collection "@thescrollbar/schematics"。”
我认为这明确表明它确实正在使用我的集合?
是否有人成功地让自定义集合工作?在全局范围内和用于生成组件/模块?

1
我从目前为止所能够工作的内容中添加了一些片段和信息到 https://github.com/angular/angular-cli/issues/7744。 - Splaktar
2个回答

11

/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程序包?
  • 它是否是全局安装的node程序包?

您可能会注意到有两个缺失的回退;它是相对于您的Schematics还是相对于您的项目的程序包?这将来会实现,只是有点复杂。无论如何,您可以全局安装您的Schematics,那样会很好用。

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

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

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

感谢您尝试Schematics。这是一个长期的项目,我们仍在修复许多小边缘情况。我们即将拥有更好的文档和教程(包括Schematics Schematic)。它几乎是一个正在进行中的工作,所以感谢您对此的耐心等待。

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


8
很棒的回答!(来自编写原理图的开发人员) - Brocco
现在都修好了吗? - fxck

0
一个快速解决cli 1.4.1的方法是编辑node_modules/@angular/cli/commands/new.js,在run:function(commandOptions, rawArgs)中更改以下行:
commandOptions.collectionName = commandOptions.collection || this.getCollectionName(rawArgs);

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接