Question

在Angular2中，我正面临着这个问题。刷新页面时。该网址保持不变，但未在RouterOutlet中加载相应的视图。

除了刷新页面问题外，一切正常。

app.ts

import {Component,bind} from 'angular2/core';

import {bootstrap} from 'angular2/platform/browser';
import {FORM_DIRECTIVES} from 'angular2/form';
import{HomeCmp} from 'Angular/src/Home/home.ts';
import {ContactUsCmp} from 'Angular/src/ContactUs/contactus.ts';

import {Router,ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS} from 'angular2/router';
@Component({
selector: 'micropuppy-app',
templateUrl: "ANGULAR/Templates/home.html",
directives:[HomeCmp,ROUTER_DIRECTIVES,ContactUsCmp],
template: ` <nav>
                    <ul class="nav navbar-nav">
                    **<li><a [routerLink]="['Home']">One</a><hr/></li>
                     <li><a [routerLink]="['ContactUs']">Contact Us</a></li>**
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Technologies <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Angular</a></li>
                            <li><a href="#">.NET</a></li>
                        </ul>
                    </li>
            </ul>
        </nav>

    <router-outlet></router-outlet>`
 })

@RouteConfig([
  {path:'/Home', name: 'Home', component: HomeCmp}
  {path:'/ContactUs', name: 'ContactUs', component: ContactUsCmp}
])

export class MicropuppyApp {
    constructor(){
        console.log("Micropuppy app started");
    }
}
 bootstrap(MicropuppyApp, [ROUTER_PROVIDERS,bind(APP_BASE_HREF).toValue(location.pathname)]);

Answer 1

使用路由的默认策略（HTML5历史记录API），您需要一个服务器配置来将所有路径重定向到HTML入口点文件。使用hashbang方法并不是必需的......如果您想切换到这种方法，只需使用以下代码：

import { bootstrap } from "angular2/platform/browser";
import { provide } from "angular2/core";
import {
  ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy
} from "angular2/router";

bootstrap(MainApp, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass:HashLocationStrategy});
]);

您可以查看有关此问题的以下问题：

希望它可以帮到你，亨利

Answer 2

即使我遇到了刷新Angular2应用程序无法加载的相同情况。

此问题背后的原因是Angular2路由器使用历史API进行路由，因为在刷新路由时App无法找到index.html并最终显示404或无法获取请求的URL。

你可以通过两种方式解决问题：

Hashbang技术使用HashLocationStrategy，但由于存在哈希值，URL看起来很糟糕。
这是我如何解决的问题：

我使用Node.js来提供请求。

假设你安装了Node和Npm。

package.json 用于安装所需的模块。

{
  "name": "Express server",
  "version": "",
  "dependencies": {
    "express": "^4.14.0"
  }
}

在项目目录中创建 server.js 。

var express = require('express');
var app = express();

app.use(express.static('dist')); 
// 'dist' is my build folder, you can add yours. this will take care of all static files.

app.use('/*', express.static('dist/index.html')); 
// This will make sure that every route should serve index.html first 

app.listen(8080, function () {
    console.log('app listening on port 8080!!')
});

使用以下命令启动您的应用服务器。

node server.js

现在每个请求都将通过您的App服务器，这将确保每次刷新/重新加载index.html都会提供服务，这将提升角度App。

Answer 3

我设法通过将此代码置于index.html下<title>下的<script>document.write('<base href="/" />');</script>顶部来解决此问题

{{1}}

Answer 4

这不是正确的答案，但是在刷新时，您可以通过牺牲404页面将所有死方的呼叫重定向到主页它只是在404.html文件

之后重播的临时黑客攻击

   <!doctype html>
<html>
    <head>
        <script type="text/javascript">
            window.location.href = "http://" + document.location.host;
        </script>
    </head>
</html>

Answer 5

如果你没有＆＃39;想要＃手段，请使用＆＃39; PathLocationStrategy＆＃39;。它有点类似于HashLocationStratedy。希望，此链接可以帮助您Angular2 routing。

Angular2-刷新页面时，url保持不变，但是没有加载适当的视图

5 个答案: