weweaaa
3/9/2020 - 10:03 AM

0. Create Angular Liberary & Demo Project Init

Create Angular Liberary & Demo Project Init

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. 建立 專案名稱為 controlslib專案

    • 指令:ng g lib controls
    • 所有 lib 專案內要 share 出來給別人使用的定義,統一都會定義在 lib-controls/src/lib/public-api.ts 檔案內
      • 以下範例為想要將 controlsservicecomponentmodule 提供給這個 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 目錄位置,而是直接指向元件專案位置進行測試比較方便

參考資料來源