Angular Child Route not working and redirect me to the same page

Question

I have tried to change my route and so far I didn't find any issues. But if you find any flaws please let me know, also I try to find any type error and double-check my components, so far I didn't find one, but then again let me know. I try to type my Route URL and it works, but it displays the same page. It won't redirect me to the page that I want. I even delete and install the node module, but unfortunately the problem is still the same. Honestly, I just want to try if I could still use child route in Angular 6. But anyway Ill provide you route module, my html component and my other components.

First off my route module:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ContactComponent } from './contact/contact.component';
import { ComponentDetailComponent } from './contact/component-detail/component-detail.component';
import { ContactDescriptionComponent } from './contact/component-detail/contact-description/contact-description.component';

const routes: Routes = [

  {
    path: 'contact',
    component: ContactComponent,
    children: [
        {
            path: ':id',
            component: ComponentDetailComponent,
            children: [
                {
                    path: 'details/:name',
                    component: ContactDescriptionComponent
                }
            ]
        }
      ]
   },

];

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

My app.module.ts:

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

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { ContactComponent } from './contact/contact.component';
import { ComponentDetailComponent } from './contact/component-detail/component-detail.component';
import { ContactDescriptionComponent } from './contact/component-detail/contact-description/contact-description.component';

@NgModule({
   declarations: [
     AppComponent,
     ContactComponent,
     ComponentDetailComponent,
     ContactDescriptionComponent
],
imports: [
     BrowserModule,
     AppRoutingModule
],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

My app.component.html:

<app-contact></app-contact>
<router-outlet></router-outlet>

My contact.component.html:

<h1>Contact works!</h1>
<a [routerLink]="['id']">Contact Details</a>

My component-detail.component.html:

<h3>Component-detail Works!</h3>
<a [routerLink]="['details','name']" >Description</a>

And lastly my contact-description.component.html:

<h3>Contact-description Works!</h3>

If you have anything would you like me to add up, just let me know.

you didn't provide any router-outlet in your ComponentDetailComponent so angular doesn't know where to render your child. — JEY, Jun 22 '18 at 06:45
@jriccrussel Have you tried the solution provided? You can check the demo aswell. — Amit Chigadani, Jun 23 '18 at 07:31
@Amit Chigadani Thank you for making a demo, but unfortunately it displays a blank page — jricc russel, Jun 25 '18 at 05:51
Have you checked redirecting to the URL /contact/id/details/name ? It just works fine — Amit Chigadani, Jun 25 '18 at 05:56
Or simply redirect to /contact/Id and then click on description link. — Amit Chigadani, Jun 25 '18 at 05:58
@Amit Chigadani Sorry I didnt know I have to enter the route URL I was trying to copy your code on my work — jricc russel, Jun 25 '18 at 06:10
@Amit Chigadani I have a question I notice in your demo that you didnt nested your components, Would there be a conflict in the route If I nested my components? In my situation I use Child Route in my app-routing and I nested my components what do you think? — jricc russel, Jun 25 '18 at 06:20
Why you want to nest the components when you have a separate `routes` defined for them, You will simply nest `router-outlet`. If you want to directly load `ContactDescription` from the app-component (or the root comp `ContactComponent`) , then you have to add it as a child route to `ContactComponent` instead of adding it as grand child — Amit Chigadani, Jun 25 '18 at 06:55
@Amit Chigadani I see, I know im asking too much. If you have the time could you please give an example demo for child route nested component please much appreciate — jricc russel, Jun 25 '18 at 08:42

score 4 · Answer 1 · answered Jun 22 '18 at 07:23

4

You are missing <router-outlet></router-outlet> in component-detail component

See this working DEMO

answered Jun 22 '18 at 07:23

Amit Chigadani

28,482
13
80
98

Angular Child Route not working and redirect me to the same page

1 Answers1

Linked