此文档说明了使用原型创建基于 Angular 框架的单页应用程序 (SPA) 时,创建项目的详细信息。即在将 frontendModule
选项设置为 angular
时。
此项目使用 Angular CLI 引导。
构建此应用程序是为了使用网站的 AEM 模型。它会使用 @adobe/cq-angular-editable-components 程序包的帮助程序组件自动生成布局。
在项目目录中,可以运行以下命令。
npm start
此命令通过从在 http://localhost:4502 运行的本地 AEM 实例代理 JSON 模型,在开发模式下运行应用程序。这假定整个项目已至少部署到 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
此命令在构建文件夹中构建用于生产的应用程序。它在生产模式下捆绑 Angular,并优化构建以实现最佳性能。有关更多信息,请参阅有关部署的 Angular 文档。
此外,使用 aem-clientlib-generator 程序包从应用程序生成了 AEM ClientLib。
有关项目原型如何使用 AEM ClientLibs 的更多信息,请参阅常规 ui.frontend 模块文档。
默认情况下,此项目使用 Browserslist 的默认选项来标识目标浏览器。此外,它包括用于现代语言功能的 polyfill 以支持较早的浏览器(例如,Internet Explorer 11)。如果不需要支持这些浏览器,可以删除 polyfill 依赖关系和导入。