如何运行 Angular library 的原理图 Schematics

举报
Jerry Wang 发表于 2022/08/28 09:54:23 2022/08/28
【摘要】 Jerry 的前一篇文章Angular 原理图 Schematics 学习 - 动手开发一个实际的例子,已经开发好了一个可以运行的 Angular library Schematics.本文介绍具体的运行步骤。在工作区的根目录下,运行库的 ng build 命令。ng build my-lib确保 build 通过:如果遇到错误,可以参考我的代码仓库的代码。以及这篇文章:解决 Angular...

Jerry 的前一篇文章Angular 原理图 Schematics 学习 - 动手开发一个实际的例子,已经开发好了一个可以运行的 Angular library Schematics.

本文介绍具体的运行步骤。

在工作区的根目录下,运行库的 ng build 命令。

ng build my-lib

确保 build 通过:

如果遇到错误,可以参考我的代码仓库的代码

以及这篇文章:解决 Angular 官网下载的 library Schematics build 出错的办法

然后,进入库目录,构建原理图

cd projects/my-lib
npm run build

确保命令成功运行。

链接这个库

这些库和原理图都已打包好了,就放在你工作区根目录下的 dist/my-lib 文件夹中。

要运行这个原理图,你需要把这个库链接到 node_modules 文件夹中。在工作区的根目录下,运行 npm link 命令,并把你的可分发库的路径作为参数。

执行完之后:

发现我自己的库也出现在工作区根目录的 node_modules 文件夹之下了:

同时,在我 Node.js 安装目录的 node_modules 文件夹下,也多了一个快捷方式:

最后,终于可以开始运行原理图了。

运行命令行:

ng generate my-lib:my-service --name my-data

传入的 name 参数值为 my-data.

从命令行打印的结果,发现 my-data.service.ts 已经创建成功了:

文件内容如下:

对比一下我们 Schematics 里的模板文件:

这个例子就算执行成功了。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。