child component cannot load use child route in angular

Question

I have a Bar component, then I create a child component (child-bar) under Bar Component. I also have child route for it. But I child component cannot find (404) when I use child route.

app.routes.ts:

import { Routes } from '@angular/router';
import { HomeComponent } from './home';
import { AboutComponent } from './about';
import { BarComponent } from './bar/bar.component';
import { NoContentComponent } from './no-content';

import { DataResolver } from './app.resolver';

export const ROUTES: Routes = [
  { path: '',      component: HomeComponent },
  { path: 'home',  component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'bar', component: BarComponent},
  { path: 'detail', loadChildren: './+detail#DetailModule'},
  { path: 'barrel', loadChildren: './+barrel#BarrelModule'},
  { path: '**',    component: NoContentComponent },
];

bar.component.ts:

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

@Component({
  selector: 'bar',
  templateUrl: './bar.component.html',
  styleUrls: ['./bar.component.css']
})
export class BarComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

bar.component.html:

<p>
  bar works!
</p>
<span>
      <a [routerLink]=" ['./child-bar'] ">
        Child Bar
      </a>
    </span>
<router-outlet></router-outlet>

child-bar.component.ts:

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

@Component({
  selector: 'child-bar',
  templateUrl: './child-bar.component.html',
  styleUrls: ['./child-bar.component.css']
})
export class ChildBarComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    console.log('hello `ChildBar` component');
  }

}

child-bar.module.ts:

import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { routes } from './child-bar.routes';
import { ChildBarComponent } from './child-bar.component';

console.log('`ChildBar` bundle loaded asynchronously');

@NgModule({
  declarations: [
    /**
     * Components / Directives/ Pipes
     */
    ChildBarComponent,
  ],
  imports: [
    CommonModule,
    FormsModule,
    RouterModule.forChild(routes),
  ],
})
export class ChildBarModule {
  public static routes = routes;
}

child-bar.routes.ts:

import { ChildBarComponent } from './child-bar.component';

export const routes = [
  { path: '', component: ChildBarComponent,  pathMatch: 'full' },
];

Please let me know if you need more file, I can attach it. Thanks.

Amit kumar · Accepted Answer · 2017-07-17 03:32:42Z

1

Your routing file is wrong if something is child of a component then routing file should be like this

In case of normal routing without lazy loading

export const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
   { path: 'home',  component: HomeComponent },
   { path: 'about', component: AboutComponent },
   { path: 'bar', component: BarComponent,
    children: [
      { path: '', redirectTo: 'child-bar', pathMatch: 'full' },
      { path: 'child-bar', component: ChildBarComponent }
    ]
  }
];

if you want lazy loading you can try these two way

1)

{ path: 'bar', component: BarComponent,
        children: [
          { path: '', redirectTo: 'child-bar', pathMatch: 'full' },
          { path: 'child-bar', loadChildren: 'childbar/childbar.module#ChildBarModule' }
        ]
     }

2) move your complete bar component with child component in separate module with there own routing table

export const routes: Routes = [
  { path: '', redirectTo: 'product-list', pathMatch: 'full' },
   { path: 'home',  component: HomeComponent },
   { path: 'about', component: AboutComponent },
   { path: 'bar', loadChildren: 'bar/bar.module#LazyModule' }
  }
];

check this plnkr to understand how lazy loading works https://plnkr.co/edit/vpCqRHDAj7V6mlN1AknN?p=preview i hope this will help :)

answered Jul 17, 2017 at 3:32

Amit kumar

6,1676 gold badges32 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

FullStackDeveloper Over a year ago

If I added this line: { path: '', redirectTo: 'child-bar', pathMatch: 'full' } child-bar component will show up without click child-bar component link, this is not what I want. I think after we click child-bar link, then child-bar component show up will better

FullStackDeveloper Over a year ago

If I add this line: { path: 'child-bar', component: ChildBarComponent } child-bar component will show up after I click child-bar link, but it did not direct me to another view, but child-bar component show up at the bottom of bar component, which is not correct

Amit kumar Over a year ago

@CodeContributor in normal cases we automatically open one child component. remove redirectTo if you don't want to load it. If you want to redirect to new view then why do you create it as child component. make it a separate component boss. check you html for design where you want it and go through angular.io/guide/router for more info of how routing works in angular

Collectives™ on Stack Overflow

child component cannot load use child route in angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related