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

【问题标题】：Angular2- When refresh the page, url remains same but appropriate view doesn't get loadedAngular2-刷新页面时，url保持不变，但没有加载适当的视图
【发布时间】：2016-05-06 19:14:51
【问题描述】：

在 Angular2 中，我遇到了这个问题。当你刷新页面时。 URL 保持不变，但不会在 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)]);

【问题讨论】：

Angular 2.0 router not working on reloading the browser的可能重复

标签： angular angular2-routing

【解决方案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});
]);

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

希望对你有帮助蒂埃里

【讨论】：

它按预期工作。但是使用这种方法，它会添加# 符号，这对于实际应用来说看起来并不好。我已经添加了<base href="/">。请指导。
是的，事实上，拥有# 符号是在服务器端无事可做的奖励:-( 我同意你的观点，即使用 hashbang 方法的 URL 不如使用PathLocationStrategy （默认一个）。但如果你需要后者，则必须在服务器端有重定向的东西。这取决于你的服务器平台。Firebase 允许在几行代码中做到这一点;-)

【解决方案2】：

如果您不想要# 表示，请使用“PathLocationStrategy”。它有点类似于 HashLocationStratedy。希望此链接对您有所帮助Angular2 routing。

【讨论】：

我以为你错过了什么。按照该链接中提到的步骤操作。它对我来说很好。

【解决方案3】：

我设法解决了这个问题，方法是将此代码放在 index.html 的顶部 <title> put 下

<script>document.write('<base href="/" />');</script>

【讨论】：

【解决方案4】：

这不是正确的答案，但是刷新时，您可以通过牺牲 404 页面将所有死调用重定向到主页这是一个临时破解，只是在 404.html 文件上重播

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

【讨论】：

【解决方案5】：

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

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

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

使用 HashLocationStrategy 的 Hashbang 技术，但由于存在哈希，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

现在每个请求都将通过您的应用服务器，这将确保在每次刷新/重新加载 index.html 时都能得到服务，这将提升 Angular 应用。

【讨论】：

你很棒。谢谢！