Angular router not loading the proper component

Question

I am beginner with angular and I have the followings routes.

app.routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FrameComponent } from './ui/frame/frame.component';
import { NotFoundComponent } from './common/not-found/not-found.component';

const routes = [
  {
    path: 'login',
    loadChildren: 'src/app/login/login.module#LoginModule'
  },
  { 
    path: 'dashboard',
    component: FrameComponent,
    loadChildren: 'src/app/dashboard/dashboard.module#DashboardModule'
  },

  {
      path: "**",
      component: NotFoundComponent,
  }

];

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

dashboard.routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { OverviewComponent } from '../overview/overview.component';


const routes = [
  { 
    path: '',
    children:[
      {
        path: 'overview',
        component: OverviewComponent,
        //outlet: 'dashboard-inside'
      }
    ]
  },
];

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

When navigating to /dashboard it loads the FrameComponent from the AppRoutingModule. But when navigating to /dashboard/overview it loads NotFoundComponent instead of OverviewComponent from second router.

I am still a beginner with Angular. What am I doing wrong?

Welcome. How exactly do you expect /dashboard/overview to navigate to OverviewComponent since that route (path) is not defined anywhere? — Jeto
– Jeto, Commented Dec 4, 2018 at 0:12
Isn't correctly defined in the children route of dashboard.routing.module.ts? — Emanuel Mustea
– Emanuel Mustea, Commented Dec 4, 2018 at 0:24

Rahul · Accepted Answer · 2018-12-04 02:23:33Z

I think you didn't define your routes correctly

{ 
    path: 'dashboard',
    component: FrameComponent,
    loadChildren: 'src/app/dashboard/dashboard.module#DashboardModule'
  }

This piece of code doesn't load lazily - you are not loading the childern over here you are just loading the component FrameComponent so angular does it for you

If your FrameComponent is part of AppModule you can just remove the loadChildren from the path and the angular will do the same routing for you

If it is not the part of AppModule then try something like this

app-routing.module.ts

 { 
    path: 'dashboard',
    loadChildren: 'src/app/dashboard/dashboard.module#DashboardModule'
  }

Just load another module from the path and load the component you want from that module

dashboard-routing.module.ts

{ 
    path: '',
    component: FrameComponent,
    children:[
      {
        path: 'overview',
        component: OverviewComponent,
        //outlet: 'dashboard-inside'
      }
    ]
  }

Make sure you have declared the FrameComponemt inside the DashboardModule and that will make you to load the route you want

Now if the path is /dashboard angular will load the dashboard module and check for the path '' next to the /dashboard so it will load the FrameComponent then when you try to access path /dashboard/overview routing will load the child route and OverviewComponet will be loaded

Hope everything will work good - please feel free to reach me if you have any doubts - Happy coding :)

msdosx86 · Accepted Answer · 2018-12-04 01:38:53Z

1

You can remove component: FrameComponent from the dashboard route and move it into the dashboard routing module.

  { 
    path: 'dashboard',
    loadChildren: 'src/app/dashboard/dashboard.module#DashboardModule'
  },


  { 
    path: '',
    component: FrameComponent,
    children:[
      {
        path: 'overview',
        component: OverviewComponent,
      }
    ]
  },

And I guess you should import your modules in core one.

answered Dec 4, 2018 at 1:38

msdosx86

9423 gold badges10 silver badges18 bronze badges

Comments

Nika · Accepted Answer · 2018-12-04 00:24:02Z

0

Your definition in dashboard.routing.module.ts is wrong.

Try this instead:

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { OverviewComponent } from '../overview/overview.component';


const routes = [
  { 
    path: 'overview', // <-- should be in root.
    component: OverviewComponent,
  },
];

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

answered Dec 4, 2018 at 0:24

Nika

1,9943 gold badges24 silver badges45 bronze badges

Collectives™ on Stack Overflow

Angular router not loading the proper component

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related