Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Child routing in Angular 5 not working

Tags:

angular

I am having trouble routing in Angular 5.

I would like to support the following URL's

This one works:

/post  

This one doesn't, it redirects me to my NotFoundComopnent

/post/test-post-title

My AppRoutingModule

export const routes: Routes = [
    { path: 'post', loadChildren: 'app/feature/post/post.module#PostModule' },
    { path: '**', component: NotFoundComponent },

];

export class AppRoutingModule { }

My PostRoutingModule:

const routes: Routes = [
    {
        path: '',
        component: PostHomeComponent,

        children: [
            { 
                path: ':slug', component: PostDetailComponent 
            }
        ]
    }
];

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

export class PostRoutingModule { }

Updated to show the PostDetailComponent

export class PostDetailComponentimplements OnInit {

  constructor(
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    const id = +this.route.snapshot.paramMap.get('slug');
    console.log(id)
  }

}

like image 934
Robbie Mills Avatar asked Jan 07 '18 02:01

Robbie Mills


People also ask

How do I add a child route in angular?

In Angular, the router lets you add child routes using the children property inside the routing module.

How do I set up routing for angular 2+ apps?

The following covers routing for Angular 2+ apps. All you need to define child routes is to add an array of additional route configuration objects as part of a children key in your parent configuration. Here’s an example configuration: And don’t forget to add a router-outlet directive in the template of any parent component:

How do I create a routing hierarchy in Angular 2?

It’s easy to create any kind of routing hierarchy in your Angular apps by using child routes in your router configurations. The following covers routing for Angular 2+ apps. All you need to define child routes is to add an array of additional route configuration objects as part of a children key in your parent configuration.

How do you define a route in angular?

Define your routes in your Routes array. Each route in this array is a JavaScript object that contains two properties. The first property, path, defines the URL path for the route. The second property, component, defines the component Angular should use for the corresponding path.


1 Answers

When you define a child route using "children: [{ ... }]" as in your PostRoutingModule, you must have a router outlet inside your PostHomeComponent for this child component to be injected in.

In other words, if Component B is child of Component A, you can't expect to inject them both into the same router outlet that you have on app level.

Either, have a router outlet inside PostHomeComponent - this may or may not be what you want as you would end up displaying both Parent and Child components at the same time.

Or, change your routes to this:

const routes: Routes = [
    {
        path: '',
        component: PostHomeComponent
    },
    { 
        path: ':slug', component: PostDetailComponent 
    }

];
like image 91
Uğur Dinç Avatar answered Oct 28 '22 21:10

Uğur Dinç