Angular Route Default Auxiliary Routes

Question

When I read about Angular Router's auxiliary routing it is discussed as being an "independent" set of routes. However, what I'm trying to create "dependent" routes. For example:

/home -> HomeComponent, WelcomeComponent
/about -> AboutComponent, SearchComponent
/products -> ProductsComponent, ProductListComponent
/pricing -> PricingComponent, WelcomeComponent

I want to be able to just specify the main (page) route like the following code and based on my example above load these two components (AboutComponent, SearchComponent).

About

I can get the two components to load when I use the following:


    Products List

However, I really don't want the link to know about the auxiliary route. I want it supplied automatically. Is this possible with the right configuration? Or will this require me to extend the RouteModule to do this?

Edit:

Another requirement I have to is to keep the peer to each other. The layout of the site is such that the second component is not within the main component.

user_811277 · Answer

I ended up finding my answer here under the section entitled "Componentless Routes": https://vsavkin.tumblr.com/post/146722301646/angular-router-empty-paths-componentless-routes

Here is the code example in that link:

[
  {
    path: 'team/:id',
    component: TeamParentComponent,
    children: [
      {
        path: '',
        component: TeamListComponent
      },
      {
        path: '',
        component: TeamDetailsComponent,
        outlet: 'details'
      }
    ]
  }
]

user_9174312 · Answer

You have 2 options based on my knowledge.

Option 1 : create a main route with a children component

app.routing.ts

const routes: Routes = [
  {
   path: 'home', component: HomeComponent,
   children: [{ path: '', component: WelcomeComponent }],
  },
  {
   path: 'about', component: AboutComponent,
   children: [{ path: '', component: SearchComponent }],
  },
  {
   path: 'products ', component: ProductsComponent,
   children: [{ path: '', component: ProductListComponent }],
  },
  {
   path: 'pricing  ', component: PricingComponent,
   children: [{ path: '', component: WelcomeComponent }],
  }
}];

You have your main component e.g. AboutComponent. And in it, you have to put a to place your children component.

about.component.html

Option 2 :

you put your children component directly in your parent component but you cannot call that a routing at that point.

about.component.html

Angular Route Default Auxiliary Routes

2 Answers