Angularでサーバサイドレンダリング (SSR) を使用時に発生するエラー「Schema validation failed with the following errors: Data path ".builders['app-shell']" should have required property 'class'」の解決方法

Angularで発生するエラー「Schema validation failed with the following errors: Data path ".builders['app-shell']" should have required property 'class'」の解説と解決方法

原因

このエラーが発生する主な原因は次の2つです。

1. angular.json ファイルの誤り: app-shell プロパティに class プロパティが設定されていない、または設定値が誤っている。
2. Angular CLIのバージョンの問題: 使用しているAngular CLIのバージョンが古い場合、app-shell プロパティの class プロパティが必須項目として認識されないことがあります。

解決方法

まず、angular.json ファイルを開き、builders セクションにある app-shell プロパティを確認します。class プロパティが存在し、正しい値が設定されていることを確認してください。

angular.json ファイルの例

{
  ...
  "builders": {
    ...
    "app-shell": {
      "class": "AppShellBuilder",
      "options": {
        ...
      }
    }
  }
}

Angular CLIのバージョン確認

使用しているAngular CLIのバージョンが古い場合は、最新バージョンにアップデートすることで問題が解決する可能性があります。

ng version

npm update @angular/cli

その他の解決方法

上記の方法で解決しない場合は、以下の方法を試してみてください。

• node_modules フォルダを削除して再インストールする
• プロジェクトをキャッシュから削除する
• 別のバージョンのAngular CLIを試してみる

補足

• このエラーは、Angular 8以降で発生する可能性があります。
• app-shell プロパティは、サーバサイドレンダリング (SSR) を使用する場合にのみ必要です。SSRを使用しない場合は、angular.json ファイルから app-shell プロパティを削除しても問題ありません。

日本語での情報

上記の情報に加えて、日本語で書かれた以下の情報も参考にしてください。

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "my-app": {
      "projectType": "application",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/my-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "optimization": true,
              "output": {
                "filename": "[name].[chunkhash].js"
              }
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "my-app:build",
            "port": 4200
          },
          "configurations": {
            "production": {
              "browserTarget": "my-app:build:production"
            }
          }
        },
        "app-shell": {
          "builder": "@angular-devkit/build-angular:app-shell",
          "options": {
            "browserTarget": "my-app:build",
            "serverTarget": "my-app:server",
            "outputPath": "dist/my-app/app-shell"
          },
          "configurations": {
            "production": {
              "browserTarget": "my-app:build:production"
            }
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/my-app/server",
            "main": "src/main.server.ts",
            "tsConfig": "src/tsconfig.server.json"
          },
          "configurations": {
            "production": {
              "optimization": true,
              "output": {
                "filename": "[name].[chunkhash].js"
              }
            }
          }
        }
      }
    }
  },
  "defaultProject": "my-app"
}

このコードは、app-shell プロパティを使用して、サーバサイドレンダリング用のビルド設定を定義しています。

注意:

• このコードはサンプルコードであり、実際のプロジェクトに合わせて変更する必要があります。

Angularで発生するエラー「Schema validation failed with the following errors: Data path ".builders['app-shell']" should have required property 'class'」の解決方法

@angular/cli のバージョンをダウングレードする

このエラーは、@angular/cli のバージョン 8.0.0以降で発生する可能性があります。使用している @angular/cli のバージョンを 7.x.x にダウングレードすることで、このエラーを回避することができます。

ng build コマンドを実行する際に --no-app-shell オプションを指定することで、app-shell プロパティを無視してビルドを実行することができます。

angular.json ファイルを手動で編集して、app-shell プロパティの class プロパティに正しい値を設定することで、このエラーを解決することができます。

注意事項

• 上記の方法を試しても問題が解決しない場合は、Angular の公式ドキュメントやフォーラムなどで情報を探すことをおすすめします。
• angular.json ファイルを手動で編集する場合は、誤った編集をするとプロジェクトが起動しなくなる可能性があるため、注意が必要です。