Show Menu
主题×

角形SPA的前端构建

本文档介绍了在使用原型创建基于角度框架的单页应用程序(SPA)时创建的项目的详细信息。 即当您将选项设置为
frontendModule
angular

概述

此项目已使用 Angular CLI启动
此应用程序的构建目的是使用站点的AEM模型。 它将使用 @adobe/cq-angular-editable-components包中的帮助组件自动生成布局

脚本

在项目目录中,可以运行以下命令。

npm开始

npm start
此命令通过从运行于http://localhost:4502的本地AEM实例代理JSON模型,在开发模式下运行应用程序。 这假定整个项目已至少部署一次到AEM(在项
mvn clean install -PautoInstallPackage
目根目录中)。
在ui.frontend目录中运行npm开始后,您的应用程序将自动在您的浏览器中打开(路径http://localhost:4200/content/$/$/$/home.html)。 如果进行编辑,页面将重新加载。
如果收到与CORS相关的错误,您可能希望按如下方式配置AEM:
  1. 导航到配置管理器(http://localhost:4502/system/console/configMgr)
  2. 打开“Adobe Granite跨源资源共享策略”的配置
  3. 使用以下附加值创建新配置:
    • 允许的来源:http://localhost:4200
    • 支持的标题:授权
    • 允许的方法:选项

npm测试

npm test
此命令将启动Karma测试运行器。 有关详细 信息,请参阅有关运行测试的Angular文档

npm运行测试:调试

npm run test:debug
此命令在交互式监视模式下启动Karma test runner。

npm运行内部版本

npm run build
此命令将生产应用程序构建到内部版本文件夹。 它将Angular捆绑在生产模式中,并优化内部版本以获得最佳性能。 有关详细 信息,请参阅有关部署的Angular 文档。
此外,使用aem-clientlib-generator包从应用程序 生成AEM ClientLib
有关项目原型 如何使用AEM ClientLibs的更多信息 ,请参阅常规ui.frontend模块文档。

浏览器支持

默认情况下,此项目使用 Browserslist 的默认选项来标识目标浏览器。 此外,它还包含现代语言功能的填充功能以支持旧版浏览器(例如Internet Explorer 11)。 如果不需要支持此类浏览器,则可以删除多填充依赖关系和导入。