Troubleshooting Angular routing

1
votes

What am I doing wrong with my Angular routing?

I have the following URL which works:

/marketplace/promotions

However, this gives me a 404:

/marketplace/promotions/create

app-routing.module:

export const routes: Routes = [
    {
        path: '',
        component: HomeLayoutComponent,
        children: [
            { path: 'marketplace', loadChildren: 'app/feature/marketplace/marketplace.module#MarketplaceModule' },
        ]
    },
    { path: '**', component: NotFoundComponent },

marketplace.module

const routes: Routes = [
    {
        path: '',
        children: [
            {
                path: '', redirectTo: 'promotions', pathMatch: "full"
            },
            {
                path: 'promotions', component: PromotionHomeComponent, pathMatch: "full",
                children: [
                    {
                        path: 'create', component: PromotionCreateComponent
                    }]
            },
        ]
    }

];

Update

I have tried removing pathmatch from the 'promotions' path, what happens is that I go to my PromotionHomeComponent component when trying to go to the /create url.

I don't have a routeroutlet in my PromotionHomeComponent. I was hoping it would use the main site header router outlet?

A 404 means that it redirects to my NotFoundComponent. I've updated my routing modules to show how that fits in.

There are no errors or messages in my console.

All this occurs via ng serve - all my other routes seem ok

2
angular
it won't work without a router-outlet, that's the entire purpose of children routes, creating a skeleton and nested routes that inherit from their parent routes. - Daniel Netzer
Oh, so how do I achieve what I'm trying to do? Not use a child route? - Evonet
if its not inheriting the template from the PromotionHomeComponent then its not a nested child, if you want that specific path to direct to the create component, just write the entire path promotions/create - Daniel Netzer
Thanks, for some reason I thought you couldn't have a '/' in the path...! - Evonet

2 Answers

0
votes
path: 'promotions', component: PromotionHomeComponent, pathMatch: "full"

Remove the pathMatch.

Did you put a router-outlet into your PromotionHomeComponent ? What exactly a 404 means ? Is it returned by your server once you deployed it, or is it when you use ng serve ? What is the console log ?

0
votes

If you are using nested-routing i.e., (using children attribute inside a children attribute). You need to add a <router-outlet> tag- in your case you have to use it in both the files marketplace.component.html and in promotionhome.component.html. By doing this you can fix the issue of routing completing.

But there may be an issue- the content of PromotionHomeComponent will be displyed in both PromotionHomeComponent and PromotionCreateComponent. As a solution for this you need to create a extra component to have a single <router-outlet> tag.

Please have a look at Angular 5 routerLink between parent component and other parent - child component

My solution for your task is to change the content of routes in marketplace.module to:

const routes: Routes = [
        {
            path: '',
            component: MarketplaceComponent,
            children: [
                {
                    path: 'promotions', component: PromotionHomeComponent
                },
                {
                    path: 'promotions/create', component: PromotionCreateComponent
                }
            ]
        }

    ];

So that you can ccess them from anywhere using /marketplace, /marketplace/promotions, and /marketplace/promotions/create