How to configure routes in Angular2?

Question

I have requirement like

header, sidemenu, innerpages(profile,about..)

I want 3 seperate routes(1-header,2-sidemenu,3-innerpages) when application is loading profile page is come first

I tried like

app.rouutes.ts

const appRoutes: Routes = [
  {
    path: '', redirectTo: '/business', pathMatch: 'full'
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {}

business.routes.ts

const BUSINESS_ROUTES: Routes = [
  { path: 'header',  component: BusinessHeaderComponent },
  { path: 'sidemenu',  component: BusinessSidemeuComponent },

  { path: 'about',  component: BusinessComponent }

  ];

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

Please help me to configure it

Answer 1

you're mixing the concept of routes with layouts, routes are reflection of urls, if you enter /business/header you will get BusinessHeaderComponent alone, that's routing... what you need is child routes, when you enter business/about, it should load the business header, sidemenu and about component

{
  path: '', redirectTo: '/business', pathMatch: 'full'
},
{
    path: 'business',
    component: BusinessLayoutComponent,
    children: [
      {
        path: 'about',
        component: AboutComponent,
      },
    ]
  },
 {
    path: 'user',
    component: UserLayoutComponent,
    children: [
      {
        path: 'about',
        component: AboutComponent,
      },
    ]
  },

Now inside BusinessLayoutComponent and UserLayoutComponent templates, add your header and side bar as pure html, no need for components for that, because that's the only place they would be defined

The layout components are very simple HTML pages with headers and sidebars and a single <router-outlet></router-outlet> tag to contain the child components.

The child components could be anything, like an about page with About content.

Of course you can use the same about component in both routes

import { Component} from '@angular/core';

@Component({
    templateUrl: 'common/about.html'
})
export class AboutComponent {
    constructor() { }
}