February 24 2017

Angular 2 - Refresh Without 404 in Node & IIS

I posted these instructions a while back for Angular 1 applications, it works exactly the same for Angular 2 so I thought I'd repost for anyone looking how to prevent 404 errors after page refresh in Angular 2 applications running on NodeJS (e.g. MEAN Stack) or IIS servers.

By default Angular 2 applications don't use a hash (#) prefix on urls, the effect of this is that if you try to navigate directly to a deep link in your angular app or refresh an internal page you may get a 404 page not found error. This is because the web server receiving the request looks for a resource matching the full url on the server, which doesn't exist because the angular portion of the url refers to a route in your angular application and needs to be handled in the client browser.

The way to fix this is by rewriting all virtual urls to the main Angular 2 index.html file, below are examples of how to do this in NodeJS and IIS.

Angular 2 + Node/Express/MEAN - Routes to prevent 404 error after page refresh

For angular 2 applications being served by Node and Express (e.g. MEAN Stack)

var express = require('express');
var path = require('path');
var router = express.Router();

// serve angular front end files from root path
router.use('/', express.static('app', { redirect: false }));

// rewrite virtual urls to angular app to enable refreshing of internal pages
router.get('*', function (req, res, next) {

module.exports = router;

Angular 2 + IIS - URL Rewrite Rule to prevent 404 error after page refresh

For angular 2 applications being served by IIS on Windows

    <rule name="Angular" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      <action type="Rewrite" url="/" />

Sponsored by