Question

我在学习时使用角度2为餐馆管理写了一个简单的应用程序。现在我正在尝试一些高级的东西，比如创建应用程序包，缩小和优化应用程序。

我的应用程序正确加载了身份验证组件。它在身份验证后正确路由到主组件。我在顶部有导航栏。我可以使用它导航到我的应用程序中的不同页面，一切正常。例如，我从网址 localhost：3000 开始，然后导航到 localhost：3000 / home 。最后，我使用网址 localhost：3000 /消费 来访问一个页面。页面已正确加载。但是，如果我使用浏览器刷新按钮刷新页面，那么我得到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}
]);

Answer 1

这是因为你的网络服务器。对于同样的“问题”，有很多问题。你对localhost：3000 /消费做了请求。 Web服务器将尝试查找consumption文件夹以查找index.html文件。但没有。

您有两个选项，可以更改为HashLocationStrategy，也可以设置本地网络服务器，以便将导致404的所有请求重定向到根index.html。

第三种选择是使用lite-server作为本地开发的节点网络服务器，或angular-cli。这些功能内置了

浏览器刷新不会加载angular2组件，但会给出404

1 个答案: