本文檔將說明在使用原型建立基於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是使用aem-clientlib-generator套件從應用程式產生。
請參閱一般ui.frontend模組檔案,以進一步瞭解專案原型如何使用AEM ClientLibs。
依預設,此專案會使用Browserslist的預設選項來識別目標瀏覽器。 此外,它還包含現代語言功能的填色,以支援舊版瀏覽器(例如Internet Explorer 11)。 如果不需要支援此類瀏覽器,則可移除填色相依性和匯入。