Angular URL маршрутизации нескольких проектов изменяется, но страница не отображается

Question

Я создал несколько angular проектов в одном приложении. Я использовал маршруты в проекте root и пытался связаться с дочерними проектами, но в результате происходит изменение URL-адреса, но страница не отображается.

Root Маршрутизация страницы:

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full',
  },
  {
    path: '',
    component: DefaultLayoutComponent,
    data: {
      title: 'Home'
    },
    children: [
      {
        path: 'dashboard',
        loadChildren: './views/dashboard/dashboard.module#DashboardModule'
      },
      {
        path: 'flights',
        loadChildren: '../../projects/flights/src/app/flight.module#FlightsSharedModule'
      },
      {
        path: 'passengers',
        loadChildren: '../../projects/passengers/src/app/app.module#PassengersSharedModule'
      }
    ]
  },
  { path: '**', component: DefaultLayoutComponent }
];

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

Маршруты заявлений на рейсы:

const routes: Routes = [{
  path: '',
  data: {
    title: 'Flights',
  },
  children: [
    {
      path: '',
      component: ListComponent,
      data: {
        title: 'List',
      },
    },
  ],
}];

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

Маршруты заявлений пассажиров

const routes: Routes = [{
  path: '',
  data: {
    title: 'Passengers',
  },
  children: [
    {
      path: '',
      component: ListComponent,
      data: {
        title: 'List',
      },
    },
  ],
}];

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

В root маршрутизация приложений, если я удаляю модули из root, на странице показан каскадный эффект, как показано ниже

Но если импортировать эти проекты как модуль на странице не отображаются отдельные компоненты, а вместо домашней страницы по умолчанию отображается первое приложение, как показано ниже

Answer 1

В root модуль

//In root module 

const routes: Routes = [
	{
		path: '',
        redirectTo: 'DashboardComponent',
        pathMatch: 'full',
		
	},
	{
		path: "FlightsApplication",
		data: { preload: true },
		loadChildren: () => FlightApplicationModule
	},
	{
		path: "PassengerApplication",
		data: { preload: true },
		loadChildren: () => PassengerApplicationModule
	},
	
	{ path: "**", component: NotFoundComponent }
];

Модуль приложения полета

//Flights Application Routes:
const routes: Routes = [{

    {
		path: "Flights",
        component: 'ListComponent',
        pathMatch: 'full',
		
	},
}];

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

Пассажирский прикладной модуль

//Passenger Application Routes:
const routes: Routes = [{
  {
		path: "Passengers",
        component: 'ListComponent',
        pathMatch: 'full',
		
	},
}];

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

Объяснение

In Root Модуль Сначала мы сказали нашему проекту, что Pasenger и Appiication два разных модули, поэтому мы добавили их имена, и они содержат несколько компонентов, поэтому мы добавили loadchildren, который будет загружать компоненты этого модуля, из нашего дополнительного модуля мы указали пути для относительных компонентов