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

[juber738]

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

[Harishv31 · Accepted solution]

Hi ,

Can you please find below links related to pwa.

https://shinesolutions.com/2018/07/13/an-introduction-to-angular-progressive-web-applications/ 

http://www.aemcq5tutorials.com/tutorials/integrate-pwa-with-aem-using-headless-cms/ 

https://www.albinsblog.com/2022/03/progressive-web-apps-pwas-in-aemadobe.html#.Y7f_g3ZByF4 

code:

https://github.com/Adobe-Marketing-Cloud/aem-guides-wknd-events/pull/74/files#diff-8f8a2c5d3b3cb0adb... 

Link

Adobe PWA

https://youtu.be/ff5BlpbBB2wv 

Thanks

[juber738]

Thanks @Harishv31,

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

[juber738]

@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.

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.