Ionic3: Is it necessary to declare pages and pages modules in app.module.ts

Question

I used to declare the pages and pages modules of my ionic app in app.module.ts.
However, I just removed all those declarations, and the app still works completely fine (tested in browser, not in mobile).
So I wonder if those declarations are necessary or not.

According to this post's answer it is not necessary to declare pages in app.module.ts, but it doesn't mention page modules.

My app.module.ts works like this:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HttpModule } from '@angular/http';

// imports
import { PageModule_view_raw } from '../pages/page1/page1.module';
import { PageModule_view_raw } from '../pages/page2/page2.module';
import { PageModule_view_raw } from '../pages/page3/page3.module';
import { Page1 } from '../pages/page1/page1';
import { Page2 } from '../pages/page2/page2';
import { Page3 } from '../pages/page3/page3';

import { SomeProvider } from '../providers/someprovider';
import { ComponentsModule } from '../components/components.module';


@NgModule({
  declarations: [
    MyApp,
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpModule,
    // pages modules
    PageModule1,
    PageModule2,
    PageModule3,
    // components
    ComponentsModule,
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    // pages
    Page1,
    Page2,
    Page3,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    // providers
    SomeProvider
  ]
})
export class AppModule {}

But it also works like this:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HttpModule } from '@angular/http';

// imports
import { SomeProvider } from '../providers/someprovider';
import { ComponentsModule } from '../components/components.module';


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

On the other hand, if I don't declare ComponentsModule, then it won't work.
Are page modules fetched automatically? Is there any point in declaring them?

Answer 1

You don't have to import page modules in the app module... If you have used

IonicPageModule.forChild(PageName) 

in your page module, it will be bootstrapped for navigation.

Here is what it looks like:

export class IonicPageModule {

  static forChild(page: any): ModuleWithProviders {
    return {
      ngModule: IonicPageModule,
      providers: [
        { provide: <any>LAZY_LOADED_TOKEN, useValue: page },
        { provide: ANALYZE_FOR_ENTRY_COMPONENTS, useValue: page, multi: true },
      ]
    };
  }

}

IonicPageModule is an NgModule that bootstraps a child IonicPage in order to set up routing.

On the other hand, if I don't declare ComponentsModule, then it won't work.

This is because ComponentsModule will contain your angular components which are not set as lazy loaded pages. You need to ensure your app includes the components by importing the ComponentsModule.