CODEWITHSUNDEEP
angularangular-router
Liero
Liero

Reputation: 27350

Layout Page in feature module with routing

I've followed lazy-loading-ngmodules tutorial so that I have App Module with routing and a Feature Modules with routing:

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

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

app.component.html contains <router-outlet></router-outlet>

How do I specify Layout component, that all pages within FeatureModule will use the same Layout? It is possible to have another router-outlet in FeatureModule?

EDIT: So I have modified my FeatureModuleRouting:

const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children:[
      {
        path: 'index',
        component: IndexComponent,
      },
      {
        path: 'about',
        component: AboutComponent,
      }
    ]
  }
];

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

and LayoutComponent:

<h2>Feature works!</h2>

<button routerLink="index">Home</button>
<button routerLink="about">About</button>
<router-outlet name='sub'></router-outlet>

but Index and About components are not loading into LayoutComponent. Why?

Upvotes: 1

Views: 369

Answers (1)

S K
S K

Reputation: 452

Yes it's possible to have another router-outlet by specifying name to each router-oulet.

In your Layout.Component.html

<router-outlet name="index"></router-outlet>
<router-outlet name="about"></router-outlet>

In route.ts

const routes: Routes = [
  {
    path: '/layout',
    component: LayoutComponent,
    children:[
      {
        path: '',
        component: IndexComponent,
        name:'index'
      },
      {
        path: '',
        component: AboutComponent,
        name:'about'

      }
    ]
  }
];

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

Whenever you route to /layout (you can change it to / if you don't want to route to /layout) both index and about component loaded into layout component.

Upvotes: 1

Related Questions