Angularライブラリ開発：アセットを含める方法の比較：`assets` フォルダ vs `ng-packagr` vs その他

Angular ライブラリをビルドする際にアセットを含める方法

アセットを含めるための方法

Angular ライブラリにアセットを含めるには、いくつかの方法があります。

• ng-packagr を使用する
  ng-packagr は、Angular ライブラリをビルドするためのツールです。ng-packagr を使用すると、アセットをライブラリにどのように含めるかをより細かく制御できます。たとえば、特定のアセットを特定のバンドルに含めるように指定できます。
• assets フォルダを使用する
  ライブラリのルートディレクトリに assets という名前のフォルダを作成し、その中にすべてのアセットファイルを配置します。ビルドツールは、このフォルダ内のすべてのファイルを自動的にビルドプロセスに含めます。

アセットを含める際の注意点

アセットを含める際には、以下の点に注意する必要があります。

• アセットファイルは、ビルドプロセスによって圧縮または最小化される可能性があります。
• アセットファイルは、ライブラリを使用するアプリケーションからアクセスできる場所にある必要があります。
• アセットファイル名は、ビルドツールによって認識できる形式である必要があります。

例

以下の例は、assets フォルダを使用してアセットを含める方法を示しています。

src
├── assets
│   ├── images
│   │   └── logo.png
│   └── styles
│       └── styles.css
├── index.ts
└── package.json

この例では、assets フォルダ内に images と styles という2つのサブフォルダがあります。images フォルダには logo.png という画像ファイルがあり、styles フォルダには styles.css というスタイルシートファイルがあります。

ng build コマンドを実行すると、これらのアセットファイルはライブラリのビルドプロセスに含められます。

さらに詳しく知りたい場合

// src/index.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Include assets when building angular library';
}

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

<h1>{{ title }}</h1>

<img src="assets/images/logo.png" alt="Logo">

/* src/app.component.css */

body {
  font-family: sans-serif;
}

h1 {
  color: #333;
}

ビルド結果

ビルドが完了すると、dist フォルダにライブラリのビルド結果が保存されます。このフォルダには、以下のファイルが含まれます。

• assets/images/logo.png: ライブラリの画像ファイル
• styles.css: ライブラリのスタイルシートファイル
• main.js: ライブラリのメインバンドルファイル

これらのファイルをアプリケーションに組み込むことで、ライブラリを使用することができます。

@inlineResource デコレータを使用する

@inlineResource デコレータを使用すると、アセットファイルをコンポーネントのテンプレートに直接埋め込むことができます。これは、小さなアセットファイル (ロゴ画像など) を含める場合に便利です。

// src/app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Include assets when building angular library';

  @inlineResource('assets/images/logo.png')
  logo: string;
}

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

<h1>{{ title }}</h1>

<img src="{{ logo }}" alt="Logo">

この例では、logo プロパティに @inlineResource デコレータを適用しています。このデコレータは、assets/images/logo.png ファイルをコンポーネントのテンプレートに埋め込みます。

loadChildren を使用する

loadChildren プロパティを使用すると、ルーティング構成でアセットファイルをロードできます。これは、複数のアセットを含むモジュールをロードする場合に便利です。

// src/app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./lazy-loading/lazy-loading.module').then(m => m.LazyLoadingModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

// src/lazy-loading/lazy-loading.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { LazyLoadingComponent } from './lazy-loading.component';

@NgModule({
  declarations: [LazyLoadingComponent],
  imports: [
    RouterModule.forChild([
      { path: '', component: LazyLoadingComponent }
    ])
  ],
  exports: [RouterModule]
})
export class LazyLoadingModule { }

<h1>Lazy Loading</h1>

<img src="assets/images/lazy-loading.png" alt="Lazy Loading">

この例では、lazy-loading.module モジュールをロードするために loadChildren プロパティを使用しています。このモジュールは、lazy-loading.component.html テンプレートに assets/images/lazy-loading.png 画像ファイルをロードします。

RAW ファイルを使用する

RAW ファイルを使用すると、アセットファイルをバイナリデータとして含めることができます。これは、フォントファイルやバイナリデータを含むアセットを含める場合に便利です。

// src/app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Include assets when building angular library';

  @ViewChild('font') fontRef: ElementRef;

  ngOnInit() {
    const font = new FontFace('MyFont', 'url("assets/fonts/MyFont.woff2")');
    document.fonts.add(font);

    this.fontRef.nativeElement.style.fontFamily = 'MyFont';
  }
}

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

<p #font>This text is displayed using a custom font.</p>