Question

我使用@RouteConfig创建了一个示例应用程序并且工作正常，请参阅根据配置添加的网址更改和视图。但当我刷新页面时显示404错误:(。

我正在使用WebStrom IDE来构建和运行应用程序

列表项

在angular.io

上给出的实例也会出现同样的问题

我已经在https://angular.io/resources/live-examples/router/ts/plnkr.html上的AngularJS2中下载了路由和导航的示例代码示例，该示例在angular.io上给出，并将项目打开到webStrom并在其上运行。

它工作正常但在完成一些路由后再刷新页面显示404错误。

Answer 1

Angular 2（默认情况下）使用 html5 pushState 作为路由器状态。这意味着状态之间的实际网址会发生变化。

例如，对于主页，您可能位于网址：/，点击了某些内容，您的地址就会变为/newAddress。这是使用pushState api和pure frontend完成的。但是如果刷新页面，服务器会尝试在/newAddress上呈现资源，但当然，服务器上没有这样的资源。无论网址是什么，您都需要将服务器配置为托管/，但我不知道WebStorm内部服务器是否可以。您可以安装并使用superstatic npm package。

或... 您可以将Angular 2配置为使用基于hashbang的网址（例如/#/和/#/newAddress）。这样，您每次都从后端的角度点击/。

This page有详细解释。

Answer 2

确保您已添加

<base href="/">

在你的头部。除此之外，我们还需要更多信息。

Answer 3

这将解决您的问题，将其添加到您的bootstrap

从＆＃39; angular2 / platform / browser＆＃39;;

导入{bootstrap}

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

现在每当您点击刷新或硬重新加载时，都会加载@RouteConfig中定义的默认组件。

在AppComponent中

：

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

配置路由

3 个答案: