routing in Angular 2 (v6 )

Question

I am having some issues with the routing in Angular 2 (v6 )

The site is structured like this:

(root, site.com/)

----subfolder1 (site.com/subfolder1)

----subfolder2 (site.com/subfolder2)

----client(site.com/client) << Anuglar Site

When we deploy we are using : ng build --prod --deploy-url=/client/

for some reasom it always goes to PageNotFoundComponent when we navigate to site.com/client/quote/88b02e09-511b-40c5-a64a-a3aeb2b9d239

Ours route param:

const routes: Routes = [ { path: '', component: QuoteSearchComponent }, { path: 'quote/:guid', component: QuoteComponent }, { path: '**', component: PageNotFoundComponent } ];

main.9a26b5fe0012f4ac3aae.js:1 GuardsCheckEnd(id: 1, url: '/quote/88b02e09-511b-40c5-a64a-a3aeb2b9d239', urlAfterRedirects: '/quote/88b02e09-511b-40c5-a64a-a3aeb2b9d239', state: Route(url:'', path:'') { Route(url:'quote/88b02e09-511b-40c5-a64a-a3aeb2b9d239', path:'quote/:guid') } , shouldActivate: true) main.9a26b5fe0012f4ac3aae.js:1 e {id: 1, url: "/quote/88b02e09-511b-40c5-a64a-a3aeb2b9d239", urlAfterRedirects: "/quote/88b02e09-511b-40c5-a64a-a3aeb2b9d239", state: e, shouldActivate: true} main.9a26b5fe0012f4ac3aae.js:1 Router Event: e main.9a26b5fe0012f4ac3aae.js:1 ResolveStart(id: 1, url: '/quote/88b02e09-511b-40c5-a64a-a3aeb2b9d239', urlAfterRedirects: '/quote/88b02e09-511b-40c5-a64a-a3aeb2b9d239', state: Route(url:'', path:'') { Route(url:'quote/88b02e09-511b-40c5-a64a-a3aeb2b9d239', path:'quote/:guid') } ) main.9a26b5fe0012f4ac3aae.js:1 e {id: 1, url: "/quote/88b02e09-511b-40c5-a64a-a3aeb2b9d239", urlAfterRedirects: "/quote/88b02e09-511b-40c5-a64a-a3aeb2b9d239", state: e} main.9a26b5fe0012f4ac3aae.js:1 Router Event: e main.9a26b5fe0012f4ac3aae.js:1 ResolveEnd(id: 1, url: '/quote/88b02e09-511b-40c5-a64a-a3aeb2b9d239', urlAfterRedirects: '/quote/88b02e09-511b-40c5-a64a-a3aeb2b9d239', state: Route(url:'', path:'') { Route(url:'quote/88b02e09-511b-40c5-a64a-a3aeb2b9d239', path:'quote/:guid') } ) main.9a26b5fe0012f4ac3aae.js:1 e {id: 1, url: "/quote/88b02e09-511b-40c5-a64a-a3aeb2b9d239", urlAfterRedirects: "/quote/88b02e09-511b-40c5-a64a-a3aeb2b9d239", state: e} main.9a26b5fe0012f4ac3aae.js:1 Router Event: t main.9a26b5fe0012f4ac3aae.js:1 ActivationEnd(path: 'quote/:guid') main.9a26b5fe0012f4ac3aae.js:1 t {snapshot: t} main.9a26b5fe0012f4ac3aae.js:1 Router Event: t main.9a26b5fe0012f4ac3aae.js:1 ChildActivationEnd(path: '') main.9a26b5fe0012f4ac3aae.js:1 t {snapshot: t} main.9a26b5fe0012f4ac3aae.js:1 Router Event: e main.9a26b5fe0012f4ac3aae.js:1 NavigationEnd(id: 1, url: '/quote/88b02e09-511b-40c5-a64a-a3aeb2b9d239', urlAfterRedirects: '/quote/88b02e09-511b-40c5-a64a-a3aeb2b9d239') main.9a26b5fe0012f4ac3aae.js:1 e {id: 1, url: "/quote/88b02e09-511b-40c5-a64a-a3aeb2b9d239", urlAfterRedirects: "/quote/88b02e09-511b-40c5-a64a-a3aeb2b9d239"}

Answer 1

I need more info about what are you trying to do, but check my example out as a guide:

Best practices said you always need to put path values in your statement.

import { RouterModule, Routes } from '@angular/router'
import { HomeComponent } from './components/home/home.component';
import { AboutComponent  } from './components/about/about.component'
import { HeroesComponent } from './components/heroes/heroes.component'

const APP_ROUTES: Routes = [
    { path: 'home', component: HomeComponent},
    { path: 'about', component: AboutComponent},
    { path: 'heroes', component: HeroesComponent},
    { path: '**', pathMatch: 'full', redirectTo: 'home'}
]

export const APP_ROUTING = RouterModule.forRoot(APP_ROUTES, { useHash: true });