Angular2 routes: using HashLocationStrategy got a 404 not found error

Question

Here is my project directory structure:

--root
   --app
      --app.ts
      --boot.ts
   --index.html 
   --node_modules

Here is my code:

boot.ts

    bootstrap(AppComponent, [
        ROUTER_PROVIDERS,
        provide(LocationStrategy, {useClass: HashLocationStrategy})
    ]);

app.ts

@RouteConfig([
    {path: '/', name: 'root', redirectTo: ['/pageA']},
    {path: '/page-a', name: 'pageA', component: PageA},
    {path: '/page-b', name: 'pageB', component: PageB}
])

html file:

<head>
    <base href="/">
    <script src="node_modules/angular2/bundles/router.dev.js"></script>
    ...
</head>

It works, but when I look at the console, it tell me "http://localhost:63342/#/page-a Failed to load resource: the server responded with a status of 404 (Not Found)"

In addition, when I refresh the page, it shows the "404 not found" page.

Thierry Templier · Answer 1 · 2016-02-29T15:01:56.567

1

I would use useAsDefault instead of redirectTo:

@RouteConfig([
    {path: '/page-a', name: 'pageA', component: PageA, useAsDefault: true},
    {path: '/page-b', name: 'pageB', component: PageB}
])

In the case of the HashLocationStrategy strategy, using isn't necessary...

edited Feb 29 '16 at 15:01

answered Feb 29 '16 at 14:34

Thierry Templier

198,364
44
396
360

I actually tried both ways, but had the same error. BTW, why do you prefer useAsDefault? Is there any special reason that useAsDefault is better than redirectTo? – Ng2-Fun Feb 29 '16 at 14:36
Which of Angular2 do you use? – Thierry Templier Feb 29 '16 at 14:48
Did you try without the ""? – Thierry Templier Feb 29 '16 at 14:50
I am using angular2 beta 0. Finally, I solve the problem by using instead of . – Ng2-Fun Feb 29 '16 at 14:58
I think that you don't need – Thierry Templier Feb 29 '16 at 15:00
In fact, using will define à base path for all relative paths in the page... What is the value of document.location? – Thierry Templier Feb 29 '16 at 15:21
The value of document.location is: `http://localhost:63342/btnRoutes2/index.html`. Also, if I don't use , it also works. I wonder why it also works? – Ng2-Fun Feb 29 '16 at 15:42
Oh! It wasn't clear that you have a base path btnRoutes2. That's why doesn't work... Using should work. – Thierry Templier Feb 29 '16 at 15:52

score 0 · Accepted Answer · edited May 23 '17 at 12:02

Finally solved the problem by using two ways, the first way is highly recommended.

1.see this post for details: Angular 2 router no base href set

<base href="/root/">

2.without setting <base href...>, I can't figure out the reason yet.

3.from documentation:

<script>document.write('<base href="' + document.location + '" />');</script>

Get hint from the official documentation and examples: https://angular.io/docs/ts/latest/guide/router.html
http://plnkr.co/edit/?p=preview

Notes from documentation:

Live example note

We have to be get tricky when we run the live example because the host service sets the application base address dynamically. That's why we replace the <base href...> with a script that writes a <base> tag on the fly to match.
<script>document.write('<base href="' + document.location + '" />');</script>
We should only need this trick for the live example, not production code.

Angular2 routes: using HashLocationStrategy got a 404 not found error

2 Answers2