Angular 2.0 router not working on reloading the browser
Angular by default uses HTML5 pushstate (PathLocationStrategy
in Angular slang).
You either need a server that processes all requests like it were requesting index.html
or you switch to HashLocationStrategy
(with # in the URL for routes) https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class.html
See also https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/
To switch to HashLocationStrategy
use
update for >= RC.5 and 2.0.0 final
import {HashLocationStrategy, LocationStrategy} from '@angular/common';
@NgModule({
declarations: [AppCmp],
bootstrap: [AppCmp],
imports: [BrowserModule, routes],
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
]);
or shorter with useHash
imports: [RouterModule.forRoot(ROUTER_CONFIG, {useHash: true}), ...
ensure you have all required imports
For the new (RC.3) router
<base href=".">
can cause 404 as well.
It requires instead
<base href="/">
update for >= RC.x
bootstrap(AppCmp, [
ROUTER_PROVIDERS,
provide(LocationStrategy, {useClass: HashLocationStrategy})
// or since RC.2
{provide: LocationStrategy, useClass: HashLocationStrategy}
]);
import {provide} from '@angular/core';
import {
PlatformLocation,
Location,
LocationStrategy,
HashLocationStrategy,
PathLocationStrategy,
APP_BASE_HREF}
from '@angular/common';
update for >= beta.16 Imports have changed
import {BrowserPlatformLocation} from '@angular/platform-browser';
import {provide} from 'angular2/core';
import {
// PlatformLocation,
// Location,
LocationStrategy,
HashLocationStrategy,
// PathLocationStrategy,
APP_BASE_HREF}
from 'angular2/router';
import {BrowserPlatformLocation} from 'angular2/src/router/location/browser_platform_location';
< beta.16
import {provide} from 'angular2/core';
import {
HashLocationStrategy
LocationStrategy,
ROUTER_PROVIDERS,
} from 'angular2/router';
See also https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta16-2016-04-26 breaking-changes
The error you are seeing is because you are requesting http://localhost/route which doesn't exist. According to Simon.
When using html5 routing you need to map all routes in your app(currently 404) to index.html in your server side. Here are some options for you:
using live-server: https://www.npmjs.com/package/live-server
$live-server --entry-file=index.html`
using nginx: http://nginx.org/en/docs/beginners_guide.html
error_page 404 /index.html
Tomcat - configuration of web.xml. From Kunin's comment
<error-page> <error-code>404</error-code> <location>/index.html</location> </error-page>
Disclaimer: this fix works with Alpha44
I had the same issue and solved it by implementing the HashLocationStrategy listed in the Angular.io API Preview.
https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class.html
Start by importing the necessary directives
import {provide} from 'angular2/angular2';
import {
ROUTER_PROVIDERS,
LocationStrategy,
HashLocationStrategy
} from 'angular2/router';
And finally, bootstrap it all together like so
bootstrap(AppCmp, [
ROUTER_PROVIDERS,
provide(LocationStrategy, {useClass: HashLocationStrategy})
]);
Your route will appear as http://localhost/#/route and when you refresh, it will reload at it's proper place.
Hope that helps!
I think the error you are seeing is because your are requesting http://localhost/route which doesn't exist. You need to make sure that your server will map all requests to your main index.html page.
As Angular 2 uses html5 routing by default rather than using hashes at the end of the url, refreshing the page looks like a request for a different resource.