angular.jsonファイルの説明（コード例）

この記事では、angular.json ファイルについての説明 (コード例) を紹介します。必要な方は参考にしていただければ幸いです。

Angular CLI 6 バージョン以降、元の angular-cli.json は angular.json に置き換えられ、そのフィールドは大幅に変更されました。基本的な構成を理解していない場合は、直接コピーしてください。古いバージョンのコードを新しいバージョンのワークスペースに挿入すると、非常に不親切なエラーが発生します。

この変更は主に、Angular CLI によるモノリポ (1 つのスペースで複数のプロジェクトを管理) 開発モデルの導入によるものです。つまり、ng new の使用は、angular.json を通じて管理される大規模なワークスペースと同等です。 ng からのさまざまなプロジェクトまたはコンポーネント ライブラリ | 構成。

実際、このモデルの利点は非常に明白です。たとえば、企業に複数の管理プラットフォームや製品がある場合、この方法により各プロジェクトの環境を統合でき、各プロジェクト間でコンポーネントを共有することもできます。均一に維持されるため、すべてのプロジェクトが npm パッケージと typescript 設定を共有します。

モノリポジトリの構造は次のとおりです:

しかし実際には、ほとんどの人は依然として 1 つのワークスペースで 1 つのプロジェクトを維持しているため、これはここには含まれていません。非常に重要なので、json ファイルへの変更は新しいモデル用であることだけを述べておきたいと思います。

Angular.json の一部のフィールド

新しいワークスペースを作成すると、プロジェクトと対応する e2e プロジェクトがデフォルトでルート ディレクトリに作成されます。初期の angular.json 構造は次のとおりです (構成コードの一部は省略されています)

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "xxxx": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "prefix": "app",
            "schematics": {},
            "architect": {}
        }
    },
    "defaultProject": "xxxx"
}

これらは、後で簡単に参照できるように、構成プロパティの一部を順番に記録します。

$schema

は、angular.json のすべてのフィールドと制約を記述する JSON スキーマ ファイルを指します。

実際、この機能をサポートする IDE またはエディターが angular.json ファイルを作成するときに対応するプロンプトを表示する限り、これは「タイプ プロンプト」機能を持つファイルと比較できます。

version

バージョンの設定

newProjectRoot

新しいプロジェクトが配置されるパス。

ng 生成アプリケーション ライブラリを使用して新しいプロジェクトを作成すると、設定された newProjectRoot ディレクトリに自動的にアセンブルされます

projects

Place Configurationすべてのプロジェクトの。プロジェクトの 1 つはサブ項目です。たとえば、xxxx はプロジェクトの作成時に自動的に生成されます。

{
    "projects": {
        "xxxx": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "prefix": "app",
            "schematics": {},
            "architect": {}
        }
    }
}

単一の構成では、柔軟な構成と CLI に組み込まれたいくつかのコマンドを通じて、一部の自動化された操作を実装できます。

root

は、プロジェクトの「ルート ディレクトリ」、つまりプロジェクトの場所、またはプロジェクト ソース コードの親ディレクトリを表します。プロジェクトのルート ディレクトリには、特定の構成が含まれています。

sourceRoot

プロジェクトのソース コードが配置されているディレクトリ。通常は src ディレクトリがデフォルトで使用されます。

projectType

このプロジェクトがアプリケーションであるかライブラリであるかを示します

prefix

Use ngコンポーネントを生成する | ディレクティブがコンポーネントまたは命令を生成するときのデフォルトのセレクター接頭辞。通常、コマンドを使用して作成するコンポーネントまたは命令は、プロジェクト全体を有効にするためにここで手動で変更できます。

schematics

コンポーネント、命令、モジュール、その他のファイルを生成するための CLI の命令は、@angular-devkit/schematics を使用して実装されます。これらの命令には通常、いくつかの命令が付属しています。たとえば、コンポーネントを生成するコマンド: ng g c --spec=false --styleext=scss。このコマンドは、テスト ファイルを使用せず、スタイル ファイルとして scss を使用してコンポーネントを直接生成できます。これらの設定を毎回手動で入力するのは面倒なので、angular.json ではクラス生成のためのいくつかのコマンド設定を統一的に設定するための Schemas 属性を提供しています。

ここにある回路図は単一のプロジェクトのものです。 angular.json 全体にもこのフィールドがあり、デフォルトですべてのプロジェクトで有効になります。

CLI はいくつかのオプション セットをプリセットしており、さまざまなオプションを構成できます:

@schematics/angular:component

@schematics/angular:class

@schematics/angular:directive

@schematics/angular:guard

@schematics/angular:module

#@schematics/angular:pipe

#@schematics /angular:service

コンポーネントを例として挙げます。統合された ng g c --spec=false --styleext=scss の効果を実現したい場合は、次のように構成できます。 ##その後、 ng g c を直接使用して、対応するコンポーネントを直接生成できます。

architect

ローカル実行、コンパイル、テストなど、CLI 関連のプロジェクト自動化コマンド構成のいくつかのセットが含まれています。 build、serve など、コマンド設定のいくつかのセットがデフォルトでプリセットされています。

{
    "schematics": {
        "@schematics/angular:component": {
             "styleext": "less",
             "spec": false
        }
    }
}

設定属性

各設定項目には 3 つのフィールド属性があります: builder、serve、 options 、デフォルトのビルド コマンド構成などの構成:

{
    "architect":{
        "build":{},
        "serve":{},
        "extract-i18n":{},
        "test":{},
        "lint":{}
    }
}

これは、プロジェクトによってデフォルトで生成される構成です。

builder代表要执行的内置程序，因为CLI内置了一些自动化工具，architect只是提供了一个facade模式（通俗地讲，就是开发者不需要知道内部的复杂实现）给开发者配置使用，本质上还是调用的内置工具。

options代表针对当前builder要配置的配置项，调用不同的内置程序，是需要传对应的配置项的，由于配置项很多，这里也不会列出。

configurations代表这个命令的多种调用模式，在此配置里，我们可以定义不同的别名，然后使用不同的配置（配置的字段还是属于options里的），最后在使用命令时便可以手动选择不同的模式。

如何使用

CLI其实内置了几个快捷命令来对应默认生成的配置如ng serve、ng build等等，如果是我们额外自定义的配置，则可以使用ng run :[:configurations] [其他配置]
命令来实现，其中project和architect为必填，configurations为选填。

比如我们简单额外自定义一个本地运行的服务器命令：

{
    "architect":{
        "myServe":{
            "builder": "@angular-devkit/build-angular:dev-server",
            "options": {
                "browserTarget": "xxxx:build",
                "port": 8800
            },
            "configurations": {
                "port1": {
                    "port": 8801
                },
                "port2": {
                    "port": 880
                }
            }
        }
    }
}

配置使用了内置的运行本地服务器程序，然后使用默认的build配置，加上自定义的运行端口，另外加上两个不同模式，运行不同端口。

使用ng run xxxx:myServe可以正常运行本地服务器跑项目，端口是8800
使用ng run xxxx:myServe:port1端口是8801

当然，我们还可以直接使用额外的命令行配置直接覆盖已经定义的配置：
ng run xxxx:myServe:port1 --port=8808

这里的例子只是为了简单了解下architect的用法。

defaultProject

默认项目，当使用一些CLI命令没有指定项目名称时，默认指向的项目。

schema.json

其实我只是为了记录自己有点印象的属性，整个angular.json还有很多其他的字段，如果想要全面了解，我们可以直接打开$schema所指向的文件，里面详细地展示了各种字段的类型、配置以及描述说明。

以上がangular.jsonファイルの説明（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。