本文使用的 Github 項目：https://github.com/wangzixi-diablo/angular-monorepo/commits/main

項目本地路徑：

C:\Code\SPA\angular-monorepo

Github commit 1：https://github.com/wangzixi-diablo/angular-monorepo/commit/a9da6b7d49e48ab60b43749fb45ea750fae8a5bd

在這個 commit 里，在工作區 workspace 里創建了一個新的類型為 application 的 project：

build 時使用的工具為：@angular-devkit/build-angular:browser

ng serve 時，使用的工具為：@angular-devkit/build-angular:dev-server

創建 Angular library 的 commit：

https://github.com/wangzixi-diablo/angular-monorepo/commit/221c15d4ef68b0d75783b4b5f81547296d650abd
對于 library 來說，使用的 build 工具是 packagr：

因此，在 package.json 里自動導入了 ng-packagr 的依賴：

如何消費：

注意第五行，這里并沒有直接從文件系統導入 my-lib，而是使用了其名稱。

在工作區的 tsconfig.json 文件里，自動在 paths 里添加了 my-lib 到磁盤上物理文件的映射關系。這樣，ng build 時，看到 my-lib 的 symbol，就會到 dist/my-lib 文件夾里查找類型定義：

library 文件夾下的 package.json，指定了入口文件為 public-api.ts:

我們在 Visual Studio Code 里查看 my-lib，鼠標 hover 上去，能看到 module “my-lib” 的提示：

按住 ctrl 再點擊左鍵，能看到其自動定位到 dist 文件夾的 my-lib.d.ts 里：

ng build my-lib:

ng build 成功：

ng build --configuration production 成功：

dist 文件夾出現了 jerry-first-app:

最后運行成功：

這個項目里還有一些其他文件。

polyfills.ts：在 Web 開發中，polyfill 是在不支持該功能的 Web 瀏覽器上實現該功能的代碼。 大多數情況下，它指的是實現 HTML5 或 CSS 網絡標準的 JavaScript 庫，或者是舊瀏覽器上的既定標準（某些瀏覽器支持），或者現有瀏覽器上的提議標準（任何瀏覽器都不支持）。 正式地說，“polyfill 是瀏覽器 API 的墊片”。

無論瀏覽器是否支持，Polyfills 允許 Web 開發人員使用 API，并且通常開銷最小。 通常，他們首先檢查瀏覽器是否支持 API，如果可用就使用它，否則使用他們自己的實現。Polyfills 本身使用其他更受支持的特性，因此不同的瀏覽器可能需要不同的 polyfills。 該術語也用作動詞：polyfilling 為功能提供 polyfill。

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的如何创建 Angular library 并在生产环境中消费的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。