Front-End Build för Angular SPA

I det här dokumentet beskrivs detaljerna för det projekt som skapas när du använder en arkivtyp för att skapa ett enda SPA baserat på ramverket för Angular. Det vill säga när du anger frontendModule som angular.

Översikt

Det här projektet startades med Angular-CLI.

Det här programmet är utformat för att förbruka en webbplats AEM modell. Layouten genereras automatiskt med hjälpkomponenterna från @adobe/cq-angular-editable-components-paketet.

Skript

I projektkatalogen kan du köra följande kommandon.

npm start

npm start

Med det här kommandot körs programmet i utvecklingsläge genom att JSON-modellen proxeras från en lokal AEM som körs på http://localhost:4502. Detta förutsätter att hela projektet har distribuerats till AEM minst en gång (mvn clean install -PautoInstallPackage i projektets rot).

När npm har startats i katalogen ui.front öppnas appen automatiskt i webbläsaren (på sökvägen http://localhost:4200/content/${appId}/${country}/${language}/home.html). Om du gör ändringar läses sidan in igen.

Om du får felmeddelanden relaterade till CORS kan du konfigurera AEM enligt följande:

  1. Navigera till Configuration Manager (http://localhost:4502/system/console/configMgr)
  2. Öppna konfigurationen för Resursdelningspolicy för korsursprung i Adobe Granite
  3. Skapa en ny konfiguration med följande ytterligare värden:
    • Tillåtna ursprungsobjekt: http://localhost:4200
    • Rubriker som stöds: Behörighet
    • Tillåtna metoder: OPTIONS

npm-provning

npm test

Detta kommando startar Karma test runner. Mer information finns i dokumentationen till Angularna om hur du kör test.

npm run test:debug

npm run test:debug

Det här kommandot startar Karma-testkörningen i interaktivt bevakningsläge.

npm run build

npm run build

Med det här kommandot byggs programmet för produktion till byggmappen. Det paketerar Angular i produktionsläge och optimerar bygget för bästa prestanda. Mer information finns i Angularnas dokumentation om distribution.

Dessutom genereras en AEM ClientLib från programmet med aem-clientlib-generator-paketet.

Mer information om hur AEM ClientLibs används av projektets arkityp finns i den allmänna dokumentationen ui.front-modulen .

Webbläsarstöd

Som standard används standardalternativet BrowserList för att identifiera målwebbläsare i det här projektet. Dessutom innehåller det polyfyllningar för moderna språkfunktioner som stöder äldre webbläsare (t.ex. Internet Explorer 11). Om stöd för sådana webbläsare inte krävs kan polyfyllningsberoenden och importer tas bort.

På denna sida