ng build コマンドの --assets オプションを使用してAngular CLIビルドにカスタムファイルを含める
Angular CLIビルドにカスタムファイルを含める方法
しかし、場合によっては、アプリケーションに独自のファイルを含める必要がある場合があります。例えば、独自の CSS ファイル、画像、またはフォントファイルを含める必要がある場合があります。
Angular CLIビルドにカスタムファイルを含める方法はいくつかあります。
assets フォルダを使用する
Angular CLIは、assets フォルダ内のすべてのファイルを自動的にビルドプロセスに含めます。assets フォルダは、src フォルダと同階層にあります。
カスタムファイルを assets フォルダに追加するには、次の手順に従います。
assetsフォルダを作成します (まだ存在しない場合)。- アプリケーションコードでファイルを参照します。
例えば、assets フォルダに custom.css という名前のカスタム CSS ファイルを追加する場合、次のコードを使用してアプリケーションコードから参照できます。
<link rel="stylesheet" href="assets/custom.css">
angular.json ファイルは、Angular CLIビルド設定を定義するファイルです。このファイルを使用して、ビルドプロセスに含めるカスタムファイルを明示的に指定できます。
angular.jsonファイルを開きます。"assets"プロパティを見つけます。"glob"配列に、含めるカスタムファイルの glob パターンを追加します。
例えば、assets フォルダ内のすべての .css ファイルを含めるには、次のコードを追加します。
"assets": [
"**/*.css"
]
ng build コマンドの --assets オプションを使用して、ビルドプロセスに含めるカスタムファイルを指定できます。
--assets オプションを使用するには、次のコマンドを実行します。
ng build --assets=path/to/custom/files
このコマンドは、path/to/custom/files フォルダ内のすべてのファイルをビルドプロセスに含めます。
ng-packagr は、Angularアプリケーションをライブラリまたはモジュールとしてパッケージ化するツールです。ng-packagr を使用して、カスタムファイルをアプリケーションパッケージに含めることができます。
ng-packagr を使用するには、次の手順に従います。
ng-packagrをインストールします。
npm install ng-packagr --global
{
"$schema": "./node_modules/ng-packagr/lib/config/schema.json",
"lib": {
"entryFile": "src/index.ts"
},
"assets": [
"assets/**/*"
]
}
ng-packagrを使用してアプリケーションをパッケージ化します。
ng-packagr
このコマンドは、dist フォルダにアプリケーションパッケージ (my-app.tgz) を生成します。このパッケージには、カスタムファイルを含め、アプリケーションのすべての必要なファイルが含まれます。
これらの方法のいずれを使用しても、Angular CLIビルドにカスタムファイルを含めることができます。ニーズに最適な方法を選択してください。
assets フォルダを使用する
<link rel="stylesheet" href="assets/custom.css">
/* assets/custom.css */
body {
background-color: #ccc;
}
angular.json ファイルを使用する
// angular.json
{
"projects": {
"my-app": {
"architect": {
"build": {
"options": {
"assets": [
"**/*.css"
]
}
}
}
}
}
}
/* assets/custom.css */
body {
background-color: #ccc;
}
ng build コマンドの --assets オプションを使用する
ng build --assets=path/to/custom/files
/* path/to/custom/files/custom.css */
body {
background-color: #ccc;
}
ng-packagr を使用する
// ng-packagr.config.json
{
"$schema": "./node_modules/ng-packagr/lib/config/schema.json",
"lib": {
"entryFile": "src/index.ts"
},
"assets": [
"assets/**/*"
]
}
/* assets/custom.css */
body {
background-color: #ccc;
}
ng-packagr
Angular CLIビルドにカスタムファイルを含めるその他の方法
@ng-bootstrap/ng-bootstrap ライブラリは、BootstrapコンポーネントとディレクティブをAngularアプリケーションに簡単に統合するためのライブラリです。このライブラリには、独自の CSS ファイルとフォントファイルが含まれています。
@ng-bootstrap/ng-bootstrap ライブラリを使用するには、次の手順に従います。
npm install @ng-bootstrap/ng-bootstrap --save
- アプリケーションモジュールに
NgbModuleをインポートします。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
imports: [
BrowserModule,
NgbModule
],
declarations: [
AppComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
<button type="button" class="btn btn-primary">Primary</button>
@ng-bootstrap/ng-bootstrap ライブラリは、Bootstrapコンポーネントとディレクティブを簡単に使用できる便利な方法を提供します。
ng-add ワークスペースコマンドは、Angularアプリケーションに新しい機能を追加するためのコマンドです。このコマンドを使用して、カスタムファイルを含む新しい機能を追加できます。
ng-add ワークスペースコマンドを使用するには、次の手順に従います。
ng addワークスペースコマンドを実行します。
ng add my-custom-package
- プロンプトが表示されたら、カスタムファイルの場所を指定します。
ng add ワークスペースコマンドは、カスタムファイルを含む新しい機能を簡単に追加できる便利な方法を提供します。
手動でビルドプロセスにファイルを追加する
上記の方法のいずれにも満足できない場合は、手動でビルドプロセスにファイルを追加できます。
これを行うには、次の手順に従います。
"build"プロパティに、カスタムファイルを含む新しいビルドステップを追加します。
"scripts": {
"build": "ng build --prod --assets=assets/**/*.css"
}
手動でビルドプロセスにファイルを追加することは、柔軟性がありますが、複雑になる可能性があります。
Angular CLIビルドにカスタムファイルを含めるには、いくつかの方法があります。ニーズに最適な方法を選択してください。
angular angular-cli
