How to rename the routing URL of an angular component?

Question

I'm new to Angular and am trying to make some edits in an existing application.

There's a component called help in the current application which routes to mywebsite.com/help. I wish to change it to mywebsite.com/contact.

The help component folder has the following files: help.component.html, help.component.scss, help.component.spec.ts, help.component.ts and help.module.ts.

I tried modifying this part in general.routing.module.ts:

path: "help", // changed this to "contact"
        pathMatch: "full",
        loadChildren: "./pages/help/help.module#HelpModule",
        data: {
          title: "Help",
        },

But it didn't seem to help and I get a 404 error when I change the path to path: "contact" . Can someone please help me where to get started?

There's also another path for help:

{
        path: "help-auth",
        pathMatch: "full",
        loadChildren: "./pages/help/help.module#HelpModule",
        data: {
          title: "Help",
        },
      },

Do I also need to touch this?

Thanks :)

Answer 1

The correct solution was to indeed change general.routing.module.ts as below:

path: "contact", // changed this to "contact" from "help"
        pathMatch: "full",
        loadChildren: "./pages/help/help.module#HelpModule",
        data: {
          title: "Help",
        },

I however forgot to change the html route and so got the 404 error.

This had to be changed from

<a class="nav-a" [routerLink]="['/help']" routerLinkActive="a-active">Help</a>

to

<a class="nav-a" [routerLink]="['/contact']" routerLinkActive="a-active">Contact</a>