Unable to implement Capacitor in PWA

I have built a PWA only solution (no iOS or Android deployment). I followed, I think, the directions properly for doing this on Capacitor - build cross platform apps with the web

I am running the following:
angular 12.1.1
ionic/angular 5.6.11
capacitor/cli 3.0.2
capacitor/core 3.0.2
typescript 4.3.5
ionic/pwa-elements 1.5.2

I placed src=“capacitor.js” in script tags in the body tag right before the app-root tag, which pulls in the ionic angular code. Note I also tried putting this in the header tag, but got the same results.

This is my capacitor.config.ts conents(which I tried first).

import { CapacitorConfig } from ‘@capacitor/cli’;

const config: CapacitorConfig = {
appId: ‘com.ManifestManager.DTAS.AHRS’,
appName: ‘Manifest Manager’,
webDir: ‘www’,
bundledWebRuntime: true

export default config;

This is my capacitor.config.json, which I tried 2nd. But both give the same results.
“appId”: “com.ManifestManager.DTAS.AHRS”,
“appName”: “Manifest Manager”,
“bundledWebRuntime”: true,
“npmClient”: “npm”,
“webDir”: “www”
To build, I execute:

(1) ionic build --prod

(2) npx cap sync web

(3) firebase deploy

My site (on firebase) is https://manifestmanager.web.app Note that you can see the following error on the console view when the app is loaded: DevTools failed to load source map: Could not parse content for Manifest Manager Unexpected token < in JSON at position 0

This is an error on parsing the capacitor.js.map file. So, the capacitor.js file is not being loaded properly. So, the capacitor plugin calls fail. See error below:

ERROR Error: Uncaught (in promise): Error: “StatusBar” plugin is not implemented on web
Error: “StatusBar” plugin is not implemented on web

I noted from Capacitor - build cross platform apps with the web the following statement: “Capacitor core and plugins build for ES2017.” I have my typescript config targeted for ES2017, though ng guild produces ES2015 files. I’m not sure if this matters.

What can I do to get the capacitor.js file loaded properly into the web app?

To use the Capacitor runtime in a web app that is not using a build system or bundler/module loader

That’s not you. You’re using Angular, which has a build system and bundler. Follow the directions in Using Capacitor as a Module instead.

No script tags.

1 Like