How to add in ionic 5 Lottie Splash Screen with capacitor?

Question

I need to integrate cordova's lottie splash plugin into my ionic capacitor app. Integrating it does not work.

The idea is to show the lottie splash when the view starts but I can't get it to work.

Code where I implement it.

import { Component, OnInit } from '@angular/core';
import { MenuController,  } from '@ionic/angular';
import { Plugins } from '@capacitor/core';
import { LottieSplashScreen } from '@ionic-native/lottie-splash-screen/ngx';

const { Browser } = Plugins;

@Component({
  selector: 'app-inicio',
  templateUrl: './inicio.page.html',
  styleUrls: ['./inicio.page.scss'],
})
export class InicioPage implements OnInit {

  constructor(private menuCtrl: MenuController, private lottieSplashScreen: LottieSplashScreen) { }

  ngOnInit() {
    this.lottieSplashScreen.show('www/lottie/assets/animation.json', false, 1024, 768);
    this.lottieSplashScreen.hide();
   }
  toggleMenu() {
    this.menuCtrl.toggle();
  }
  async openBrowser() {
    //link browser
  }
}

This is my code app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { LottieSplashScreen } from '@ionic-native/lottie-splash-screen/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [ BrowserModule, IonicModule.forRoot(), AppRoutingModule ],
  providers: [
    LottieSplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Any idea why this happens?

Answer 1

Is not supported today, read this post from plugins creator

https://github.com/timbru31/cordova-plugin-lottie-splashscreen/issues/188#issuecomment-607204526