Subtle Ionic 3 gotchas: don’t import and push the page module you are trying to load lazily

With a page you want to be loaded lazily and not eagerly, don’t fall into the subtle trap of trying to push the module onto the stack rather than just the name of the module as a string.

In your page you wanted to have lazy loading, you probably added the decorator (or ionic CLI may have generated this for you):

@IonicPage()

right before:

@Component

In these cases, the @IonicPage() decorator, if not explicitly given a name for the page, magically parses out the name of your exported class as the default name, and it is this name you need to push on the to the nav stack for lazy loading to take place.

Thus, in the component that you want your lazily loaded page to be pushed into the nav stack, it shouldn’t look like this:

import { LazyPage } from '../lazypage/lazypage';

// Other code ...

  this.navController.push(LazyPage);

You will get an error that encourages an eager loading band-aid solution, something like:

Failed to navigate: No component factory found for LazyPage. 
Did you add it to @NgModule.entryComponents?

Instead, don’t import anything and just push the string name of your page that @IonicPage extracted. It should look like this:

  this.navController.push('LazyPage');

Ideally you should just get into the habit of naming all your pages so at least there’s an explicit declaration of the string, and it makes more intuitive programming sense to be pushing a declared string onto the nav stack rather than the magically created string that @IonicPage generates by default:

@IonicPage({ name: 'lazy-page' })

  this.navController.push('lazy-page');