在使用angular的过程中,我们希望将一些公共的组件等剥离到一个单独的库中,然后供我们在其它的angular项目中直接导入。
本文将展示如何初始化并集成测试一个angular库。
angular cli
首先我们需要确认angular的版本,比如我当前计划初始化适用于angular18版本的库,则需要在全局先安装18版本的angular-cli,然后使用 ng version
来进行版本确认:
命令如下:
npm install -g @angular/cli@18.0.0
ng version
全局展示如下:
(base) panjie@panjiedeMac-Studio ~ % npm install -g @angular/cli@18.0.0
added 22 packages, removed 93 packages, and changed 203 packages in 17s
40 packages are looking for funding
run `npm fund` for details
(base) panjie@panjiedeMac-Studio ~ % ng version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 18.0.0
此时我们便拥有了一个18版本的全局cli,使用它可以快速的创建18版本的angular项目。
创建项目
在创建angular库前,我们需要创建一个用于集成测试的项目,否则我们只能够对库中的组件进行单元测试。而传统的npm link
的方法,并不适用于测试angular库(会报错)。
在自己的喜欢的文件夹处,创建angular项目:
ng new angular18
选择项目使用的stylesheet以及是否启用SSR后继续。
创建库
比如此时我想创建一个名称为@yunzhi/ng-theme
的库,则可以直接使用关键字来创建。
首先我们先进入到angular18项目中,然后再直接创建库的命令:
(base) panjie@panjiedeMac-Studio ng % cd angular18
(base) panjie@panjiedeMac-Studio angular18 % ng g lib @yunzhi/ng-theme
此时将自动在angular18下创建projects文件夹:
├── projects
│ └── yunzhi
│ └── ng-theme
测试库
在进行单元测试时,可以使用ng t @yunzhi/ng-theme
,在进行集成测试时,可以直接在当前项目中引用库中的在pubilc-api.ts
文件中抛出的元素。
发布库
ng build @yunzhi/ng-theme
然后进入相应的文件夹npm publish
即可。
注意点
在集成测试中引用库中的元素时,必须要import xxx/pubilc-api.ts
,不能够直接import
相关的文件!因为只有xxx/pubilc-api.ts
抛出的,才可以在库发布后被第三方成功引用到。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。