Cannot match any routes. URL Segment in Angular 11-CodePudding

Im having this message when entering to an INVALID route and I thought that It should render the home page as expected but I'm getting a uncaught promise.

import { Routes, RouterModule } from "@angular/router";
import { RegisterComponent } from "./index/register/register.component";

const routes: Routes = [
  {
    path: "",
    loadChildren: () => import("./index/index.module").then((m) => m.IndexModule),
  },
  {
    path: "portal",
    loadChildren: () => import("./portal/portal-module/portal.module").then((m) => m.PortalModule),
  },
  {
    path: "signup",
    component: RegisterComponent,
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { relativeLinkResolution: "legacy" })],
  exports: [RouterModule],
})
export class AppRoutingModule {}
```

```
vendor.js:32650 Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'uadjbkdasjkndas'
Error: Cannot match any routes. URL Segment: 'uadjbkdasjkndas'
```

CodePudding user response：

The first route inside the Routes object only accepts an empty path (or ""). To redirect any path not listed inside Routes to a specific component or module, add the wildcard path to it and it should work.

Snippet:

{ path: '**', component: <component-name> }

So in your case only change the path attribute:

{
    path: "**",
    loadChildren: () => import("./index/index.module").then((m) => m.IndexModule),
  },

References: https://angular.io/guide/router

CodePudding user response：

You need to handle not found route using wildcard routes. Here the sequence of route matter so wildcard route should always be added to end of the array

Please update your routing as follows:

const routes: Routes = [
 {
  path: "",
  loadChildren: () => import("./index/index.module").then((m) => m.IndexModule),
 },
 {
  path: "portal",
  loadChildren: () => import("./portal/portal-module/portal.module").then((m) => m.PortalModule),
 },
 {
  path: "signup",
  component: RegisterComponent,
 },
 {
  path: "**",
  redirectTo: "",
  pathMatch: 'full'
 }
];

PS: you can read this to know more about wildcard routes

CodePudding user response：

An alternative to a wild card is to use a route with a parameter so that you can access the value in your application.

So, you would then create a param path (where the parameter is some value prefixed with a :)

const routes: Routes = [
  {
    path: ""
  },
  {
    path: "portal"
  },
  {
    path: "signup"
  },
  {
    path: ":example"
  },
];

Then in your application you can access it:

export class ExampleComponent {
  constructor(private readonly route: ActivatedRoute){}

  ngOnInit() {
    this.route.params.subscribe(p => {
      if ('example' in p) {
        // do something with `p['example']`
      }
    })
  }
}