Url in browser will not navigate to corresponding routerlink

Question

I have a single-page website running on an apache web server written using angular cli. I have a homepage and multiple links that navigate using the routerlink tag that work perfectly normally. However when I click on "about", for example, it navigates to website.net/about and everything is perfect until the page is reloaded or I manually type in website.net/about when it throws a 404 error.

This is the main app code:

index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';

import { AppComponent } from './app.component';
import { ProgramsComponent } from './programs/programs.component';
import { AboutComponent } from './about/about.component';

@NgModule({
  declarations: [
    AppComponent,
    ProgramsComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([{
        path: 'programs',
        component: ProgramsComponent
      },
      {
        path: 'about',
        component: AboutComponent
      }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts:

import { Component } from '@angular/core';
import {ProgramsComponent} from './programs/programs.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Title';
}

app.component.html:

<div id="header" style="text-align:Left">
  <header>
    <a href="../index.html">
      <h1>
        {{ title }}
      </h1>
    </a>
    <nav>
      <div class="nav-comp">
        <a routerLink="/about">About</a>
        <a routerLink="/programs">Programs</a>
      </div>
    </nav>
  </header>
</div>
<router-outlet></router-outlet>

any help and/or links would be appreciated if alternatively if this can be fixed using the apache web server I would be open to fixing it that way but would prefer not to

use [HashLocationStrategy](https://angular.io/guide/router#appendix-locationstrategy-and-browser-url-styles) — Vikas, May 27 '18 at 04:07
I don't understand how you can use that @Vikas it is simply the default function of angular and doesn't seem to work — b-rad15, May 27 '18 at 21:03
Refer this https://angular.io/guide/deployment#routed-apps-must-fallback-to-indexhtml — Vikas, May 28 '18 at 06:26
Either you use `HashLocationStrategy` or configure your Server to return Fallback page — Vikas, May 28 '18 at 06:28

score 0 · Answer 1 · answered May 27 '18 at 02:50

0

I'm guessing the problem is in your apache configuration, apparently there's nothing wrong with your code.

answered May 27 '18 at 02:50

Rodrigo Lanes

55
5

score 0 · Answer 2 · answered May 28 '18 at 23:16

Ok so I had to do some digging and I would like the thank u/vaskemaskine on reddit for the .htaccess file and sci buff on this post but here I go

So first in the /var/www/html I had to create a file named .htaccess and place this code in it

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) /index.html [NC,L]

then in order to allow this to occur, because of a change in Apache 2.4, I had to AllowOverrides in /etc/apache2/apache2.conf by changing

<Directory />
        Options FollowSymLinks
        AllowOverride None
        Require all denied
</Directory>

<Directory /usr/share>
        AllowOverride None
        Require all granted
</Directory>

<Directory /var/www/>
        Options Indexes FollowSymLinks
        AllowOverride None
        Require all granted
</Directory>

to

<Directory />
        Options FollowSymLinks
        AllowOverride All
        Require all denied
</Directory>

<Directory /usr/share>
        AllowOverride All
        Require all granted
</Directory>

<Directory /var/www/>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
</Directory>

then however I got an error running RewriteEngine as it was not installed but that was able to be cleared up simply by running sudo a2enmod rewrite && sudo service apache2 restart in the terminal

Url in browser will not navigate to corresponding routerlink

2 Answers2