CODEWITHSUNDEEP
javascriptrouteshttp-status-code-404angular
user3518500
user3518500

Reputation: 19

Configure routing

I have created a sample app using @RouteConfig and it working fine. See the url changes and view added according to configuration, but when I am refreshing the page it's showing a 404 error.

I am using WebStorm IDE to build and run the app.

The same problem happens with given live example on angular.io.

I have downloaded the sample code example for routing and navigation in AngularJS2 on https://angular.io/resources/live-examples/router/ts/plnkr.html which given on angular.io and opened the project into WebStorm and ran it.

It working fine but after doing some routing and then refreshing the page it shows a 404 Error.

Upvotes: 0

Views: 218

Answers (3)

Pratik Kelwalkar
Pratik Kelwalkar

Reputation: 1632

This will solve your problem, add this to your bootstrap

import {bootstrap} from 'angular2/platform/browser';

import {provide}   from 'angular2/core';
    bootstrap(AppComponent,[ROUTER_PROVIDERS,
        provide(LocationStrategy, { useClass: HashLocationStrategy })]);

Now whenever you hit a refresh or a hard reload the default component defined in @RouteConfig would be loaded.

in your AppComponent : 

@RouteConfig([
    {path: '/login', name : 'Login' , component : Login , useAsDefault: true}
])

Upvotes: 0

Peter Trotman
Peter Trotman

Reputation: 433

Make sure you've included a 

<base href="/">

in your head section. Aside from that, we're going to need more information.

Upvotes: 0

Umut Benzer
Umut Benzer

Reputation: 3526

Angular 2 (in default) uses html5 pushState for router states. Which means actual url changes between states.

For example for home page you may be in url: / and you click something, your address becomes /newAddress. This is done using pushState api and pure frontend. But if you refresh page, server tries to render the resource on /newAddress but, of course, there is no such resource on server. You need to configure your server to host / whatever the url is, but I don't know if it is possible or not in WebStorm internal server. You can install and use superstatic npm package.

OR... You can configure Angular 2 to use hashbang based urls (such as /#/ and /#/newAddress). That way, you hit / every time from perspective of backend.

This page has detailed explanation.

Upvotes: 1

Related Questions