Component Selector is not working with lazy loading in ionic 3

I added lazy loading with the help of this document - https://docs.google.com/document/d/1vGokwMXPQItZmTHZQbTO4qwj_SQymFhRS_nJmiH0K3w/edit

I have a page with component

@Component({
selector: ‘page-opportunity’,
templateUrl: ‘opportunity.html’
})

export class OpportunityPage {
@Input() opportunity: any;
}

Now on some other page, I am using:

<page-opportunity *ngFor="let opportunity of myopportunities;" id="{{opportunity.opportunityId}}" [opportunity]="opportunity">

Its class is included… Earlier with ionic 2, it was working fine… Now its not working… It says opportunity is not a known property of <page-opportunity>

Am I doing something wrong?

I think class names XXXPage should be reserved for actual pages, not components that can be embedded, so I’m just going to pretend for the moment that this thing is called OpportunityComponent.

You have a few options, and I’m going to warn you up front that if you use OpportunityComponent in a lot of places, lazy loading might not be for you. Its code is going to end up duplicated in every page that uses it.

  • The official suggestion (which I personally think is worse than the other two, but I am sure that I’m just ignorant about this) is to make one ComponentsModule, put all your components in it, and import it in the page modules of every page that uses them. This is described in the doc you linked.

  • The way I was doing it before I decided to give up on lazy loading for now is described in this post. Each component gets its own module.

  • You can put OpportunityComponent in the main app module and it will be available to everybody, but will not be lazily loaded.

I have around 65 pages in my project… So can I just lazy load mostly the pages whose components are not used anywhere else… Will lazy loading some pages improve the boot time??

Yes. That’s what how it should work.

That could get tricky. I think it’s theoretically possible, but you have to take great care as to how you interact with the navigation system. As I understand it (not totally confident here, but…), you can pass either a constructor function (aka class name) or a string to navigation functions like push() or setRoot(). If the former, lazy loading doesn’t get involved, and you’re responsible for making sure the page is available, which means having it be an entry component declared in the main app module. If the latter, lazy loading takes over and you must have done all the @IonicPage stuff that the generator boilerplate spits out. So you might be able to mix and match, but it’s pretty error-prone.