Angular 2 CLI App throwing 404 errors once deployed

Question

I recently updated an app I've been working on to latest version of Angular CLI (currently beta25). Using ng serve all routing works perfectly locally.

I then use ng build --prod, zip up the dist directory and load it to my web server (currently hosted on AWS Tomcat). When I navigate index.html, I'm using a default route to drop into a "home" component. Everything works to that point. If I refresh the browser, however, I get a 404. Additionally any direct and deep link navigation I attempt to other views in the app throw 404 as well (Here is my app.routing.ts for reference)

import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { SolutionComponent } from './solution/solution.component';
import { AssetComponent } from './asset/asset.component';
import { PropertyComponent } from './property/property.component';

export const appRoutes: Routes = [
{
    path: 'home',
    component: HomeComponent
},
{
    path: 'solution',
    component: SolutionComponent
},
{
    path: 'asset',
    component: AssetComponent
},
{
    path: 'asset/:solutionId',
    component: AssetComponent
},
{
    path: 'property/:solutionId',
    component: PropertyComponent
},  
{
    path: 'property',
    component: PropertyComponent
},      
{
    path: '',
    redirectTo: '/home',        
    pathMatch: 'full'
},
];

I've read in other posts that this may be related to PathLocationStrategy, and one in particular indicated that I needed to adjust my base href as follows.

<!doctype html>
<html>
<head>
  <base href="./">

I've tried deploying versions of the app with and without the dot and the issue still persists. I'm kind of stumped. I read about folks having similar issues but haven't found a good solution documented. I'm hopeful that someone in the Angular 2 community might help shed some light on what's happening and give me an idea on how to move forward. Thanks in advance!

EDIT 1/15/2017: In case it's helpful for anyone, I wanted to circle back and highlight a couple of things I had to do to deploy my "finished" Angular2 CLI application to a hosted environment.

First, to turn on the Rewrite Valve on Apache Tomcat8 on AWS (pretty standard hosting option) I had to use the ElasticBeanstalk ebextensions feature in order to swap in a context.xml file with the Tomcat rewrite valve enabled. The server-update.config file looked like this for me:

container_commands: 
  replace-config: 
    command: cp .ebextensions/context.xml /etc/tomcat8/context.xml

Second, the url rewrite itself. there may be a more elegant way to do this that hasn't occurred to me yet, but my rewrite.config currently looks like this:

# match requests for basic resource files and pass them through without substitution
RewriteCond %{REQUEST_URI} ^.*\.(css|js|jpg|png|ico|woff2|woff|ttf).*$
RewriteRule ^.*$ - [L]

# app-specific rules
# match app routes and redirect to index.html
RewriteCond %{REQUEST_URI} ^.*\/home.*$ [OR]
RewriteCond %{REQUEST_URI} ^.*\/solution.*$ [OR]
RewriteCond %{REQUEST_URI} ^.*\/asset.*$ [OR]
RewriteCond %{REQUEST_URI} ^.*\/property.*$
RewriteRule ^.*$ /index.html [L]

You need to configure url rewrite on your server, saw a post a day or so ago, can't find it. — penleychan
just <base href="/"> without the . and if you have your app in a folder where you build it try somthing like <base href="/index.html"> or <base href="/app_build/"> — federico scamuzzi

Martin Martin · Accepted Answer · 2017-01-08T00:58:46

You need to enable Html5 pushstate support on your web server.

This is very trivial for nginx, Apache and IIS, as well as other web servers.

This is done through a set of rewrite rules that implement the following conditions:

if the request is for file that exists, return it
otherwise return the index.html

A Google search for instructions on your specific web server should get you started.

Angular 2 CLI App throwing 404 errors once deployed

1 Answers