Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
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.