0
私は学習中に角度2を使用してレストランmgmtの簡単なアプリケーションを作成しました。今私はアプリのバンドルを作成するなど、いくつかの高度なものを試しています、アプリケーションの最適化と最適化。ブラウザリフレッシュはangular2コンポーネントをロードしませんが、404を与えます
アプリケーションが正しく認証コンポーネントで読み込まれます。認証後、ホームコンポーネントに正しくルーティングされます。私は上にナビゲーションバーを持っています。私はそれを使用して、アプリケーション内のさまざまなページに移動することができ、すべて正常に動作します。たとえば、私はlocalhost：3000から始めます。localhost：3000/homeに移動します。最終的に私はURL：localhost：3000 /消費で1ページに達します。ページが正しく読み込まれました。しかし、ブラウザのリフレッシュボタンを使用してページをリフレッシュすると、404が表示されます。ナビゲーションバーを使用し続けると、すべて正常に動作します。
この問題はルーティングに起因するものですが、疲れたバージョンのルートはありますが、エラーは継続します。
次のように私のindex.htmlは次のように
<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>
私app.routing.tsは次のとおりです。
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}
]);
http://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser/34104534#34104534およびhttp： /stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser –