How to include @ionic/pwa-elements in an Ionic4/Angular build

Question

I’m new to Ionic4, but have been using Angular for some time so am currently experimenting with an Ionic4/Angular app.

I’ve been looking to integrate capacitor to access native functionality from a PWA, and I’ve got some tests working with the camera plugin, however I have to include a reference to an external pwa-elements script in my index.html as per: https://capacitor.ionicframework.com/docs/getting-started/pwa-elements/

This is no good if I want the app to be able to work offline, so I’m trying to get this imported and bundled within the Ionic/Angular build, but it’s not clear from the docs how to do that in an Angular context.

I’ve added “import ‘@ionic/pwa-elements’;” to my app.module.ts, but that doesn’t seem to work (I just get this issue). I’ve tried manually referencing the ionicpwaelements.js script in the scripts section of my angular.json file, but ionicpwaelements.js references a bunch of other js files in the ‘ionicpwaelements’ sub directory in node modules, which it can’t find (and would be too arduous to reference them all).

How do I import ionic/pwa-elements into an Ionic4/Angular app?

Answer 1

I think you saw my answer on the Github thread already, but will post it here for anyone else that doesn't want to sift through that thread:

Since @ionic/pwa-elements are Stencil web components, it can be included in an Ionic 4 + Angular project via the process outlined in Angular integration with Stencil:

src/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import { defineCustomElements } from '@ionic/pwa-elements/dist/loader';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

defineCustomElements(window);

The CameraModal component relies on a few svg files for icons and neighbouring scripts. angular.json can be modified to include those assets on build:

angular.json

/* ... */
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            /* ... */
            "assets": [
              {
                "glob": "**/*.svg",
                "input": "node_modules/@ionic/pwa-elements/dist/ionicpwaelements/icons",
                "output": "icons"
              },
              /*** Including the scripts below breaks Ionic Modals, but without them, you'll get a 404 error ***/
              {
                "glob": "**/*.js",
                "input": "node_modules/@ionic/pwa-elements/dist/ionicpwaelements",
                "output": "ionicpwaelements"
              },
/* ... */

The Ionic Modals being broken happens with the external script reference in index.html as well, so that appears to be a separate issue that hasn't been resolved yet.