CODEWITHSUNDEEP
angular
Andres
Andres

Reputation: 83

Cannot match any routes. URL Segment in Angular 11

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 { NgModule } from "@angular/core";
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'

I already tried this

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: "portal",
    pathMatch: "full",
  },
];

And the behaviour is that everything is going to portal, also all the ones that are inside the index.

I've tried also adding pathMatch to the index routes.

Upvotes: 0

Views: 2776

Answers (3)

Get Off My Lawn
Get Off My Lawn

Reputation: 36289

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']`
      }
    })
  }
}

Upvotes: 0

YogendraR
YogendraR

Reputation: 2376

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

Upvotes: 0

Matheus Carvalho
Matheus Carvalho

Reputation: 535

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

Upvotes: 1

Related Questions