This document explains the details of the project created when using the archetype to create a single page application (SPA) based on the Angular framework. I.e. when you set the frontendModule
option to angular
.
This project was bootstrapped with the Angular CLI.
This application is built to consume the AEM model of a site. It will automatically generate the layout using the helper components from the @adobe/cq-angular-editable-components package.
In the project directory, you can run the following commands.
npm start
This command runs the app in development mode by proxying the JSON model from a local AEM instance running at http://localhost:4502. This assumes that the entire project has been deployed to AEM at least once (mvn clean install -PautoInstallPackage
in the project root).
After running npm start in the ui.frontend directory, your app will be automatically opened in your browser (at path http://localhost:4200/content/${appId}/${country}/${language}/home.html). If you make edits, the page will reload.
If you are getting errors related to CORS, you might want to configure AEM as follows:
npm test
This command launches the Karma test runner. See the Angular documentation about running tests for more information.
npm run test:debug
This command launches the Karma test runner in interactive watch mode.
npm run build
This command builds the app for production to the build folder. It bundles Angular in production mode and optimizes the build for the best performance. See the Angular documentation about deployment for more information.
Furthermore, an AEM ClientLib is generated from the app using the aem-clientlib-generator package.
See the general ui.frontend module documentation for further information about how AEM ClientLibs are used by the project archetype.
By default, this project uses Browserslist’s defaults option to identify target browsers. Additionally, it includes polyfills for modern language features to support older browsers (e.g. Internet Explorer 11). If supporting such browsers isn’t a requirement, the polyfill dependencies and imports can be removed.