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

时间:2018-02-03 10:23:33

标签: ionic3

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?

1 个答案:

答案 0 :(得分:3)

您不必在应用模块中导入页面模块...... 如果您已经使用过

IonicPageModule.forChild(PageName) 

在您的页面模块中,它将被引导以进行导航。

Here就是它的样子:

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是NgModule    引导孩子IonicPage以设置路由。

另一方面,如果我没有声明ComponentsModule,那么它就不会工作。

这是因为ComponentsModule将包含未设置为延迟加载页面的角度组件。您需要通过导入ComponentsModule确保您的应用包含组件。