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>
Need Some Angular 2 Help?
Search fiverr for freelance Angular 2 developers.
Follow me for updates
When I'm not coding...
Me and Tina are on a motorcycle adventure around Australia.
Come along for the ride!