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

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

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

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]
})

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

введите описание изображения здесь

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

введите описание изображения здесь


angular angular8 web-component micro-frontend
person Nidhin Kumar    schedule 20.02.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В корневом модуле

//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]
})

Объяснение

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

person Wasim    schedule 20.02.2020