Post Top Ad

Your Ad Spot

jueves, 8 de octubre de 2020

Ionic 5 / Angular - Módulos de carga diferida

 La carga diferida se refiere al proceso de cargar fragmentos de código (como un componente, directiva o canalización) cuando se solicita, no cuando la aplicación se está cargando. El beneficio más obvio de la carga lenta es el mayor rendimiento, especialmente cuando se inicia la aplicación.

Cree un proyecto Ionic 5 / Angular con carga diferida

Para demostrar cómo podemos cargar un componente o página de forma diferida, creemos un nuevo proyecto Ionic 5 basado en Angular y la plantilla en blanco:

ionic start lazy-loading-demo blank 

Navegue dentro del directorio del proyecto y ábralo con su IDE / Editor de código preferido. Estamos usando Visual Studio Code:

code .

Abra el archivo src / app / app.module.ts :

@NgModule({
declarations: [
    MyApp,
    HomePage  
    ],
imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
    MyApp,
    HomePage
],
providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

Como puede ver, hay dos componentes en las declaraciones y las matrices entryComponents. Esto significa que estamos importando dos componentes a nuestro módulo.

Carga diferida del componente Ionic 5 / Angular

Ahora carguemos de forma diferida el componente HomePage para que se pueda cargar solo cuando se solicite.

En primer lugar, elimine todas las referencias a HomePage de nuestro módulo de aplicación, incluida la declaración de importación.

A continuación, debemos darle a HomePage su propio NgModule, así que cree un nuevo archivo src / pages / home / home.module.ts :

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';

@NgModule({
declarations: [
    HomePage,
],
imports: [
    IonicPageModule.forChild(HomePage),
],
exports: [
    HomePage
]
})
export class HomePageModule {}

Nota: También puede eliminar la página de inicio y volver a generarla con la CLI: ionic g page HomePage

Se generará una nueva página con su propio NgModule.

A continuación, agregue el decorador @IonicPage () a HomePage:

import { IonicPage } from 'ionic-angular';

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

Lo último que debe hacer para cargar la página de HomePage de forma diferida es ir a src / app / app.component.ts .

Elimine la declaración de importación de HomePage, luego elimine la referencia a HomePage y reemplácela con la cadena que contiene el nombre de la página, es decir, 'HomePage':

export class MyApp {
rootPage:any = 'HomePage';

Conclusión

Así que hemos visto el proceso de carga diferida de un componente en su aplicación Ionic 5 / Angular que simplemente crea un NgModule para él y lo decora con un decorador IonicPage, luego haga referencia a él con una cadena de su nombre.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas