RouterModule.forRoot() called twice. Lazy loaded modules should use RouterModule.forChild() instead

Ionic Framework ionic-v3
1

My “Home Page” is being loaded. But if i click a Button that should redirect to the “Schedule Page” this Error is thrown

RouterModule.forRoot() called twice. Lazy loaded modules should use RouterModule.forChild() instead

So what do i’m missing here? BTW, this happened after i have added a Directive

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { HttpClientModule } from '@angular/common/http';
import { AndroidPermissions } from '@ionic-native/android-permissions/ngx';
import { Diagnostic } from '@ionic-native/diagnostic/ngx';
import { Geolocation } from '@ionic-native/geolocation/ngx';
import { LocationAccuracy } from '@ionic-native/location-accuracy/ngx';
import { NativeGeocoder } from '@ionic-native/native-geocoder/ngx';
import { NativeStorage } from '@ionic-native/native-storage/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderParallaxDirective } from './directives/header-parallax.directive';

@NgModule({
    declarations: [AppComponent, HeaderParallaxDirective],
    entryComponents: [],
    imports: [
        BrowserModule,
        AppRoutingModule,
        IonicModule.forRoot({
            backButtonText: ''
        }),
        HttpClientModule
    ],
    providers: [
        StatusBar,
        SplashScreen,
        AndroidPermissions,
        Diagnostic,
        Geolocation,
        LocationAccuracy,
        NativeGeocoder,
        NativeStorage,
        {
            provide: RouteReuseStrategy,
            useClass: IonicRouteStrategy
        }
    ],
    exports: [
        HeaderParallaxDirective
    ],
    bootstrap: [AppComponent]
})

export class AppModule {}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DetailPageResolver } from './resolver/detail-page-resolver';

const routes: Routes = [
    {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
    },
    {
        path: 'home',
        loadChildren: () => import('./pages/home/home.module').then(m => m.HomePageModule)
    },
    {
        path: 'search',
        loadChildren: () => import('./pages/search/search.module').then(m => m.SearchPageModule)
    },
    {
        path: 'schedule/:id',
        resolve: {
            client: DetailPageResolver
        },
        loadChildren: () => import('./pages/schedule/schedule.module').then(m => m.ScheduleModule)
    }
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes)
    ],
    exports: [RouterModule]
})

export class AppRoutingModule {}

schedule-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { SchedulePage } from './schedule';

const routes: Routes = [
    {
        path: '',
        component: SchedulePage
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})

export class SchedulePageRoutingModule {}

schedule.ts

import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { AlertController, Config, IonList, LoadingController, ModalController, ToastController } from '@ionic/angular';
import { ConferenceData } from '../../providers/conference-data';
import { UserData } from '../../providers/user-data';
import { ScheduleFilterPage } from '../schedule-filter/schedule-filter';

@Component({
    selector: 'page-schedule',
    templateUrl: 'schedule.html',
    styleUrls: ['./schedule.scss']
})

export class SchedulePage implements OnInit {
    @ViewChild('scheduleList', { static: true }) scheduleList: IonList;

    // ios: boolean;
    dayIndex = 0;
    queryText = '';
    segment = 'all';
    excludeTracks: any = [];
    shownSessions: any = [];
    groups: any = [];
    confDate: string;

    private data: any;

    constructor(
        private route: ActivatedRoute,
        public alertCtrl: AlertController,
        public confData: ConferenceData,
        public loadingCtrl: LoadingController,
        public modalCtrl: ModalController,
        public router: Router,
        public toastCtrl: ToastController,
        public user: UserData,
        public config: Config
    ) {}

    ngOnInit()
    {
        this.updateSchedule();
    }

    ionViewDidEnter()
    {
        if (this.route.snapshot.data.client) {
            this.data = this.route.snapshot.data.client;
        }
    }

    updateSchedule()
    {
        this.confData.getTimeline(this.dayIndex, this.queryText, this.excludeTracks, this.segment)
            .subscribe((data: any) => {
                this.shownSessions = data.shownSessions;
                this.groups = data.groups;
            });
    }

    async presentFilter()
    {
        const modal = await this.modalCtrl.create({
            component: ScheduleFilterPage,
            componentProps: { excludedTracks: this.excludeTracks }
        });
        await modal.present();

        const { data } = await modal.onWillDismiss();
        if (data) {
            this.excludeTracks = data;
            this.updateSchedule();
        }
    }
}

home.page.ts
i’m using this function to route to the schedule page

openDetailsWithService(id)
    {
        this.detailPageService.setData(id, this.restaurants[id]);
        this.router.navigateByUrl('/schedule/' + id);
    }
1 Like
2

Ok, got it.
Somehow my IDE imported this

import { AppModule } from '../../app.module';

into “schedule.module.ts”. So removing this and routing works now

3 Likes