1

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

LordGrim
  • 731
  • 2
  • 11
  • 22

3 Answers3

2

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.

Andrei Matracaru
  • 3,511
  • 1
  • 25
  • 29
  • It solved my problem. thanks. btw, is there a way to remove the "#"? I mean, is there a way to fix it without using the hash? – LordGrim Aug 24 '17 at 13:21
  • The clean way is to use the default location strategy (so not the hash), and do some configuration on the web server, as I mentioned. If you do use the HashLocationStrategy, the # is there to stay :) – Andrei Matracaru Aug 24 '17 at 13:29
  • How do I configure it? I'm just using github (angular-cli-ghpages) so that I can see my angular-app running. And it's just for my practice. But I want to learn the clean way or the right way. – LordGrim Aug 24 '17 at 13:33
  • For github it's a bit tricky, as I don't think you have a way to provide some configuration for the underlying hosting web server (maybe you do, I am not sure). What I found is this other workaround from @RahulSingh, check his post [here](https://rahulrsingh09.github.io/AngularConcepts/faq) (point 15) – Andrei Matracaru Aug 24 '17 at 13:37
  • But in general, as an example, to fix this for IIS check my other answer [here](https://stackoverflow.com/questions/45844102/angular-first-site-visit-non-root-path-works-locally-but-not-in-production/45844151#45844151), and for apache [here](https://github.com/mgechev/angular-seed/wiki/Deploying-prod-build-to-Apache-2) – Andrei Matracaru Aug 24 '17 at 13:40
  • I can configure it when I use node server right? example, my back-end is nodejs/expressjs. Can I do the configuration there? – LordGrim Aug 24 '17 at 13:43
  • I'm pretty sure you can, I just cannot give you an example for express. Basically for any web server it all comes down to doing URL rewrite so that any of your Angular routes are redirected to your index.html. You could try [express-urlrewrite](https://www.npmjs.com/package/express-urlrewrite) for example – Andrei Matracaru Aug 24 '17 at 13:49
0

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

Carsten
  • 4,005
  • 21
  • 28
  • But if I remove it, the page won't redirect to "design-brief" page. I'm using angular-cli-ghpages. And when I used the link "https://www.example.com/design-brief", It still shows "GET https://www.example.com/design-brief 404 ()" in my console log – LordGrim Aug 24 '17 at 13:01
0

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 }
)
Vinayak Shedgeri
  • 2,222
  • 1
  • 21
  • 24