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

Solved

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

Forum|Forum|3 years ago
January 6, 2023
1 reply
923 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by Harishv31

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-8f8a2c5d3b3cb0adb7a80b701b6129156b7fae3a01109edaa5686197185d101b

Link

Adobe PWA

https://youtu.be/ff5BlpbBB2wv

Thanks

Harishv31Accepted solution

Level 3

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-8f8a2c5d3b3cb0adb7a80b701b6129156b7fae3a01109edaa5686197185d101b

Link

Adobe PWA

https://youtu.be/ff5BlpbBB2wv

Thanks

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