🎍
Angularの File Extension Loader & Import attribute loader を全部試す
㊗️㊗️㊗️ 明けましておめでとうございます! ㊗️㊗️㊗️
@onicode3です。
Angularの File Extension Loader, Import attribute loaderについて記載します。
File Extension Loader とは
Angular 17.1 から File Extension Loader が追加されました。
これは、特定のファイル拡張子を持つファイルをどのように処理するかを制御する機能です。
この設定により、ファイルをインポートしたときの挙動を制御できます。
使い方
File Extension Loader のローダータイプは以下の4つがあります。
- text: ファイル内容を文字列としてインライン化します。
- binary: ファイル内容をUint8Arrayとしてインライン化します。
- file: ファイルをアプリケーションの出力先にコピーし、その実行時のパスを提供します。
- empty: ファイルを空として扱い、バンドルに含めません。
angular.jsonのloader optionで各タイプを拡張子に紐づけます。
angular.json
{
"projects": {
"my-project": {
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"loader": {
".svg": "text",
".jpg": "binary",
".jpeg": "file",
".png": "empty"
},
}
}
}
}
}
}
TypeScriptで型チェックエラーを防ぐためには、追加の型定義ファイルを作成します.
src/types.d.ts
declare module "*.svg" {
const content: string;
export default content;
}
declare module "*.jpeg" {
const content: string;
export default content;
}
declare module "*.png" {
const content: string;
export default content;
}
declare module "*.jpg" {
const content: Uint8Array;
export default content;
}
あとはファイルをimportするだけです。
app.component.ts
import {Component} from '@angular/core';
import jpegIcon from './assets/icon.jpeg';
import pngIcon from './assets/icon.png';
import svgIcon from './assets/icon.svg';
import jpgIcon from './assets/icon.jpg';
@Component({
selector: 'app-root',
imports: [],
template: `
<h1>Loader Option Sample</h1>
<div class="m-4">
<div class="flex flex-col gap-3">
<h3>File extension Svg </h3>
<div class="rounded-md bg-red-50 p-4">
<code>{{ svgIcon }}</code>
</div>
<h3>File extension jpg</h3>
<div class="rounded-md bg-red-50 p-4">
<code>{{ jpgIcon }}</code>
</div>
<h3>File extension Jpeg</h3>
<div class="rounded-md bg-red-50 p-4">
<code>{{ jpegIcon }}</code>
</div>
<h3>File extension Png</h3>
<div class="rounded-md bg-red-50 p-4">
<code>{{ pngIcon }}</code>
</div>
</div>
</div>
`,
})
export class AppComponent {
private readonly decoder = new TextDecoder("utf-8");
protected readonly svgIcon = svgIcon;
protected readonly jpgIcon = this.decoder.decode(jpgIcon).slice(0, 200) + "...";
protected readonly jpegIcon = jpegIcon;
protected readonly pngIcon = JSON.stringify(pngIcon);
}
Import attribute loader とは
File Extension Loader とは別に、Import attribute loader というのもあります。
これはimport文のattributeからLoader Typeを指定する方法です。
下記の3つのローダータイプがあります。
- text: ファイル内容を文字列としてインライン化します。
- binary: ファイル内容をUint8Arrayとしてインライン化します。
- file: ファイルをアプリケーションの出力先にコピーし、その実行時のパスを提供します。
使い方
これを使用するためにはtsconfigにmodule: esnextを設定する必要があります。
tsconfig.json
{
"module": "esnext"
}
その上で下記のようにLoader Typeを指定してimportします。
import svgTextIcon from './assets/icon.svg' with { loader: 'text' };
import svgBinaryIcon from './assets/icon.svg' with { loader: 'binary' };
import svgFileIcon from './assets/icon.svg' with { loader: 'file' };
デモ
実際に File Extension Loader, Import attribute loader を使ってみたデモコードです。
Discussion