Angular not able to load another routes-CodePudding

Trying to create a web application using Angular 11, I found a problem for routing: When I navigate from initial route (

{ path: '', component: HomeComponent }

) to another routes everything is working as expected, but when I try to navigate the website from another route, the router redirects me to initial route. I am not able to send a link from my web application (other than '') to another person, because the router redirects to '' (home) route.

Example:

const routes : Routes = [
  { path: '', component: HomeComponent },
  { path: 'product/:id', component: ProductComponent }
];

From https://localhost:4200, when I access https://localhost:4200/product/14 works fine, but when I try to access directly https://localhost:4200/product/14 I will be redirected to https://localhost:4200

How can i configure my angular application to be able to accept any initial route?

CodePudding user response：

Try adding this:

const routes : Routes = [
  { path: '', 
    component: HomeComponent,
    pathMatch: 'full'
  },
  { path: 'product/:id', component: ProductComponent }
];

CodePudding user response：

Try changing it to -

const routes : Routes = [
  { path: 'home', 
    component: HomeComponent
  },
  { path: 'product/:id', component: ProductComponent },
  { path: '', 
    redirectTo: '/home',
    pathMatch: 'full'
  },
];