Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Unable to setup Progressive Web App using AEM SPA editor with Angular

Avatar

Level 1

I am trying to setup an SPA in AEM using Angular with PWA features supported.

I have followed the steps mentioned at this link SPA Editor Project | Getting Started with the AEM SPA Editor and Angular | Adobe Experience Manager.

And I was able to setup the SPA using Angular in AEM.

I need to add Progressive Web App features to this setup.

In documentation I found PWA related steps for React but were not able to find anything specific to Angular.

Sample PWA steps for React could be found here Experience League Intelligent Guidance | Adobe (azureedge.net)

 

Version

AEM - 6.5 AMS

SP - 12

Angular - 15

 

We are looking for sample implementation so that it could help us setting up our environment.

 

Thanks,

Juber

1 Accepted Solution

Avatar

Correct answer by
Level 4
3 Replies

Avatar

Correct answer by
Level 4

Avatar

Level 1

Thanks @Harishv31,

 

I have tried the links you mentioned, but it is not what I have asked for.

Avatar

Level 1

@Harishv31 below are the steps which I have done so far.

 

I have followed this documentation Getting Started with the AEM SPA Editor and Angular | Adobe Experience Manager

And was successfully able to launch WKND site within AEM SPA Editor.

 

Also, as mentioned in this article Integrate a SPA | Getting Started with the AEM SPA Editor and Angular | Adobe Experience Manager I was able to launch the standalone Angular app on localhost:4200.

 

However, when I am trying to add Progressive Web App features in my WKND site by using command

"ng add @angular/pwa" by navigating to ui.frontend, getting below error.

 

juber738_0-1673432875461.png

 

 

I have a basic Angular hello-world project in which I ran the same command "ng add @angular/pwa",

it then created and updated some files to add PWA features, and it is working just fine. Then I have copied those changes and added in my AEM SPA codebase with some additional changes, but it is also not working.

 

I have searched in the AEM documentation but unable find anything related to AEM SPA Editor with PWA features.

 

So, I would really appreciate if you/someone could guide me on how to add PWA features in AEM SPA editor using Angular or provide sample implementation so that it could help me setting up my environment.