Create Angular Liberary & Demo Project Init
lib & demo
用專案包test-controls
demo
專案名稱:demo
lib
專案名稱:controls
建立方案結構
ng new test-controls --createApplication false
--createApplication
參數 設定為 false
,表示設定為空的專案結構,官網說明projects
目錄底下建立 專案名稱為 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
專案內進行建立 專案名稱為 demo
的專案
ng g app demo
這樣的專案結構,當要運作 demo
專案前,需要先將 controls
lib
專案 build
過一次,demo
專案如果有引用 lib
才能夠正常運作
ng build controls
ng serve demo
如果在建置的過程中,出現 lib
相關的元件找不到,可以有以下幾個方向調整或查詢
controls/src/lib
底下是否有 index.ts
,如果沒有可以建立一個,接著複製 controls/src/public-api.ts
內的所有內容到 index.ts
當中再重新建置一次test-controls
方案下的 tsconfig.json
指向的元件包路徑是否正確
dist
目錄位置,而是直接指向元件專案位置進行測試比較方便