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) { res.sendFile(path.resolve('app/index.html')); }); 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

<rewrite> <rules> <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" /> </conditions> <action type="Rewrite" url="/" /> </rule> </rules> </rewrite>