Create Angular Liberary & Demo Project Init

簡述

• 目標：建立一個乾淨的 lib & demo 用專案包
• 方案名稱：test-controls
  • demo 專案名稱：demo
  • lib 專案名稱：controls

建立流程

1. 建立方案結構

   • 指令：ng new test-controls --createApplication false
   • --createApplication 參數 設定為 false，表示設定為空的專案結構，官網說明
   • 接下來專案的建立，都會建立在 projects 目錄底下

2. 建立 專案名稱為 controls 的 lib專案

   • 指令：ng g lib controls
   • 所有 lib 專案內要 share 出來給別人使用的定義，統一都會定義在 lib-controls/src/lib/public-api.ts 檔案內

     • 以下範例為想要將 controls 的 service、component、module 提供給這個 controls 專案下的其他 project 專案使用

       
           export * from './lib/controls.service';
           export * from './lib/controls.component';
           export * from './lib/controls.module';
       
       

     • 定義完成後，在 demo 專案下就都可以使用到，如果有些元件要輸出出來，對應的其他有相依的元件需要一起 export 出來，否則可能會出現以下錯誤訊息

       • This class is visible to consumers via ......., but is not exported from the top-level library entrypoint
   • 擴充 controls 專案內的 lib 元件時，需要在 controls/package.json 定義元件需要引用的套件，並且要特別注意事情如下
     • 要進行 npm install 執行命令時，注意是要在 test-controls 方案的層級進行，千萬別在 lib 專案內進行

3. 建立 專案名稱為 demo 的專案

   • 指令：ng g app demo

部署測試

1. 這樣的專案結構，當要運作 demo 專案前，需要先將 controls lib 專案 build 過一次，demo 專案如果有引用 lib 才能夠正常運作

   • 命令：ng build controls
   • 命令：ng serve demo

2. 如果在建置的過程中，出現 lib 相關的元件找不到，可以有以下幾個方向調整或查詢

   • 確認 controls/src/lib 底下是否有 index.ts，如果沒有可以建立一個，接著複製 controls/src/public-api.ts 內的所有內容到 index.ts 當中再重新建置一次
   • 確認 test-controls 方案下的 tsconfig.json 指向的元件包路徑是否正確
     • 建議開發時期，不要指向 dist 目錄位置，而是直接指向元件專案位置進行測試比較方便

參考資料來源

• ng-packagr - Angular 官網封裝 rollup 的打包工具
• rollup - ReactJs 也可以使用的打包工具