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?