Browser refresh doesnt load angular2 component but gives 404

Question

I have written a simple application for restaurant mgmt using angular 2 while learning. Now i am trying some advanced stuff like creating an app bundle, minifying and optimization of app.

My application loads properly with authentication component. It routes properly to home component after authentication. I have navigation bar at top. I can use that to navigate to different pages in my app and all that works fine. For example, I start with url localhost:3000 then I navigate to localhost:3000/home. Ultimately I reach to one page with url localhost:3000/consumption. Page is loaded properly. But if I refresh the page using browser refresh button then I get 404. If I keep using my navigation bar then everything works fine.

I am pretty sure, this issue is due to routing but tired different versions of routes but error persists.

My index.html is as follows:

<html>
  <head>
    <base href="/">
    <title>Tilt45</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="assets/stylesheets/bootstrap.min.css">
    <link rel="stylesheet" href="assets/stylesheets/ng2-select.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="node_modules/bootstrap/js/dropdown.js"></script>
    <script src="https://use.fontawesome.com/b4147fc538.js"></script>
    <link href="/favicon.ico" type="image/x-icon" rel="icon" />
    <script src="node_modules/chart.js/dist/Chart.bundle.js"></script>

    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <!--<script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>-->
    <!-- 3. add bundle -->
    <script src="dist/bundle.min.js"></script>
  </head>
  <!-- 4. Display the application -->
  <body>
    <my-app>Loading..</my-app>
  </body>
</html>

My app.routing.ts is as follows:

import { Router, RouterModule} from '@angular/router';

import {NavbarComponent} from './navbar/navbar.component';
import {AuthenticationComponent} from './components/authentication/authentication.component';
import {HomeComponent} from './home/home.component';
import {HotelsComponent} from './components/hotel/hotels.component';
import {NewHotelComponent} from './components/hotel/new-hotel.component';
import {RestaurantsComponent} from './components/restaurant/restaurants.component';
import {NewRestaurantComponent} from './components/restaurant/new-restaurant.component';
import {BarsComponent} from './components/bar/bars.component';
import {NewBarComponent} from './components/bar/new-bar.component';
import {LogMessageCategoriesComponent} from './components/log-message-category/log-message-categories.component';
import {NewLogMessageCategoryComponent} from './components/log-message-category/new-log-message-category.component';
import {LogMessagesComponent} from './components/log-message/log-messages.component';
import {LiquorCategoriesComponent} from './components/liquor-category/liquor-categories.component';
import {NewLiquorCategoryComponent} from './components/liquor-category/new-liquor-category.component';
import {LiquorsComponent} from './components/liquor/liquors.component';
import {NewLiquorComponent} from './components/liquor/new-liquor.component';
import {UserRolesComponent} from './components/user-role/user-roles.component';
import {NewUserRoleComponent} from './components/user-role/new-user-role.component';
import {UsersComponent} from './components/user/users.component';
import {NewUserComponent} from './components/user/new-user.component';
import {LiquorBottlesComponent} from './components/liquor-bottle/liquor-bottles.component';
import {NozzlesComponent} from './components/nozzle/nozzles.component';
import {NewNozzleComponent} from './components/nozzle/new-nozzle.component';
import {PoursComponent} from './components/pour/pours.component';
import {ConsumptionComponent} from './components/consumption/consumption.component';

export const routing = RouterModule.forRoot([
    //{path:"", component: AuthenticationComponent}
    //, 
    {path:"authenticate", component:AuthenticationComponent}
    , {path:"home", component: HomeComponent}
    , {path:"hotels", component: HotelsComponent}
    , {path:"hotels/new", component: NewHotelComponent}
    , {path:"hotels/:id", component: NewHotelComponent}
    , {path:"restaurants", component: RestaurantsComponent}
    , {path:"restaurants/new", component: NewRestaurantComponent}
    , {path:"restaurants/:id", component: NewRestaurantComponent}
    , {path:"bars", component: BarsComponent}
    , {path:"bars/new", component: NewBarComponent}
    , {path:"bars/:id", component: NewBarComponent}
    , {path:"logmsgcategories", component: LogMessageCategoriesComponent}
    , {path:"logmsgcategories/new", component: NewLogMessageCategoryComponent}
    , {path:"logmsgcategories/:id", component: NewLogMessageCategoryComponent}
    , {path:"logmsgs", component: LogMessagesComponent}
    , {path:"liquorcategories", component: LiquorCategoriesComponent}
    , {path:"liquorcategories/new", component: NewLiquorCategoryComponent}
    , {path:"liquorcategories/:id", component: NewLiquorCategoryComponent}
    , {path:"liquors", component: LiquorsComponent}
    , {path:"liquors/new", component: NewLiquorComponent}
    , {path:"liquors/:id", component: NewLiquorComponent}
    , {path:"userroles", component: UserRolesComponent}
    , {path:"userroles/new", component: NewUserRoleComponent}
    , {path:"userroles/:id", component: NewUserRoleComponent}
    , {path:"users", component: UsersComponent}
    , {path:"users/new", component: NewUserComponent}
    , {path:"users/:id", component: NewUserComponent}
    , {path:"liquorbottles", component: LiquorBottlesComponent}
    , {path:"nozzles", component: NozzlesComponent}
    , {path:"nozzles/new", component: NewNozzleComponent}
    , {path:"nozzles/:id", component: NewNozzleComponent}
    , {path:"pours", component: PoursComponent}
    , {path:"consumption", component: ConsumptionComponent}
    , {path:"**", component: AuthenticationComponent}
]);

See http://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser/34104534#34104534 and http://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser — Günter Zöchbauer, Jan 18 '17 at 09:27

score 0 · Accepted Answer · answered Jan 18 '17 at 09:28

0

It's because of your webserver. There are plenty of questions with this same 'problem'. You do a request to localhost:3000/consumption. The webserver will try to look in the consumption folder to look for a index.html file. But there is no.

You got two options, either change to HashLocationStrategy, or set your local webserver in such a way that all requests which result in 404 are redirected to the root index.html.

A third option is to use lite-server as a node webserver for local development, or the angular-cli. These have this functionality built-in

answered Jan 18 '17 at 09:28

Poul Kruijt

69,713
12
145
149

what is the best strategy for prod environment? – Darshan Puranik Jan 18 '17 at 09:30
1

Set your webserver on your production to redirect all 404 request to `index.html`. It depends on your production webserver as in how to do that, but there are plenty of examples out there – Poul Kruijt Jan 18 '17 at 09:32

Browser refresh doesnt load angular2 component but gives 404

1 Answers1