このドキュメントでは、アーキタイプを使用して Angular フレームワークに基づく単一ページアプリケーション(SPA)を作成するプロジェクトの詳細を説明します。例えば、frontendModule
オプションを angular
に設定する場合です。
このプロジェクトは Angular CLI でブートストラップ処理されました。
このアプリケーションは、サイトの AEM モデルを使用するようにビルドされています。これにより、@adobe/cq-angular-editable-components パッケージのヘルパーコンポーネントを使用してレイアウトが自動的に生成されます。
プロジェクトディレクトリで、次のコマンドを実行できます。
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 を設定します。
npm test
このコマンドは、Karma テストランナーを起動します。詳細については、テスト実行に関する Angular のドキュメントを参照してください。
npm run test:debug
このコマンドは、インタラクティブ監視モードで Karma テストランナーを起動します。
npm run build
このコマンドは、実稼動用のアプリケーションを build フォルダーにビルドします。実稼動モードで Angular をバンドルし、最適なパフォーマンスを得るためにビルドを最適化します。詳しくは、デプロイメントに関する Angular のドキュメントを参照してください。
さらに、AEM clientLib は、aem-clientlib-generator パッケージを使用して、アプリから生成されます。
プロジェクトのアーキタイプで AEM clientLibs がどのように使用されるかについて詳しくは、一般的な ui.frontend モジュールのドキュメントを参照してください。
デフォルトでは、このプロジェクトは Browserslist のデフォルトオプションを使用して、ターゲットブラウザーを識別します。また、古いブラウザー(Internet Explorer 11 など)をサポートする最新言語機能のポリフィルも含まれています。このようなブラウザーをサポートする必要がない場合は、ポリフィルの依存関係と読み込みを削除できます。