Угловой маршрутизатор не загружает нужный компонент

Question

Я начинающий с угловой, и у меня есть следующие маршруты.

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 { }

При переходе к /dashboard он загружает FrameComponent из AppRoutingModule.Но при переходе на /dashboard/overview он загружает NotFoundComponent вместо OverviewComponent со второго маршрутизатора.

Я все еще новичок в Angular.Что я делаю не так?

Answer 1

Вы можете удалить component: FrameComponent из маршрута на приборной панели и переместить его в модуль маршрутизации на приборной панели.

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


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

И я полагаю, вам следует импортировать ваши модули в ядро.

Answer 2

Я думаю, что вы не правильно определили свои маршруты

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

Этот фрагмент кода загружается не лениво - вы не загружаете childern здесь, вы просто загружаете компонент FrameComponent, поэтомуAngular делает это за вас

Если ваш FrameComponent является частью AppModule, вы можете просто удалить loadChildren из пути, и Angular сделает ту же маршрутизацию для вас

Еслиэто не часть AppModule, тогда попробуйте что-то вроде этого

app-routing.module.ts

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

Просто загрузите другой модуль из пути изагрузите необходимый component из этого модуля

dashboard-routing.module.ts

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

Убедитесь, что вы объявили FrameComponemt внутри DashboardModule, и это заставит вас загрузить нужный вам маршрут

Теперь, если путь равен /dashboard angular, загрузит модуль приборной панели и проверит путь '' рядом с /dashboard, чтобы онзагрузить FrameComponent, тогда при попытке доступа к пути /dashboard/overview маршрутизация загрузит дочерний маршрут иd OverviewComponet будет загружено

Надеюсь, что все будет хорошо работать - пожалуйста, не стесняйтесь связаться со мной, если у вас есть какие-либо сомнения - Удачного кодирования:)

Answer 3

Ваше определение в dashboard.routing.module.ts неверно.

Попробуйте вместо этого:

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 { }