Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Carregamento Lazy não está funcionando

Bom dia,

Estou cirando um app do zero seguindo o curso.

Ao tentar chamar um componente recebo um erro que a pagina precisa estar declarada em Declarations e entryComponents mesmo declarando no export no próprio módulo do componente.

Código usado:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { CadastroPage } from '../pages/cadastro/cadastro';

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

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { CadastroPage } from './cadastro';

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

Quando faço o bind, estou chamando este método:

ChamaAvancar(){
    this.navCtrl.push(CadastroPage);
  }

Com o this.navCtrl.push(CadastroPage.name) não está funcionando também.

Obrigado desde já.

3 respostas

Boa noite, Jeferson! Como vai?

Quando vc faz this.navCtrl.push(CadastroPage.name) dá o mesmo problema? Outra coisa, como está a sua classe CadastroPage? Cola o código dela aqui para eu poder dar uma olhada.

Grande abraço e bons estudos, meu aluno!

solução!

Boa noite Gabriel, tudo bem.

Quando faço this.navCtrl.push(CadastroPage.name) funcionou depois algumas tentativas.

Ao meu ver consegui usar o Lazy, pois o CadastroPage só está declarado no exports cadastro.module.ts, correto?

cadastro.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { NavLifeCycles } from '../../utils/ionic/nav/nav-lifecycles';

@IonicPage()
@Component({
  selector: 'page-cadastro',
  templateUrl: 'cadastro.html',
})
export class CadastroPage implements NavLifeCycles{

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad(){
    console.log('ionViewDidLoad CadastroPage')
  }
}
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { CadastroPage } from './cadastro';

@NgModule({
  declarations: [
    CadastroPage,
  ],
  imports: [
    IonicPageModule.forChild(CadastroPage),
  ],
  exports:[
    CadastroPage
  ]
})
export class CadastroPageModule {}
app.module

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { CadastroPage } from '../pages/cadastro/cadastro';
import { LoginPage } from '../pages/login/login';
import { UsuariosServiceProvider } from '../providers/usuarios-service/usuarios-service';
import 'rxjs/add/operator/do'

import {IonicStorageModule} from '@ionic/storage'

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    LoginPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot({
      name: 'SistemaEspecialista',
      storeName: 'login',
      driverOrder: ['indexeddb']
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    LoginPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    UsuariosServiceProvider
  ]
})
export class AppModule {}

Boa tarde, Jeferson! Como vai?

Me perdoe a demora na resposta! Mas é isso aí mesmo, vc está correto! Uma forma de vc verificar o lazy loading é fazendo como eu fiz nessa aula a partir de 8:30.

Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software