CODEWITHSUNDEEP
javascriptangular
LordGrim
LordGrim

Reputation: 751

Angular Router Get 404 Bug?

My problem is that every time I load my link. Ex: "https://www.example.com/" it will redirect to "https://www.example.com/design-brief" since I configured it in my routing.ts. But when I will use the link "https://www.example.com/design-brief" and enter in my address bar, it will show an error in console log. "GET https://www.example.com/design-brief 404 ()"

const APP_ROUTES: Routes = [
{ path: 'design-brief', component: DesignBriefComponent },
{ path: 'design-evaluation', component: DesignEvaluationComponent },
{ path: '', redirectTo: '/design-brief', pathMatch: 'full' },
{ path: "**",redirectTo:"/design-brief" } ];

Here is my code in my routing.ts

Upvotes: 1

Views: 1224

Answers (3)

Vinayak Shedgeri
Vinayak Shedgeri

Reputation: 2392

I Solved it by using Hash location strategy.Add following code to the imports portion of the @ngModule and prefix all your hyperlink with # and also refer offecial link for info

RouterModule.forRoot(
   appRoutes,{ useHash: true }
)

Upvotes: 0

Andrei Matracaru
Andrei Matracaru

Reputation: 3671

See my answer here for a more detailed explanation of why this is happening.

In a nutshell, you have 2 options:

  1. Configure your web server to always respond with the index.html whenever it detects a 404 - that way, Angular will always load and its routing service will handle the navigation on the client side.

  2. Change your app's locationStrategy to the Hash location strategy as described here. However, that would change your app's URLs, and it's not that desirable in my opinion.

Upvotes: 3

Carsten
Carsten

Reputation: 4208

You don't need the empty path and the ** path, only the ** path with pathMatch 'full':

const APP_ROUTES: Routes = [
{ path: 'design-brief', component: DesignBriefComponent },
{ path: 'design-evaluation', component: DesignEvaluationComponent },
{ path: "**",redirectTo:"design-brief",pathMatch: 'full' } ];

and redirect does not need the slash (/) in front of design-brief

Upvotes: 0

Related Questions