Angular route segments with missing parent: how to avoid errors?

Question

I have an Angular 14 app that uses the routing module, and I have a couple of routes that look like this:

{path: "settings/global", component: GlobalSettingsEditComponent, ...},
{path: "settings/tenant", component: TenantSettingsEditComponent, ...},
{path: "settings/license", component: LicensePageComponent, ...}

However, I do not have any route mapped to the "settings" path, so these paths are "parentless" in a sense. This is ok, since I do not have a generic "settings" page in this app, all the sections of the settings are accessed directly via a menu.

Now, functionally this configuration seems to work without issues and when navigating to those paths the associated components load correctly. However, every time I navigate to one of those paths I get this error on the browser's console:

Error: NG04002: Cannot match any routes. URL Segment: 'settings'

How do I avoid this error?

Answer 1

This error happen because Angular didn't see such a route in your config. To avoid this you can use the following structure. Notice that component is optional for the route so you can avoid it.

  {
    path: 'settings',
    children: [
      { path: "global", component: GlobalSettingsEditComponent, ...},
      { path: "tenant", component: TenantSettingsEditComponent, ...},
      { path: "license", component: LicensePageComponent, ...}
    ]
  }