Angular 2 complex nested routing

Question

I am upgrading an Angular 2 app from 2.0.0-beta.0 to 2.4

I have complex routing, with many reused Components that have multiple children; I will give a simplified example:

└─Home
  ├─Company
  | ├─Requests
  | └─Users
  |   ├─Subscriptions
  |   | └─Requests
  |   └─Requests
  ├─Users
  | ├─Subscriptions
  | | └─Requests
  | └─Requests
  └─Subscriptions
    └─Requests

As you can see, the Users component, and the Subscriptions component (with respective children) are used multiple times, and the Request module is also a child of Users and Company separately.

This was simple in Beta 0, as Components could have their own separate routing. However I have been unable to find a good way to do this in the current version of Angular. I could turn every reused component with children into a module with a bootstrapped component, but that adds much more code and will not be very flexible.

Is there a way to do this without making each reused component that has children a module?

Timathon · Accepted Answer · 2017-01-11 03:20:29Z

2

What about simply using 'children' + 'redirectTo'?

const routes: Routes = [
  { path: '', pathMatch: 'full', component: HomeComponent },
  { path: 'company', children: [
    { path: '', pathMatch: 'full', component: CompanyComponent},
    // path '/company/requests' will redirectTo '/requests'
    { path: 'requests': redirectTo: '/requests' }, 
    { path: 'users': redirectTo: '/users' },
  ]},
  { path: 'users', children: [
    { path: '', pathMatch: 'full', component: UsersComponent },
    { path: 'subscriptions', redirectTo: '/subscriptions' },
    { path: 'requests', redirectTo: '/requests' }
  ]},
  { path: 'subscriptions', children: [
    { path: '', pathMatch: 'full', component: SubscriptionsComponent },
    { path: 'requests', redirectTo: '/requests' },
  ]},
  { path: 'requests', component: RequestsComponent },
];

edited Jan 11, 2017 at 3:20

answered Jan 10, 2017 at 5:58

Timathon

1,0499 silver badges11 bronze badges

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

3 Comments

David vlv Over a year ago

I could do this, but where you've got { path: 'users', ...}, the routes would be repeated exactly the same as the first time. I would like to avoid this.

Timathon Over a year ago

Added a bunch of 'redirectTo'. See if it helps.

David vlv Over a year ago

Interesting... Unfortunately I need to keep the path full length, as I have router-outlets nested within router-outlets, and all previous components are still open. It seems I must succumb to the inevitable and just use nested modules.

David vlv · Accepted Answer · 2017-01-12 22:06:23Z

1

I solved this by putting this code in each of my components:

in foo.component.ts:

import { BarComponent } from './bar.component'
export const FooRouting: Routes = [
    { path: 'Bar', component: BarComponent }
]

and in home.ts (the module)

import { FooComponent, FooRouting } from './foo.component'
import { BarComponent } from './bar.component'

@NgModule({
    imports: [
        ...
        RouterModule.forRoot([
            { path: '', component: FooComponent, children: FooRouting }
            { path: 'Bar', component: BarComponent }
        ])
        ...
    ],
    ...
)}

to make:

└─Home
  ├─Foo
  | └─Bar
  └─Bar

answered Jan 12, 2017 at 22:06

David vlv

411 silver badge5 bronze badges

Collectives™ on Stack Overflow

Angular 2 complex nested routing

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related