How to load new route in main route

Question

Currently I'm new to Angular. I was learning routing topic but seems to stuck at a point where I want to load new route in main route. My app.module looks like

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';
import {HttpModule} from '@angular/http';
import {RouterModule, Routes} from '@angular/router';
// COMPONENTS
import {AppProduct} from './product.compnent';
import {AppFamily} from './family.component';

const appRoutes: Routes = [
  {path: 'Family', component: AppFamily},
  {path: 'Product', component: AppProduct}
]
@NgModule({
  imports:      [ BrowserModule, HttpModule, RouterModule.forRoot(appRoutes)],
  declarations: [ AppComponent, AppFamily, AppProduct],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

app.component

import { Component } from '@angular/core';
import {IProducts} from './IProduct';
import {ProductService} from './products.service'
// FAMILY IMPORTS
import {IFamily} from './IFamily'
import {familyService} from './family.service'
@Component({
  selector: 'hello-world-app',
  templateUrl: "app/app.component.html",
  providers: [ProductService, familyService]
})
export class AppComponent  { 
  iproducts: IProducts[];
  familyMembers: IFamily[];
  constructor(
    private _product: ProductService,
    private _family: familyService){
  }
  ngOnInit():void{
    this._family.getAllFamilyMembers()
    .subscribe(_successLog => {
      this.familyMembers = _successLog;
    })
  }
}

app.component.html

<ul>
   <li>
        <a [routerLink]="['/Product']">
            Product
        </a>
   </li>
   <li>
        <a [routerLink]="['/Family']">
            Family
        </a>
   </li>
</ul>
<router-outlet>
</router-outlet>

Now when I serve my server all goes good except for my /Product and /Family route is loaded in <router-outlet></router-outlet> but I don't want navigation menu to appear when I visit /Product in other words I want that my route should load in parent route no child routing. Any help would be appreciated !

score 1 · Accepted Answer · edited Sep 02 '17 at 09:03

1

You should define your children module in your appRoutes constant as this:

{ path: '/childPath', 
component: ChildComponent, 
children: [
    {path: 'about', 
     loadChildren: './path/to/children.module#ModuleName'}
    ]
}

edited Sep 02 '17 at 09:03

Neil Lunn

130,590
33
275
280

answered Sep 02 '17 at 08:59

Mr. Deer

26
3

I will try this out, Thanks ! – Mohammad Hani Sep 02 '17 at 09:04

score 1 · Answer 2 · answered Sep 02 '17 at 09:46

The answer by Mr. Deer is correct for lazy loading - however, you don't always want to do that. If you want to just have child components, you should do:

{ path: '/childPath', 
component: ChildComponent, 
children: [
    {path: 'about', 
     component: SecondChildComponent
    ]
}

That said, lazy loading is generally preferred.

How to load new route in main route

2 Answers2