Front-end build voor SPA Angular

In dit document worden de details uitgelegd van het project dat is gemaakt wanneer u het archetype gebruikt om een toepassing van één pagina (SPA) te maken die is gebaseerd op het raamwerk van de Angular. D.w.z. wanneer u de frontendModule optie voor angular.

Overzicht

Dit project is opgestart met de Angular CLI.

Deze toepassing is ontworpen om het AEM van een site te gebruiken. De lay-out wordt automatisch gegenereerd met behulp van de hulplijncomponenten uit de @adobe/cq-angular-editable-components pakket.

Scripts

In de projectfolder, kunt u de volgende bevelen in werking stellen.

npm start

npm start

Met deze opdracht voert u de toepassing uit in de ontwikkelingsmodus door het JSON-model te proxen vanuit een lokale AEM-instantie die wordt uitgevoerd op http://localhost:4502. Dit veronderstelt dat het volledige project aan AEM minstens eens (mvn clean install -PautoInstallPackage in de hoofdmap van het project).

Nadat npm in werking stelt begin in de folder ui.frontend, zal uw app automatisch in uw browser (op weg http://localhost:4200/content/${appId}/${country} worden geopend/${language}/home.html). Als u bewerkingen uitvoert, wordt de pagina opnieuw geladen.

Als u fouten met betrekking tot CORS krijgt, zou u AEM als volgt kunnen willen vormen:

1. Navigeer aan de Manager van de Configuratie (http://localhost:4502/system/console/configMgr)
2. Open de configuratie voor "Adobe Granite Cross-Origin Resource Sharing Policy"
3. Maak een nieuwe configuratie met de volgende aanvullende waarden:
   • Toegestane oorsprong: http://localhost:4200
   • Ondersteunde kopteksten: Toestemming
   • Toegestane methoden: OPTIONS

npm-test

npm test

Met deze opdracht start u de Karma-testruntime. Zie de Documentatie van de angular over het uitvoeren van tests voor meer informatie .

npm run test:foutopsporing

npm run test:debug

Met deze opdracht start u de Karma-testruntime in de interactieve controlemodus.

npm-run-build

npm run build

Met deze opdracht wordt de app voor productie naar de map build gemaakt. Het bundelt Angular in productiemodus en optimaliseert de bouwstijl voor de beste prestaties. Zie de documentatie van de angular over plaatsing voor meer informatie .

Bovendien wordt uit de toepassing een AEM ClientLib gegenereerd met behulp van de aem-clientlib-generator pakket.

Zie de algemene ui.frontend module documentatie voor meer informatie over hoe AEM ClientLibs door het projectarchetype worden gebruikt.

Browserondersteuning

Standaard gebruikt dit project BrowserslistDe standaardinstellingen van de optie om doelbrowsers te identificeren. Bovendien bevat het programma polyvullingen voor functies in moderne talen om oudere browsers (bijvoorbeeld Internet Explorer 11) te ondersteunen. Als het steunen van dergelijke browsers geen vereiste is, kunnen de polyfill gebiedsdelen en de invoer worden verwijderd.