手把手带你初始化一个angular库

在使用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抛出的，才可以在库发布后被第三方成功引用到。