通过 angular-cli 生成的 Angular 组件的自定义项目级模板

Posted 2023-03-13

【中文标题】通过 angular-cli 生成的 Angular 组件的自定义项目级模板

【英文标题】：Custom project-level templates for angular components generated via angular-cli

【发布时间】：2019-02-14 16:07:51

【问题描述】：

如何将自定义角度组件原理图添加到现有项目？

我想拥有例如my-page 组件模板将复制现有的 \node_modules\@schematics\angular\component\ 文件，但带有已编辑的模板。

我希望它可以通过angular-cli 来实现，例如ng g my-page pagename 带有原理图属性的命令。

目前我在\node_modules\ 下修改了现有 Angular 原理图的代码，所以这对我来说很好（直到下一次安装包），但我想与团队分享这个，所以每个人都将使用预定义的模板，这些模板将存储在例如src\team-schematics\.

我如何做到这一点？

我尝试通过schematics schematic --name my-schematic 创建新原理图，将角度原理图复制到\ClientApp\src\app\my-schematic\\ 并尝试启动$ ng generate my-page --collection \ClientApp\src\app\my-schematic，但目前没有运气：

Error: Could not find module "\\ClientApp\\src\\app\\my-schematic\\" from "C:\\Users\\xxx\\Projects\\yyy

【问题讨论】：

我关注这个medium.com/rocket-fuel/…。获得原理图后不要忘记构建它：npm run build，然后在新应用的目录中创建一个 npm link path-too-your-schematic，然后您可以执行 ng g simple-schematic:simple-schematic --name="some name"。注意：我需要在构建原理图之前制作 npm install

IMO @Eliseo 的评论应该被接受。

@Eliseo 在那篇文章之后我收到一个错误Cannot find schematic X in collection X-collection

我下载了 github：github.com/jonbcampos/schematics 并为我工作（Angular 7）。我不知道会发生什么，顺便检查一下packgaje.json和collection.json

我创建了一个名为原理图的自定义原理图，如果我想用ng g schematics:schematics --name my-name 生成它，它不会生成任何东西。

【参考方案1】：

至于 Angular CLI，我们只能有一个 Schematics。可能您可以创建自定义 schmatics '@foo/schematics' 并扩展 angular.json 中的 @angular/schematics 并根据您的需要自定义原理图。

ng new C myComponent --collection=@foo/schematics

【参考方案2】：

您不应该修改核心原理图。另一方面，您可以创建自己的原理图。

创建原理图是一个循序渐进的过程。您可以在 Schematics — An Introduction 找到相同的内容。

【讨论】：

谁对我的帖子投了反对票，感谢您的时间和投票。如果您可以添加有关如何改进我的答案的评论，那就太好了。

我没有，但我想它是双重的：1. 你的答案基本上只是链接，但你应该有更多的 something 所以它不仅仅是一个重定向(***.com/help/how-to-answer)。 2. 该链接是关于生成一个新的原理图项目，而不是在现有项目中添加一个。