Angular Routing: Define Multiple Paths for Single Route

Related searches

I've seen several answers to this, but I'm not sure if they necessarily "fit" my scenario (I'm not trying to create parent/child routing relationships or anything like that). In my case I have a component that's responsible for adding new widgets, or editing existing widgets. My routes are defined like so:

const routes: Routes = [
  {
    path: 'widget/add',
    component: ManageWidgetComponent,
    canActivate: [CanActivateViaRoleGuard],
    data: { roles: ['Admin', 'User'] }
  },
  {
    path: 'widget/:id/edit',
    component: ManageWidgetComponent,
    canActivate: [CanActivateViaRoleGuard],
    data: { roles: ['Admin', 'User'] }
  },
];

path is a string so it can't accept an array of values or anything like that. Is there a way to specify multiple paths for a single route so I don't have to duplicate the other parts of the route (the component, canActivate, and data parts)?

Note: The paths cannot be changed due to application requirements (i.e. I can't just make a single manage path).

Edit: My ManageWidgetComponent already has the correct logic for handling Create vs. Edit. That part's fine.

you can use this format :

  {
     path: 'widget/:id/add-edit',
     component: ManageWidgetComponent,
     canActivate: [CanActivateViaRoleGuard],
     data: { roles: ['Admin', 'User'] }
  },

and in ManageWidgetComponent use fallowing code to check if there is a value for "id"? if there is no value for id so you are adding a new user and if there is a value for "id" so you are editing a user.

this.route.params.subscribe((params: any) => {
        if (params.id) {
            //////you are editing a user
        }else{
            ///// you are adding a new user
        }
     }
);

angular routing multiple paths to same component, You can use the UrlMatcher property. { path: 'access-requests', canActivate: [ AccessGuard], component: AccessRequestsComponent, children:� Multiple Outlets And Auxiliary Routes. Angular Router supports multiple outlets in the same application. A component has one associated primary route and can have auxiliary routes. Auxiliary routes enable developers to navigate multiple routes at the same time.

By convention, there is a one to one relationship between a route and a path (they are basically the same thing), So you can't have different paths for a single routes. But you can have different paths that loads the same component (and that's what you're doing in the example above)

A way to solve this problem would be :

{
   path: 'widget/:id',
   component: ManageWidgetComponent,
   canActivate: [CanActivateViaRoleGuard],
   data: { roles: ['Admin', 'User'] }
},

Then you can navigate to widget/add or widget/123

And in ManageWidgetComponent:

this.route.params.subscribe((params) => {
    if (params.id === 'add') {
        // Add new user
    } else {
        // Edit user with id = +params.id
    }
});

Routing, However, due to issue #14833, it cannot be used to match empty paths const routes: Routes = [{ path: '', component: UsersComponent, children: [ { path: What is a specific context or project requirement that makes it clear that with both React and Angular, what situations will make them choose one over the other.". An Observable of the route path(s), represented as an array of strings for each part of the route path. data: An Observable that contains the data object provided for the route. Also contains any resolved values from the resolve guard. paramMap: An Observable that contains a map of the required and optional parameters specific to the route. The

I think you could do something like this :

const routes: Routes = ['widget/add', 'widget/:id/edit'].map(path => {
 return {
    path: path,
    component: ManageWidgetComponent,
    canActivate: [CanActivateViaRoleGuard],
    data: { roles: ['Admin', 'User'] }
  };
});

A Single Route Parameter Can Match Multiple URL Segments In , import { RouterModule } from "@angular/router"; Notice that we are defining an "/a" path with a single route parameter: path: a/:restOfPath. Routing helps us to create Single Page Applications in Angular. In the SPA while navigating to a page, the whole page is not reloaded every time only a certain view will be changed. An example navigating to a page about from the contact page will only replace the content of contact with about.

A Complete Guide To Routing In Angular — Smashing Magazine, Angular is one of the most popular front-end frameworks for building if the requested URL doesn't match any paths for the defined routes. Auxiliary routes enable developers to navigate multiple routes at the same time. Auxiliary routes allow you to use and navigate multiple routes. To define an auxiliary route you need a named router outlet where the component of the auxiliary route will be rendered. The name that we're giving to the second outlet suggests that the outlet will be used as a sidebar for the app.

The Angular 10/9 Router-Outlets: Named and Multiple Outlets , What is An Auxiliary Route? A component has one primary route and zero or more auxiliary routes.. Auxiliary� 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. Here’s an

This course will guide you step-by-step from understanding the basic concepts of routing to mastering expert-level topics. We'll start by setting up and configuring the router, then define simple routes and child routes and best practices of organizing them using the Routing Module pattern.

Comments
  • This doesn't seem to work. You can't navigate to widget/add-edit (the route isn't found). And I can't change the paths as they are anyway (application requirement).
  • try this one path:[ 'widget/add',' 'widget/:id/edit','],
  • Thanks for the info! Sadly I cannot change the paths themselves (they have to be /widget/add and widget/:id/edit), due to application requirements.