'Plugin' does not have web implementation

Version

Capacitor: 1.0.0-beta.6

Description

I’m trying to generate a new custom plugin and performing both iOS and Web implementation for the plugin. Just to test, I’m using the base plugin that is created with npx @capacitor/cli plugin:generate. I’m not modifying any of the codebase of the plugin, then I deploy the plugin to my application, and when I try to execute it in the web with ionic serve, it triggers the following error: Echo does not have web implementation.

I don’t know if I’m just doing something wrong, but I think I’ve followed all the steps and the plugin seems to work in iOS.

Expected

Plugin should not trigger the eror Echo does not have web implementation because it does indeed have the web implementation.

Steps to reproduce

1. Create the new plugin

npx @capacitor/cli plugin:generate with following input:

✏️  Creating new Capacitor plugin
? Plugin NPM name (snake-case): capacitor-echo-plugin
? Plugin id (domain-style syntax. ex: com.example.plugin) com.dellos7.capacitorechoplugin
? Plugin class name (ex: AwesomePlugin) Echo
? description: Capacitor echo plugin
? git repository: https://github.com/Dellos7/capacitor-echo-plugin.git
? author: David López
? license: MIT
? package.json will be created, do you want to continue? Yes

then: cd capacitor-echo-plugin npm install cd ios/Plugin pod install pod update cd ../.. npm run build npm link

1. Deploy the generated plugin to my app:

npm link ../Plugins/capacitor-echo-plugin --save npx cap update (here I put the code to run the plugin in the app, see Code below) ionic serve

When I click in a button to test the plugin, triggers the error Echo does not have web implementation

Code

src/pages/home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Plugins } from '@capacitor/core';
import { Echo } from 'capacitor-echo-plugin';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }

  test() {
    const {Echo} = Plugins;
    Echo.echo({ value: 'Hello!' })
    .then( (res) => {
      console.log('RES: ' + res);
    })
    .catch( (err) => {
      console.error('ERR: ', err);
    });
  }

}

src/pages/home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button block (click)="test()">
    Test
  </button>
</ion-content>

ionic info

cli packages: (/Users/david/.npm-global/lib/node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

local packages:

    @ionic/app-scripts : 3.1.11
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node : v8.11.4
    npm  : 6.4.0
    OS   : macOS High Sierra

Misc:

    backend : legacy

[mlynch]

This has been fixed by adding registerWebPlugin to the default plugin template we ship.

However, to back-port existing plugins, add this at the end of your web.ts:

import { registerWebPlugin } from '@capacitor/core';
registerWebPlugin(MyPlugin);

[moberwasserlechner]

I think I resolved it.

Same as in Android we have to register the custom plugin in the Web/PWA as well.

Find the init component of your app, which is in Angular app.component.ts and register this plugin by

import {registerWebPlugin} from "@capacitor/core";
import {OAuth2Client} from '@teamconductor/capacitor-oauth2';

@Component()
export class AppComponent implements OnInit {

    ngOnInit() {
        console.log("Register custom capacitor plugins");
        registerWebPlugin(OAuth2Client);
        // other stuff
    }
}

After that I can simply call it from the Plugins class like core plugins.

Plugins.OAuth2Client.authenticate({}).then(...).catch();