Issue in Dynamic Routing after domain name in Angular 4+

Question

In my Angular 4 project I have a container component at route:

    const appRoutes: Routes = [
    { path: '', component: HomeComponent},
    { path: '404', component: NotfoundComponent},
    { path: 'pages/:page-handle', component: StaticpagesComponent },
    { path: 'blog/:blog-handle', component: StaticpagesComponent },
    { path: 'idx', component: ListingComponent },
    { path: 'area/:area-name', component: AreadetailComponent },
    { path: 'zip-code/:zip-name', component: ZipdetailComponent },
    { path: ':agent-handle', component:AgentComponent },
    // otherwise redirect to home
    { path: '**', redirectTo: '404' }
];

So i want to acccess different component after domain name For example

• http://localhost:8080/:zip-name then should call ZipdetailComponent

• http://localhost:8080/:area-name then should call AreadetailComponent

• http://localhost:8080/:page-handle then should call StaticpagesComponent

Issue: any name after domain goes into following route:

 { path: ':agent-handle', component:AgentComponent },

anyone know how can i solve?

Answer 1

On basis of routes you have define,It should be:

http://localhost:8080/zipcode/:zip-name  
http://localhost:8080/area/:area-name  
http://localhost:8080/pages/:page-handle