Create 2 new projects, one a plugin and one a ionic capacitor project. Angular 19, Capacitor 6
Added the newly create plugin to my project.
Running on the web and the plugin correctly works (using the default generated ‘echo’ method)
Added android to my project and the app builds ok but when running I get a null injection error from the javascript code which means my UI does not load.
What am I missing?
Error
2024-12-20 11:37:32.801 27189-27252 VideoCapabilities io.ionic.starter W Unsupported mime image/vnd.android.heic
2024-12-20 11:37:32.807 27189-27252 VideoCapabilities io.ionic.starter W Unsupported mime image/vnd.android.heic
2024-12-20 11:37:32.988 27189-27189 Capacitor/Console io.ionic.starter E File: - Line 812 - Msg: NullInjectorError: R3InjectorError(Platform: core)[t -> Cr]:
NullInjectorError: No provider for Cr!
2024-12-20 11:37:32.994 27189-27189 Capacitor/Console io.ionic.starter E File: https://localhost/main.d36cdf0566530698.js - Line 1 - Msg: Uncaught NullInjectorError: R3InjectorError(Platform: core)[t -> Cr]:
NullInjectorError: No provider for Cr!
2024-12-20 11:37:33.000 27189-27236 Capacitor io.ionic.starter D Handling local request: https://localhost/assets/icon/favicon.png
2024-12-20 11:37:33.006 27189-27189 Capacitor io.ionic.starter E JavaScript Error: {"type":"js.error","error":{"message":"Uncaught NullInjectorError: R3InjectorError(Platform: core)[t -> Cr]: \n NullInjectorError: No provider for Cr!","url":"https://localhost/main.d36cdf0566530698.js","line":1,"col":130629,"errorObject":"{\"name\":\"NullInjectorError\",\"ngTempTokenPath\":null,\"ngTokenPath\":[\"t\",\"Cr\"]}"}}
The code to access the plugin in the component is as below (I will be implemeting an option to get a barcode but that is currently commented out)
import { Component } from '@angular/core';
import { Plugin } from '@capacitor/core';
import { ZebraBarcode } from 'zebrabarcode';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
standalone: false,
})
export class HomePage {
public barcode = "N/A";
constructor() {}
scanBarcode() {
console.log("get barcode");
this.barcode = "Getting barcode dummy...";
ZebraBarcode.echo({value : "test"}).then();
// ZebraBarcode.getBarcode().then(res => {
// console.log("res",res)
// this.barcode = res.value;
// })
}
}
In the Android debug log I can see my plugin being loaded (called ZebraBarcode)
2024-12-20 11:37:32.247 27189-27189 Capacitor io.ionic.starter D Starting BridgeActivity
2024-12-20 11:37:32.278 27189-27189 Capacitor io.ionic.starter D Registering plugin instance: CapacitorCookies
2024-12-20 11:37:32.283 27189-27189 Capacitor io.ionic.starter D Registering plugin instance: WebView
2024-12-20 11:37:32.286 27189-27189 Capacitor io.ionic.starter D Registering plugin instance: CapacitorHttp
2024-12-20 11:37:32.289 27189-27189 Capacitor io.ionic.starter D Registering plugin instance: App
2024-12-20 11:37:32.291 27189-27189 Capacitor io.ionic.starter D Registering plugin instance: Haptics
2024-12-20 11:37:32.295 27189-27189 Capacitor io.ionic.starter D Registering plugin instance: Keyboard
2024-12-20 11:37:32.297 27189-27189 Capacitor io.ionic.starter D Registering plugin instance: StatusBar
2024-12-20 11:37:32.302 27189-27189 Capacitor io.ionic.starter D Registering plugin instance: ZebraBarcode
2024-12-20 11:37:32.319 27189-27189 Capacitor io.ionic.starter W Unable to read file at path public/plugins```