[SOLUCIÓN] @ionic-native/splash-screen has missing dependencies

¿Al intentar ejecutar "ionic serve" la consola te muestra el error "[ng] An unhandled exception occurred: The target entry-point "@ionic-native/splash-screen" has missing dependencies:" y no sabes cómo arreglarlo? ¿Sí? Pues quizás esto te interese, sigue leyendo.

Mi nombre es Aitor Sánchez, soy desarrollador de Apps desde 2014, y en este artículo te enseñaré 4 posibles soluciones que harán que tu error desaparezca y, además, que cuando vuelva a aparecer te acuerdes de este artículo para darle otra patada de nuevo.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.

Y ahora si, comenzamos. Let´s go!

¿Por qué te sucede este error?

El error "@ionic-native/splash-screen has missing dependencies" suele aparecer cuando estás intentando usar la librería @ionic-native/splash-screen en un proyecto Ionic, pero no se han instalado o importado todas las dependencias necesarias o no son accesibles.

¿Cómo puedes solucionarlo?

Ahora te explicaré varios métodos para solucionarlo partiendo del menos agresivo hasta terminar en el más agresivo.

1) Comprueba que @ionic-native/splash-screen está instalado

Para solucionar este error, primero asegúrate de tener instalada la librería @ionic-native/splash-screen en tu proyecto. Puedes hacerlo ejecutando el siguiente comando en la consola:

Si utilizar Cordova:

...
npm install @ionic-native/splash-screen
...

Si utilizas Capacitor:

...
npm install @capacitor/splash-screen
...

Luego, asegúrate de importar la librería en el módulo principal de tu aplicación (normalmente app.module.ts) y añadirla a la lista de providers:


...
//Corodva:
import { SplashScreen } from '@ionic-native/splash-screen/ngx';

//Capacitor:
import { SplashScreen } from '@capacitor/splash-screen';

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    // ...
  ],
  providers: [
    SplashScreen
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}
...

Finalmente, asegúrate de inyectar la dependencia en cualquier componente o servicio donde quieras usar la librería:


//Cordova:
import { SplashScreen } from '@ionic-native/splash-screen/ngx';

//Capacitor:
import { SplashScreen } from '@capacitor/splash-screen';

@Component({
  // ...
})
export class MiComponente {
  constructor(private splashScreen: SplashScreen) {
    // ...
  }
}

Con esto deberías poder solucionar el error y empezar a usar la librería @ionic-native/splash-screen en tu proyecto Ionic.

2) Limpia la cache de Ionic y actualiza @ionic-native/splash-screen

Si has seguido todos los pasos que te indiqué y el error persiste, aquí hay algunas posibles soluciones adicionales que puedes probar:

Primero, limpia la caché de tu proyecto con el siguiente comando:


...
ionic cache clean
...

Ahora, asegúrate de que estás utilizando la última versión de la librería @ionic-native/splash-screen. Puedes actualizarla ejecutando el siguiente comando en la consola:

Si utilizas Cordova:

...
npm update @ionic-native/splash-screen
...

Si utilizas Capacitor

...
npm update @capacitor/splash-screen
...

Si estás utilizando múltiples versiones de la librería @ionic-native, asegúrate de que estás importando la versión correcta en cada lugar donde la usas.

Si estás usando Angular, asegúrate de que has instalado e importado todas las dependencias necesarias para Angular en tu proyecto. Esto incluye librerías como @angular/core, @angular/common, etc...

3) Reinstala el core de Ionic

Esta es la que sería la segunda más radical. Tienes que desinstalar el core de Ionic y volverlo a instalar.

Te aconsejo que si vas a utilizar esta opción hagas una copia de seguridad del proyecto antes de ejecutar los comandos.

Los comandos que tienes que ejecutar son estos y en este orden:

npm uninstall -–save @ionic-native/core
npm install –-save @ionic-native/core@latest

4) Reinstala el proyecto completo

Si ninguna de las soluciones anteriores te funciona, prueba eliminando el proyecto completo y volviendo a crearlo desde cero.

A veces, los errores de dependencia pueden ser difíciles de solucionar y la mejor opción es empezar de nuevo.

Pero no seas bestia. Crea un nuevo proyecto vacío, comprueba que funciona y se soluciona el error y después migra todo. Nunca antes, o habrás trabajado dos veces.

Algo más que quizás te interese

Mira, en el momento que tu mejoras el logo de una app que tengas publicada en Google Play, las descargas y los ingresos que esta aplicación genera aumentan. Esto es así. Mejor logo es igual a más dinero.

Basándonos en esto, hemos creado esta herramienta que te permite evaluar, optimizar y mejorar los logos de tus apps para que reciban más descargas. No te quiero espoilear, dentro hay un video explicativo. Entra en el enlace.

Geniete, hasta aquí el artículo de hoy. Espero haberte ayudado y nos vemos en el siguiente artículo. Hasta entonces ¡que te vaya bien!

Cómo solucionar el error "@ionic-native/splash-screen has missing dependencies"