It's unclear from your query whether you are interested in utilizing Lazy-loaded pages. Implementing lazy-loading can enhance the performance of your application. If you do opt for lazy-loaded pages, the subsequent steps will assist you in resolving the issue at hand.
If lazy-loaded pages are not part of your app requirements, refer to @Sampath's response instead.
Upon adding @IonicPage() above any of your pages:
@IonicPage() // <-- This line!
@Component({
selector: 'page-random1',
templateUrl: 'random1.html',
})
export class Random1Page { ... }
This indicates that the page will be lazy loaded. Furthermore, ensure there is a random1.module.ts file present in the same directory as that page, like so:
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { Random1Page } from './random1';
@NgModule({
declarations: [
Random1Page,
],
imports: [
IonicPageModule.forChild(Random1Page),
],
})
export class Random1PageModule {}
As evident from the preceding file, Random1Page is included in the Random1PageModule module.
Returning to the error you have encountered:
typescript error
Type Random1Page in
C:/.../pages/random1/random1.ts is part of the declarations of 2 modules: AppModule in
C:/.../app/app.module.ts and
Random1PageModule in
C:/.../pages/random1/random1.module.ts!
To rectify this, it is necessary to remove that page (along with all other lazy-loaded pages) from the AppModule located within the app.module.ts file:
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';
@NgModule({
declarations: [
MyApp
// HomePage,
// ListPage,
// Random1Page, <-- Remove it from here
// Random2Page,
// LoggedinPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp
// HomePage,
// ListPage,
// Random1Page, <-- Also remove it from here
// Random2Page,
// LoggedinPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
You can explore more details on lazy-loading in the Ionic blog:
- Ionic and Lazy Loading Pt 1
- Ionic and Lazy Loading Pt 2