Angular Library を Secondary Entry Points 構成にする

Angular Library を Secondary Entry Points 構成にするための手順をメモ

試したリポジトリ GitHub - kasaharu/try-angular-lib-secondary-entrypoints

新規 application を作成

• Angular CLI を使ってアプリケーションを作成
  • Angular CLI : v9.1.0

$ npx @angular/cli new try-angular-lib-secondary-entrypoints

Library project を作成

• ライブラリを作成する を参考に my-lib という名前で Library project を作る

$ yarn ng generate library my-lib

• projects/my-lib/ が作成される

my-lib の service を app.component で使う

Library side

• my-lib に作られた my-lib.service.ts に debug 用のメソッド実装

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MyLibService {
  constructor() {}

  debug() {
    console.log('MyLibService - debug');
  }
}

• my-lib Library を build

$ yarn build my-lib

Application side

• app.module.ts で MyLibModule を import

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyLibModule } from 'my-lib';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, MyLibModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

• app.component.ts で MyLibService の debug() を実行

import { Component, OnInit } from '@angular/core';
import { MyLibService } from 'my-lib';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private myLibService: MyLibService) {}
  title = 'try-angular-lib-secondary-entrypoints';

  ngOnInit() {
    this.myLibService.debug();
  }
}

• ログが出ることを確認

Secondary Entry Points の作成

• Secondary Entry Points を参考にディレクトリとファイルを用意

作成するもの

• projects/my-lib/ 配下に以下のファイルを用意する

projects/my-lib/testing/
├── package.json
└── src
    ├── lib
    │   ├── my-lib-testing.module.ts
    │   └── my-lib-testing.service.ts
    └── public_api.ts

package.json

{
  "ngPackage": {}
}

public_api.ts

• [※ 注意] ng generate で作られる projects/my-lib/src/ 配下にあるのは public-api.ts だが、ここで作る必要があるファイル名は public_api.ts にしなければならないので注意

export * from './lib/my-lib-testing.service';
export * from './lib/my-lib-testing.module';

my-lib-testing.module.ts

import { NgModule } from '@angular/core';

@NgModule({
  declarations: [],
  imports: [],
  exports: []
})
export class MyLibTestingModule {}

my-lib-testing.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MyLibTestingService {
  constructor() {}

  debug() {
    console.log('MyLibTestingService - debug');
  }
}

• 作成する必要があるファイルはこれで全てなので、再度 Library を build する

application で使うために path を登録

• application で使うためには import path を tsconfig.json に登録する必要があるので、以下の diff の用に変更する
• ※ 注意 my-lib の登録は Angular CLI が自動的にセットしているが、手動で用意した Secondary Entry Points は path の設定も手動でする必要があるので注意

       "my-lib": [
         "dist/my-lib/my-lib",
         "dist/my-lib"
+      ],
+      "my-lib/testing": [
+        "dist/my-lib/testing"
       ]
     }
   },

my-lib/testing の service を app.component で使う

• my-lib の時と同じように app.module.ts と app.component.ts に変更を加える

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyLibModule } from 'my-lib';
import { MyLibTestingModule } from 'my-lib/testing';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, MyLibModule, MyLibTestingModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

app.component.ts

import { Component, OnInit } from '@angular/core';
import { MyLibService } from 'my-lib';
import { MyLibTestingService } from 'my-lib/testing';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(
    private myLibService: MyLibService,
    private myLibTestingService: MyLibTestingService
  ) {}
  title = 'try-angular-lib-secondary-entrypoints';

  ngOnInit() {
    this.myLibService.debug();
    this.myLibTestingService.debug();
  }
}

• my-lib/testing の方のログも期待通り出力されることを確認

参考

• ライブラリを作成する
• Secondary Entry Points