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 · Accepted Answer · 2016-02-29 15:01:56Z

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, 2016 at 15:01

answered Feb 29, 2016 at 14:34

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Ng2-Fun Over a year ago

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?

Thierry Templier Over a year ago

Which of Angular2 do you use?

Thierry Templier Over a year ago

Did you try without the "<base href...>"?

Ng2-Fun Over a year ago

I am using angular2 beta 0. Finally, I solve the problem by using <script>document.write('<base href="' + document.location + '" />');</script> instead of <base href="/">.

Thierry Templier Over a year ago

I think that you don't need <base href...>

|

Community · Accepted Answer · 2017-05-23 12:02:24Z

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.

Collectives™ on Stack Overflow

Angular2 routes: using HashLocationStrategy got a 404 not found error

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related