Angular SPA のフロントエンドビルド

このドキュメントでは、アーキタイプを使用して Angular フレームワークに基づく単一ページアプリケーション（SPA）を作成するプロジェクトの詳細を説明します。例えば、frontendModule オプションを angular に設定する場合です。

概要

このプロジェクトは Angular CLI でブートストラップ処理されました。

このアプリケーションは、サイトの AEM モデルを使用するようにビルドされています。これにより、@adobe/cq-angular-editable-components パッケージのヘルパーコンポーネントを使用してレイアウトが自動的に生成されます。

スクリプト

プロジェクトディレクトリで、次のコマンドを実行できます。

npm start

npm start

このコマンドは、http://localhost:4502 で実行されるローカル AEM インスタンスから JSON モデルをプロキシすることで、アプリを開発モードで実行します。これは、プロジェクト全体が少なくとも 1 回 AEM にデプロイされていることを前提としています（プロジェクトルートの mvn clean install -PautoInstallPackage）。

ui.frontend ディレクトリで npm start を実行すると、アプリが自動的にブラウザーで開きます（パス：http://localhost:4200/content/${appId}/${country}/${language}/home.html）。編集すると、ページがリロードされます。

CORS に関連するエラーが発生する場合は、次のように AEM を設定します。

1. 設定マネージャーに移動します（http://localhost:4502/system/console/configMgr）
2. 「Adobe Granite Cross-Origin Resource Sharing Policy」の設定を開きます。
3. 次の値を追加して、新しい設定を作成します。
   • 許可されるオリジン：http://localhost:4200
   • サポートされるヘッダー：Authorization
   • 許可されるメソッド：OPTIONS

npm test

npm test

このコマンドは、Karma テストランナーを起動します。詳細については、テスト実行に関する Angular のドキュメントを参照してください。

npm run test:debug

npm run test:debug

このコマンドは、インタラクティブ監視モードで Karma テストランナーを起動します。

npm run build

npm run build

このコマンドは、実稼動用のアプリケーションを build フォルダーにビルドします。実稼動モードで Angular をバンドルし、最適なパフォーマンスを得るためにビルドを最適化します。詳しくは、デプロイメントに関する Angular のドキュメントを参照してください。

さらに、AEM clientLib は、aem-clientlib-generator パッケージを使用して、アプリから生成されます。

プロジェクトのアーキタイプで AEM clientLibs がどのように使用されるかについて詳しくは、一般的な ui.frontend モジュールのドキュメントを参照してください。

ブラウザーのサポート

デフォルトでは、このプロジェクトは Browserslist のデフォルトオプションを使用して、ターゲットブラウザーを識別します。また、古いブラウザー（Internet Explorer 11 など）をサポートする最新言語機能のポリフィルも含まれています。このようなブラウザーをサポートする必要がない場合は、ポリフィルの依存関係と読み込みを削除できます。