Capacitor: Cannot register my capacitor plugin in any of the capacitor app

Created on 11 Sep 2019  路  5Comments  路  Source: ionic-team/capacitor

I have generated the plugin for AES256 encryption. i have installed it using npm install "foldername" in local.But when i register that plugin in capacitor app

i have received

Argument of type 'AES256Web' is not assignable to parameter of type 'WebPlugin'. Types have separate declarations of a private property 'addWindowListener'

But i have created this plugin by extending Webplugin class

Here my web.ts file in plugin

import { WebPlugin } from '@capacitor/core';
import { AES256Plugin } from './definitions';

export class AES256Web extends WebPlugin implements AES256Plugin {
constructor() {
super({
name: 'AES256',
platforms: ['web', 'Android', 'iOS']
});
}

async encrypt(options: { secureKey: string, action: string, secureIv: string, value: string }): Promise<any> { return options; } }

const AES256 = new AES256Web(); import { registerWebPlugin } from '@capacitor/core'; registerWebPlugin(AES256);

export { AES256 };

my app.component.ts file in capacitor app

import { Component, OnInit } from '@angular/core';
import {registerWebPlugin} from "@capacitor/core";
import { AES256 } from 'cordova-plugin-aes256-encryption';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import {OAuth2Client} from '@byteowls/capacitor-oauth2';
@Component({ selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.scss'] })
export class AppComponent implements OnInit {
constructor( private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar
) {
this.initializeApp(); }
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
ngOnInit() {
registerWebPlugin(AES256);
} }

I have received this error in app.component.ts file

ngOnInit() { registerWebPlugin(AES256); }

package.json file in capacitor app

{
"name": "Fund-Request",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/common": "~8.1.2",
"@angular/compiler": "~8.1.2",
"@angular/core": "~8.1.2",
"@angular/forms": "~8.1.2",
"@angular/platform-browser": "~8.1.2",
"@angular/platform-browser-dynamic": "~8.1.2",
"@angular/router": "~8.1.2",
"@byteowls/capacitor-oauth2": "1.0.0",
"@capacitor/android": "^1.1.1",
"@capacitor/cli": "1.1.1",
"@capacitor/core": "1.1.1",
"@capacitor/ios": "^1.1.1",
"@ionic-native/core": "^5.0.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^4.7.1",
"@ionic/pro": "2.0.4",
"capacitor-media": "0.0.5",
"cordova-plugin-aes256-encryption": "file:../../AES256/Capacitor-plugin/cordova-plugin-aes256-encryption",
"core-js": "^2.5.4",
"rxjs": "~6.5.1",
"tslib": "^1.9.0",
"zone.js": "~0.9.1",
"typescriopt":"^3.5.4"
},
"description": "An Ionic project"
}

Most helpful comment

I resolved the issues by removing the web.tsfile and ignored the tsc error inside the definitions.ts file.

// add this line to ignore tsc errors to fix the issue
// @ts-ignore
declare module '@capacitor/core' {
  interface PluginRegistry {
    FaceId: FaceIdPlugin;
  }
}

export interface FaceIdPlugin {
  isAvailable(): Promise<{ value: boolean }>;
  auth(options?: { reason?: string }): Promise<void>;
}

Check out my example repo: https://github.com/danielsogl/capacitor-face-id

All 5 comments

I noticed the same problem. It papered after several builds out of nowhere and I had to use the old way import { AppRate } from 'capacitor-app-rate'; to use my own plugins.

My repo: https://github.com/danielsogl/capacitor-app-rate

@danielsogl I have also imported my plugin like you said.

import { AES256 } from 'cordova-plugin-aes256-encryption';

But still the error came out.

Argument of type 'AES256Web' is not assignable to parameter of type 'WebPlugin'. Types have separate declarations of a private property 'addWindowListener'

AES256 is also extends the base class 'WebPlugin'

Is there anything missing other than this?

I resolved the issues by removing the web.tsfile and ignored the tsc error inside the definitions.ts file.

// add this line to ignore tsc errors to fix the issue
// @ts-ignore
declare module '@capacitor/core' {
  interface PluginRegistry {
    FaceId: FaceIdPlugin;
  }
}

export interface FaceIdPlugin {
  isAvailable(): Promise<{ value: boolean }>;
  auth(options?: { reason?: string }): Promise<void>;
}

Check out my example repo: https://github.com/danielsogl/capacitor-face-id

@danielsogl Thanks man### Now working fine..Can you give me some suggestions on #1945?

closing since you resolved your issue by following danielsogl suggestion

Was this page helpful?
0 / 5 - 0 ratings

Related issues

TayKara picture TayKara  路  3Comments

Kepro picture Kepro  路  3Comments

MatanYadaev picture MatanYadaev  路  3Comments

natevw picture natevw  路  3Comments

daniel-lucas-silva picture daniel-lucas-silva  路  3Comments