Angular2-刷新页面时，URL保持不变，但未加载适当的视图 [英] Angular2- When refresh the page, url remains same but appropriate view doesn't get loaded

问题描述

在Angular2中，我面临着这个问题.刷新页面时.该URL保持不变，但没有在RouterOutlet中加载适当的视图.

In Angular2, I am facing this issue. When you refresh the page. The URL remains same but it doesn't load appropriate view in RouterOutlet.

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

Everything works fine except refreshing page issue.

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)]);

推荐答案

即使我陷入了刷新Angular2应用程序无法加载的情况.

Even I was stuck in the same situation where on refresh Angular2 app was failing to load.

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

The reason behind this issue is Angular2 router uses history API for routing due to which on the refresh of route App unable to find index.html and end up showing 404 or can not GET requested URL.

您可以通过两种方式解决:

you can work around in two ways:

1. 使用HashLocationStrategy的Hashbang技术，但由于存在哈希，URL看起来很糟糕.

1. Hashbang technique by using HashLocationStrategy but URL looks bad due to present of hash.

这是我的解决方法:

我使用Node.js来处理请求.

I use Node.js for serving the request.

假设您已经安装了Node和Npm.

Assuming you have Node and Npm installed.

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

package.json for installing required modules.

{
  "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!!')
});

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

Use the following command to start your app server.

node server.js

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

Now every request will go through your App server which will make sure that on every refresh/reload index.html get served which will boost angular App.

这篇关于Angular2-刷新页面时，URL保持不变，但未加载适当的视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！