Lazy loading problems

Ionic Framework ionic-v3
1

I am facing same issue after achieving lazy loading using ionic3.

I refer IonicPage docs and i found that we can also pass some optional params to IonicPage.

Expect Behaviour: As we need to load some module initially after application boot process complete.

And I used preloadModules: true,

Preloading eagerly loads all deep links after the application boots instead of on demand as needed.

Everything is working fine but there is some minor issue with ion-icon.

  1. When i use
<ion-icon name="ios-calendar"></ion-icon>

it shows icon but when i change icon name to calendar only it doesn’t show anything.

  1. When i use
<button ion-button menuToggle>
  <ion-icon name="ios-menu"></ion-icon>
</button>

It doesn’t show toggle button in header. When i remove menuToggle attribute from button, It shows toggle button. (i.e. functionality not work)

1 Like
2

I tried it. But when the app started, it load my ResultPage in background thread. It still take some second to load it and in that moments, the screen being freeze

(Refers to Ionic 3 lazy loading make lag with large html file - #25 by duannx)

3

Have you found any solutions for that ?

4

Do you only get these problem when you use preloadModules: true, or also with “normal” lazy loading?
Are these problem reproducible in a blank project (ionic start blank blank) where you only implement these two things?

5
  1. Without using preloadModules: true it works fine. (I mean no issue with ion icon and button).
    But i want to load component initially during app boot time.
  2. But after achieving lazy loading it shows blank screen while we use this.nav.setRoot(Page) for some time during component initialization time. Don’t know why this happening??
6

Are you importing IonicModule in component modules that use Ionic components?

7

Yes I used this way:

event.module.ts:

import { NgModule } from '@angular/core';
import { IonicPageModule, IonicModule } from 'ionic-angular';
import { EventComponent } from './event';
import { NgCalendarModule } from '../../components/calendar/index';

@NgModule({
  declarations: [EventComponent],
  imports: [
    IonicModule,
    IonicModule.forRoot(EventComponent, {
      preloadModules: true
    }),
    NgCalendarModule,
    IonicPageModule.forChild(EventComponent)
  ]
})

export class EventComponentModule { }

event.ts

@IonicPage({
  name: 'EventComponent',
  priority: 'high'
})
@Component({
  selector: 'events',
  templateUrl: 'event.html',
  styles: [`
    item-inner{
      border-left: 3px solid green !important;
    }
  `]
})

When i remove preloadmodule: true and priority: hight from component It works fine.

8

Take this out. forRoot() should only be done in the app module.

9

I remove .forRoot() from event.module.ts and use into app.module.ts:

Is this correct way ??

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp, EventComponent)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
10

No. Only include the app component.

11

Now my app.module.ts look likes:

imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp, {
      preloadModules: true
    })
  ],

Error:
No provider for Token LZYCMP!

12

No provider for Token LZYCMP!

I have the same error.
How to resolve one?