0

When clicking any links within my website on my serve of it, they work. However, after using ng build, none of the page links work. The website is: hiphost.co.za if you would like to test it yourself and see.

here is the code for my router: 

RouterModule.forRoot([
      {
        path: '',
        redirectTo: '/home',
        pathMatch: 'full'
      },
      {
        path: 'home',
        component: HomeComponent,
        pathMatch: 'full'
      },
      {
        path: 'terms-and-conditions',
        component: TermsAndConditionsComponent
      },
      {
        path: 'privacy',
        component: PrivacyPolicyComponent
      },
      {
        path: 'about',
        component: AboutComponent
      },
      {
        path: 'contact',
        component: ContactComponent
      },
      {
        path: 'team',
        component: TeamComponent
      },
      {
        path:'safety',
        component: SafetyComponent
      }
    ]

)

So when you go to hiphost, it automatically redirects to /home, and then no links from there will work

Betzel11
  • 559
  • 2
  • 6
  • 12

3 Answers3

0

All the request of routing is being handled by server instead of your app thus giving 404.

Easiest solution of it will be to direct your server to redirect all your requests to index.html so that your angular router can handle it.

Shyam Tayal
  • 486
  • 2
  • 13
  • how do I direct my server to redirect to index.html every time? does this involve something like this? [[redirects]] from = "/*" to = "/index.html" If so, where do I add something like this? Is it in my code snippet above where I can add that? – Betzel11 Sep 03 '18 at 12:22
  • Not in your angular router , you ngnix routing or whatever server you are using to serve the app. – Shyam Tayal Sep 03 '18 at 12:35
  • 1
    Ya so I am using NGnix, and I understand that this is the code snippet I need (based off of angular's site) but I still don't understand where to place it: try_files $uri $uri/ /index.html; – Betzel11 Sep 03 '18 at 13:49
  • You have to add in nginx.conf file which will be located at /etc/nginx/nginx.conf. If it does not exist there, it may also be at /usr/local/nginx/conf/nginx.conf or /usr/local/etc/nginx/nginx.conf. – Shyam Tayal Sep 04 '18 at 05:46
0

In production, angular apps are hosted by a web server. SO when you are redirecting to any nested view. the web server does not recognize the path & throws 404 error. Kindly follow this link to know how to tell web server to navigate to the nested view.

Rewriting URL for angular app in production

Bhushan Gadekar
  • 13,485
  • 21
  • 82
  • 131
  • I see all these different code snippets, but I don't understand where to place them in order for the effect to work? Do I put it in my app.module.ts? environment.ts? environment.prod.ts? – Betzel11 Sep 03 '18 at 14:23
0

you need this on your web.config file 

<system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

you also need to add this on your index.html.

<base href="/">
masera ngelekanyo
  • 53
  • 6