Angular Multiple projects routing url gets changed but page not rendering

Question

I have created an multiple angular projects in a single application.I have used routes in the root project and tried to communicate with the child projects but what happens is the url gets changed but the page is not rendering.

Root Page Routing:

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

Flights Application Routes:

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

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

Passenger Application Routes

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

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

In the root application routing if i remove the modules from the root the page shows an cascading effect like below

But if the import those projects as module the page is not rendering the particular components as well as instead of showing the default home page it shows the first application like below

score 0 · Answer 1 · answered Feb 20 '20 at 17:52

In root module

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

Flight Application Module

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

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

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

Passenger Application Module

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

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

Explanation

In Root Module We have first told to our project that Pasenger and Appiication are two different modules so we have added their names and they contain multiple components that's why we have added loadchildren that will load components of that module , the in out relevent module we have specified path's for relative components

Angular Multiple projects routing url gets changed but page not rendering

1 Answers1