Trouble implementing lazy loaded feature module Angular 8

Question

So basically I am trying to create a lazy loaded feature module in my application I have been following the official angular docs - but for some reason its not working.

I have set up my feature module DashboardModule as shown below

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

// MODULES
import { DashboardRoutingModule } from './dashboard-routing.module';

// COMPONENTS
import { DashboardComponent } from './dashboard/dashboard.component';
import { DashboardAlertComponent } from './dashboard-alert/dashboard-alert.component';
import { DashboardSummaryComponent } from './dashboard-summary/dashboard-summary.component';
import { DashboardTasksComponent } from './dashboard-tasks/dashboard-tasks.component';
import { HoldingPageComponent } from './holding-page/holding-page.component';

@NgModule({
    imports: [CommonModule, DashboardRoutingModule],
    declarations: [
        DashboardComponent,
        DashboardAlertComponent,
        DashboardSummaryComponent,
        DashboardTasksComponent,
        HoldingPageComponent,
    ]
})
export class DashboardModule {}

then in my DashboardRoutingModule

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

import { ActivityComponent } from '../activity-components/activity/activity.component';
import { IsLockedRouteGuard } from '@app/shared/common/auth/is-locked-route-guard';
import { DashboardSummaryComponent } from './dashboard-summary/dashboard-summary.component';
import { SyncComponent } from '@app/popup-components/sync/sync.component';
import { DashboardAlertComponent } from './dashboard-alert/dashboard-alert.component';
import { ChartContainerComponent } from '../chart-components/chart-container/chart-container.component';
import { DashboardTasksComponent } from './dashboard-tasks/dashboard-tasks.component';


@NgModule({
    imports: [
        RouterModule.forChild([
            { path: 'activity', component: ActivityComponent, canActivate: [IsLockedRouteGuard] },
            { path: 'snapshot', component: DashboardSummaryComponent },
            { path: 'sync', component: SyncComponent },
            {
                path: 'alerts',
                component: DashboardAlertComponent,
                canActivate: [IsLockedRouteGuard]
            },
            { path: 'charts', component: ChartContainerComponent, canActivate: [IsLockedRouteGuard] },
            { path: 'tasks/:sort', component: DashboardTasksComponent, canActivate: [IsLockedRouteGuard] },
        ])
    ],
    exports: [RouterModule]
})
export class DashboardRoutingModule {}

so as per the angular docs this has been set up correctly..

now in my AppRoutingModule

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { AppRouteGuard } from './shared/common/auth/auth-route-guard';

@NgModule({
    imports: [
        RouterModule.forChild([
            {
                path: 'app',
                component: AppComponent,
                children: [
                    {
                        path: '',
                        children: [{ path: '', redirectTo: '/dashboard/alerts', pathMatch: 'full' }]
                    },
                    {
                        path: 'main',
                        canActivate: [AppRouteGuard],
                        loadChildren: () => import('./main/main.module').then(m => m.MainModule),
                        data: { preload: true }
                    },
                    {
                        path: 'dashboard',
                        loadChildren: () => import('./main/dashboard/dashboard.module').then(m => m.DashboardModule)
                    },
                ]
            }
        ])
    ],
    exports: [RouterModule]
})
export class AppRoutingModule {}

but whats happening is when I try and go to /dashboard.. I get this error

Component HoldingPageComponent is not part of any NgModule or the module has not been imported into your module.

but I am clearly importing it in the DashboardModule as shown above.. what am I doing wrong??

Thanks

You need to make sure that the component is loaded before its used. To me it seems like you have used the `HoldingPageComponent` in somewhere outside its parent module or the import is not proper. Please cross check. — Manish, Jul 02 '19 at 06:24
@Manish yes I was importing it in another module I forgot to remove it! thanks this worked! — Smokey Dawson, Jul 02 '19 at 06:28

score -1 · Answer 1 · answered Jul 02 '19 at 06:25

-1

i don't see

RouterModule.forRoot

i think you should use it in AppRoutingModule instead of

RouterModule.forChild

answered Jul 02 '19 at 06:25

Damian Pioś

473
2
5

My AppRoutingModule isnt my root routing module hence forChild – Smokey Dawson Jul 02 '19 at 06:27
so sth is missing here – Damian Pioś Jul 02 '19 at 06:29
https://stackoverflow.com/questions/40498081/routermodule-forrootroutes-vs-routermodule-forchildroutes – Daniel Jul 02 '19 at 06:55
Call forRoot only in the root application module, AppModule. Calling it in any other module, particularly in a lazy loaded module, is contrary to the intent and is likely to produce a runtime error. – Daniel Jul 02 '19 at 06:56

Trouble implementing lazy loaded feature module Angular 8

1 Answers1