Routing doesn't work for me when doing a hard refresh

I was looking at this source code:

and it seems that my application will route right now when i go to the root.


The routing updates as i move around my application, but it seems that if i am at something: localhost:8080/dashboard in a basecase, and do a hard refresh, it fails. It will give me a 404 not found! error.

It will work just find if i do: localhost:8080/#!/dashboard but that is not the address passed into my application.

In the index.html i have: <base href="/">

My App_Component.dart file is as follows:

import 'package:angular2/angular2.dart';
import 'package:angular2/router.dart';

import 'hero_component.dart';
import 'heroes_component.dart';
import 'dashboard_component.dart';
import 'hero_service.dart';
    selector: "my-app",
    directives: const [ROUTER_DIRECTIVES],
    providers: const [HeroService, ROUTER_PROVIDERS],
    templateUrl: "app_component.html")
@RouteConfig(const [
  const Route(
      path: "/dashboard",
      name: "Dashboard",
      component: DashboardComponent,
      useAsDefault: true),
  const Route(
      path: "/detail/:id", name: "HeroDetail", component: HeroDetailComponent),
  const Route(path: "/heroes", name: "Heroes", component: HeroesComponent)
class AppComponent {
  String title = "Tour of Heroes";

It seems I have routing working for everything except this.

My desired end state would be doing: localhost:8080/detail/14 and it would open the correct component. This is something that isnt done now on a fresh site reference as much as when navigating throughout the application.

Leave a Reply

3 Comment threads
0 Thread replies
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
newest oldest most voted
Notify of

To switch to HashLocationStrategy change the providers to

bootstrap(AppComponent, [
  provide(LocationStrategy, useClass: HashLocationStrategy)

If you want to use PathLocationStrategy you can use this pub serve-wrapper that allows to use PathLocationStrategy with pub serve.

For deployment you need to configure the webserver you use there to support HTML5 pushState.


Routes exist only in your app, server does not know anything, it just checks path /dashboard or /detail/14 for default page/file which does not exist.

You have to configure server router to navigate to app index.html (your html name here) for all your app routes.


If localhost:8080/#/dashboard works but localhost:8080/dashboard fails, it suggests you’re using HashLocationStrategy rather than PathLocationStrategy.

Checking your bootstrap() function or somewhere else, make sure no HashLocationStrategy is injected.