Dart/Angular 2: Pub serve 404 on page reload

Question

There are some similar questions but I did not find any solution for this problem yet.

Lets assume I use

pub serve --port 13371

in order to start my Angular 2 / Dart application locally. In the base file I have a router configured like this:

@RouteConfig(const [
  const Route(
      path: '/home',
      name: 'Home',
      component: HomeComponent,
      useAsDefault: true
  ),
  const Route(
      path: '/about',
      name: 'About',
      component: AboutComponent
  )
])
class AppComponent {}

and a template like this:

    <nav>
      <ul>
        <li>
          <a [routerLink]="['Home']">Home</a>
        </li>
        <li>
          <a [routerLink]="['About']">About</a>
        </li>
      </ul>
    </nav>

In Dartium or another Browser I go to http://localhost:13371/ which redirects me to http://localhost:13371/home. Whenever I press reload now I get a 404 error.

The reason of this is the server configuration. When angular changes the URL it knows where to go and how to rewrite the URL. But for the server /home or /about does not exist.

However my question is how can I configure pub in order to redirect always to index.html so that I can refresh and get forwarded to subsite then? Is there some configuration to add to pubspec.yaml?

Answer 1

Either add

bootstrap(AppComponent, [
  /* other providers */, 
  provide(LocationStrategy, useClass: HashLocationStrategy),
])

or use a proxy like Nginx that supports rewriting. pub itself doesn't support it in any way.

See also https://pub.dartlang.org/packages/pub_serve_rewrites

Answer 2

Do not use a slash on your path "/". Try this:

const userRoutes: Routes = [
    { path: 'home', component: HomeComponent, pathMatch: 'full' },
];