Installation Guide For Angular

[Aashishb4u]

Hi Khmyznikov,
Greetings,
I hope this message finds you well.

I want to express my gratitude for creating such an amazing package. I tried to install it on my Angular + Ionic Progressive Web App (PWA). Unfortunately, I found few errors from the node_modules.

During my search for a solution, I discovered that the package is currently only supported for React. I'm reaching out to seek your assistance in installing it for my Angular PWA.

Additionally, I'm interested in contributing to this project and being a part of its development. I would appreciate any guidance or support you can provide.

Thank you,
Aashish Bhagwat, Senior Software Engineer,
[https](url)

[khmyznikov]

@Aashishb4u Hey! Looks like you need to put CUSTOM_ELEMENTS_SCHEMA on Angular side. Since this component is Web Component, no special support is needed for Angular: https://github.com/webcomponents/custom-elements-everywhere/tree/main/libraries/angular/src

[khmyznikov]

Another option is use the component outside of Angular template scope, in HTML:

pwa-install/docs/index.html

Line 108 in 386537f

<pwa-install id="pwa-install" manifest-url="manifest.json"></pwa-install>

But manipulate from Angular, just using document apis.

[khmyznikov]

About TS errors: https://stackoverflow.com/a/45744513

[khmyznikov]

Here is a minimal working code: https://stackblitz.com/edit/aozf92?file=src%2Fapp%2Fpwa-install%2Fpwa-install.component.ts

[Aashishb4u]

Hi khmyznikov,
Thanks for the update. After adding those changes in tsconfig.json, It is working fine. I would suggest to add these findings in README.

Thanks :)

[khmyznikov]

@Aashishb4u don't mind to fork that stackblitz and add a few event hooks or properties for better example? Maybe I can put it also to readme for Angular folks.

[pvo13]

Thank you very much for the component, I added it today to my PWA and got it working with the help of this thread. I just have a tip for Ionic/Angular users.

If you want to use pwa-install on a page that has ion-footer, then you should put it inside the ion-footer section. If you put pwa-install inside of ion-content, the pwa-install still works but some of its content is hidden behind the ion-footer so you cannot use it, e.g. the install button was barely visible and I couldn't click it.

For anybody interested this is my PWA: https://sportsdate.app

[khmyznikov]

@pvo13 feel free to post your app in showcase thread of PWABuilder Discord: https://aka.ms/pwabuilderdiscord