さらに別の Angular 記事、パーツ構成と環境

前の記事では、コンポーネントを生成する方法を学びました。次に進む前に、構成と環境に関するさまざまな概念を確認する必要があると思います。

設定にはさまざまな種類があります: Angular の動作と TypeScript コンパイラーです。今日は Angular の部分を見ていきます。これはすべて angular.json プロジェクト内にあります。

このファイルはすべてのプロジェクトを記述し、Angular CLI のスキーマに従います: /@angular/cli/lib/config/schema.json

「プロジェクト」が主要部分です。そして、この中には「回路図」と「建築家」が表示されます。

アーキテクトは CLI の動作を説明します: 構築、提供、テストなど

回路図では、コードを生成する方法を説明します。そしてこれが今日私たちがやることです。

これが最初の記事の後の私のものです:

"schematics": {
  "@schematics/angular:component": {
    "style": "scss"
  }
},

スタイルキーとして「scss」が含まれていることがわかります。これは、プロジェクトを作成したときに、cli プロンプトに対して「scss」と応答したためです。

でも、もっとやりたい。通常、私は単一ファイルコンポーネントパターンでコンポーネントを構築することを好みます。これは VueJS と似ています。スタイル、HTML、TypeScript コードを 1 つのファイルにまとめます。これは、小さなコンポーネントを構築する必要があるためです。
これを行うには、次の行を追加します: inlineStyle と inlineTemplate

"schematics": {
  "@schematics/angular:component": {
    "style": "scss",
    "inlineStyle": true,
    "inlineTemplate": true
  }
},

ここで nggenerateComponentmy-new-component を実行すると、typescript ファイルのみが作成されます。

いくつかの最適化を続けます。ベスト プラクティスでは、変更検出を常に「OnPush」に設定する必要があると説明されています。したがって、これはコンポーネントの生成中に行う必要があります。
これを行うには、次の行を追加します:changeDetection

"@schematics/angular:component": {
    "style": "scss",
    "inlineStyle": true,
    "inlineTemplate": true,
    "changeDetection": "OnPush"
  }
},

これで、デフォルトのプロジェクト コード生成の設定が完了しました。

以前の Angular バージョンでは、「standalone: true」を定義できました。しかし、現在はこれがデフォルトの動作となっています。

環境の概念で終わります。アプリケーションを構築するときは、通常 API に依存します。これらの API はローカル (コードを作成しているコンピューター上) で提供されますが、テストサーバー、実稼働前サーバー、または実稼働サーバーで提供することもできます。
したがって、ホスト名を変数に設定する必要があります。

Angular は、この環境に親切なソリューションをもたらします。

環境を生成しない

このコマンドは、プロジェクトに 2 つの新しいファイル (environment.ts とenvironment.development.ts) を追加します
また、ノード「projects.my-new-project.architect.configurations.development」に「fileReplacements」配列を追加することで、angular.json も変更されます

ビルドプロセス中に、必要なenvironment.tsが必要な環境ファイル(environment.development.tsなど)に置き換えられます。

特定の環境変数をすべて内部に保存し、必要な場所にenvironment.tsをインポートできます。ただし、他のenvironment.*.tsは実行時に利用できないため、インポートしないように注意してください!

これは環境のサンプルです:

"schematics": {
  "@schematics/angular:component": {
    "style": "scss"
  }
},

したがって、必要な変数を内部に含む新しい「environment.production.ts」を作成する必要があります。次に、angular.json を変更して、次のように「project.architect.configurations.production」の下に fileReplacements セクションを追加します。

"schematics": {
  "@schematics/angular:component": {
    "style": "scss",
    "inlineStyle": true,
    "inlineTemplate": true
  }
},

私の考えでは、Angular は開発ファイルと運用ファイルの両方を作成する必要がありました。それは少し奇妙です。

ほう、言い忘れていましたが、Angular v19 では起動時にグローバル変数を定義できるようになりました。これは環境の概念に代わるものかもしれませんが、ビルド プロセスでより多くのセットアップが必要です。

良い一日を☁️

[注]すべての記事はAngular v19*のコマンドを使用しています*

以上がさらに別の Angular 記事、パーツ構成と環境の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。