CODEWITHSUNDEEP
angularroutes
Dimitrios K.
Dimitrios K.

Reputation: 1028

Is there a way to achieve 2-step routing in angular?

I'm not even sure how to name the problem I have. I'd also like to avoid using secondary routes. I have been trying to create something like 2-step routing in an angular application.

In theory, this is supposed to be nested routing. But I think the assumption is that if you use a componentless route, then the child routes are routed to the parent outlet, which doesn't work. Using the same component in each feature route is solution #2. I'd like to have something in between, which is the same 'wrapper' for all the componentless child routes.

Outer routing

The outer router has 2 routes:

Inner routing

The application has multiple feature modules and ideally, each module should define its routes. An example could be the user profile:

Solution 1

Define a common routing module for every module, e.g. AppRoutingModule:

const routes: Routers = [
  { path: 'login', component: LoginComponent },
  { path: '', component: AppShellComponent, children: [...] }
]

This restricts me from having proper separation or using features like lazy loading.

https://stackblitz.com/edit/angular-routing-solution1

Solution 2

Use the AppShellComponent on each routing module, e.g. ProfileRoutingModule

const routes: Routes = [
  { path: 'profile', component: AppShellComponent, ... }
]

This is closer to the solution, but now I have multiple instances of the AppShellComponent which means extra resources and a reload every time the app navigates from one module to the other.

https://stackblitz.com/edit/angular-routing-solution2

Solution 3

A component encapsulated both the login and shell components. It knows whether the app has logged in or not and shows the appropriate part of the template. This will be routed to ''. This defeats the purpose of the solution I'm trying to make.

Is there a solution I'm missing? :/

Upvotes: 1

Views: 846

Answers (2)

s-f
s-f

Reputation: 2141

I struggled with the same problem. I tried so many things: bootstrap different modules, different root components, solve it with Router module configuration. For my case it would require to add wrapper shell all feature modules except only one.

At the end I found a simple solution. You can provide as many router-outlet as you want in your AppComponent but keep only 1 based on some condition. So I made 1 router-outlet wrapped with app shell styles and 1 bare for my special case.

Upvotes: 1

BradleyDotNET
BradleyDotNET

Reputation: 61339

You do want nested routing here; the piece you seem to be missing is using LoadChildren to define which children go into the "shell".

Basically, your app routing module would be (Example utilizes lazy loading):

 {
    path: '',
    component: ShellComponent,
    children: [
        { path: 'profile', loadChildren: 'profile/profile.module#ProfileModule' },
        ...
    ],
 },
 {
    path: 'login'
    component: LoginComponent
 }

ShellComponent then has its own router-outlet of course

Upvotes: 3

Related Questions