Jerry 的前一篇文章[Angular 原理圖 Schematics 學習 - 動手開發一個實際的例子](https://jerry.blog.csdn.net/article/details/120824885)，已經開發好了一個可以執行的 Angular library Schematics.

本文介紹具體的執行步驟。

在工作區的根目錄下，執行庫的 ng build 命令。

> ng build my-lib

確保 build 透過：

![](https://img-blog.csdnimg.cn/img_convert/bfcca46e19b4601c0a992883ebb2462b.png)

如果遇到錯誤，可以參考我的程式碼倉庫的[程式碼](https://github.com/wangzixi-diablo/schematics-study)。

以及這篇文章：[解決 Angular 官網下載的 library Schematics build 出錯的辦法](https://jerry.blog.csdn.net/article/details/120825895)

然後，進入庫目錄，構建原理圖

> cd projects/my-lib
> npm run build

確保命令成功執行。

![](https://img-blog.csdnimg.cn/img_convert/fc10f8141a78aa201bc2ae5e1b2bbb12.png)

# 連結這個庫

這些庫和原理圖都已打包好了，就放在你工作區根目錄下的 dist/my-lib 資料夾中。

![](https://img-blog.csdnimg.cn/img_convert/59b33b9a01196ef7d01e0f272bfd1aad.png)

要執行這個原理圖，你需要把這個庫連結到 node_modules 資料夾中。在工作區的根目錄下，執行 npm link 命令，並把你的可分發庫的路徑作為引數。

執行完之後：

![](https://img-blog.csdnimg.cn/img_convert/f97a428467ad27fefad800ef4eb88410.png)

發現我自己的庫也出現在工作區根目錄的 node_modules 資料夾之下了：

![](https://img-blog.csdnimg.cn/img_convert/038037d5ade7701f8defe132dbcb74c1.png)

同時，在我 Node.js 安裝目錄的 node_modules 資料夾下，也多了一個快捷方式：

![](https://img-blog.csdnimg.cn/img_convert/dc122223d1f7cf9947bd34835e41b0ba.png)

最後，終於可以開始執行原理圖了。

執行命令列：

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

傳入的 name 引數值為 my-data.

從命令列列印的結果，發現 my-data.service.ts 已經建立成功了：

![](https://img-blog.csdnimg.cn/img_convert/e0b04f66a93eac53f8e0858b68f27f20.png)

檔案內容如下：
![](https://img-blog.csdnimg.cn/img_convert/bfcabb77d9e5de711ece947d711ce106.png)

對比一下我們 Schematics 裡的模板檔案：
![](https://img-blog.csdnimg.cn/img_convert/57f4130cc1f61f13e56c3e6be7a9b083.png)

這個例子就算執行成功了。

如何執行 Angular library 的原理圖 Schematics

相關文章