Angular Library

Published in

TKD_giant

2 min readJun 20, 2020

由於最近開發幾個專案，但是發現每一次新專案的service都要重來，每次都重複的動作，覺得效率有點差，因此想說來試試把一些常用的基本service，打包成lib丟到npm上面，所以把一些過程紀錄一下，若有錯誤也請大大不吝賜教。

建專案

ng new angular-lib

ng g library angular-lib --prefix=applib
// 透過 prefix 參數來指定整個 Library 裡元件的前綴，如果沒有設定此參數的話會預設為lib

這裡以component為例子，將元件創建在library中。

ng g c foo --project=tm-lib

將元件加入Library Module，並且需匯出才能被其他Module存取到。

@NgModule({
  declarations: [FooComponent],
  imports: [],
  exports: [FooComponent]
})

元件完成後，若要讓外部取用到Library，要記得到 public_api.ts export出去。

export * from './lib/foo/foo.component';
export * from './lib/angular-lib.module';

建置後可以自行到appModule import，測試看看元件。

ng build angular-lib

假如是第一次使用，請先到npm官網註冊自己的帳號，之後再新增剛剛註冊的使用者。

npm adduser

在Library打包好的資料夾底下直接發布到npm，這裡要注意的是如果要發布的話，library的建置必須使用 ng build angular-lib --prod 來打包，不然會報錯。

cd dist/angular-lib
npm publish