Search code examples
htmlangularangular2-routingangular-routingangular-module

Cannot find a module angular 4


Initially the app displays login page and navigates to maincontent component now i want to navigate from dashboard component to app details component but am getting an error as

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

In my app.module.ts i have imported all the components

below is the routes that i have mentioned in app.module.ts

const appRoutes: Routes=[
    { path:'', redirectTo:'/login',pathMatch:'full'},
    { path: 'login', component: LoginComponent},
    { path: 'maincontent', loadChildren: 
'./maincontent/maincontent.module#MainContentModule'
    }
];

below is the routes mentioned in MainContentModule

 export const ROUTES: Routes = [
  {
    path: 'maincontent',
    component: MainContentComponent,
    children: [
      { path: 'dashboard', component:DashboardComponent,
        loadChildren: './dashboard/dashboard.module#DashboardModule' },
        ]
      }
];
@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(ROUTES)
  ],
  declarations: [],
  exports:[
    RouterModule,
  ]
})
export class MainContentModule {}

In my DasboardModule

export const ROUTES: Routes = [
  {
    path:'dashboard', component:DashboardComponent,
    children:[
      {
        path:'application',component:ApplicationDetailsComponent
      }
    ]
  }
]


@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(ROUTES)
  ],
  declarations: [   ],
  exports:[
    RouterModule,
  ]
})
export class DashboardModule { }

Any help would be appreciated


Solution

  • Add DashboardComponent in your MainContentModule declarations:

    @NgModule({
      imports: [
        CommonModule,
        RouterModule.forChild(ROUTES)
      ],
      declarations: [DashboardComponent ],
      exports:[
        RouterModule,
      ]
    })