It is common to encounter a 404 error when refreshing your application as the browser's address bar updates without using the hashbang approach. By default, Angular2 utilizes HTML5 history for navigation.
To prevent the 404 error, you must configure your server to serve the index.html file for each defined route path.
If you prefer to switch to the HashBang approach, follow this configuration:
import {bootstrap} from 'angular2/platform/browser';
import {provide} from 'angular2/core';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {LocationStrategy, Location, HashLocationStrategy } from 'angular2/router';
import {MyApp} from './myapp';
bootstrap(MyApp, [
ROUTER_PROVIDERS,
provide(LocationStrategy, {useClass: HashLocationStrategy}
]);
With this setup, refreshing the page will display it again, but with a # in the address.
Check out this helpful link: When I refresh my website I get a 404. This is with Angular2 and firebase.
For Lavarel, make sure to configure redirects using Redirect::to($route) for each Angular2 route element.
Here are some useful links:
Hope these resources help you out,
Thierry