Como instalar plugins nativos en ionic

Hola a todos, hoy os voy a explicar como instalar plugins nativos en Ionic.

Cuando programamos nuestra aplicación y queremos usar alguna característica concreta de un dispositivo móvil como la cámara, almacenamiento interno, flash, etc.

Para ello, necesitamos instalar un plugin para usar esa característica.

Hoy en día, tenemos dos formas: capacitor y cordova (plugin nativo).

Capacitor es más nuevo y mejor pero el problema es que hay poco contenido de momento.

Cordova es mas antiguo pero tiene muchos mas contenido pero algún que otro puede llegar a ser incompatible.

Entonces, ¿Cuál es mejor? Si podemos usar Capacitor, recomiendo usarlo, en el resto Cordova. Podemos combinar ambas opciones, algo bastante común.

Por ejemplo, vamos a instalar el plugin , puedes ver la documentación desde aquí.

Sino tenemos capacitor incluido, haremos lo siguiente:

$ ionic cordova plugin add cordova-plugin-screen-orientation
$ npm install @ionic-native/screen-orientation

Si tenemos capacitor incluido, haremos lo siguiente:

$ npm install cordova-plugin-screen-orientation
$ npm install @ionic-native/screen-orientation
$ ionic cap sync

Además, en ambos casos necesitamos instalar esta dependencia, ya que a partir de la versión 6 no se incluye en el package.json:

$ npm i @ionic-native/core

Sino sabes como crear un proyecto Ionic, te dejo por aquí un manual.

Crear un proyecto IONIC

Ahora, tanto para cuando tengamos capacitor o no, ya en nuestra aplicación nos vamos al fichero app.module.

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';

// importante el ngx
import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy},
    ScreenOrientation // esto es lo que nos interesa
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

A partir de aquí, ya podemos usar este plugin en donde queramos, os recomiendo ver la documentacion del plugin.

Recuerda que si quieres saber más de Ionic, tengo un curso en udemy muy completo donde te enseño paso a paso todo sobre Ionic realizando aplicaciones.

Aprende IONIC 6 con proyectos prácticos udemy

Espero que os sea de ayuda. Si tenéis dudas, preguntad.

Compartir

1 comentario

  1. Sergio

    Muy buenas, como podemos ver el listado de plugins intalados y como podemos eliminar un plugin?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *