Angular2-刷新页面时，网址保持不变但未加载适当的视图 [英] 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.

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

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 进行路由，因此在路由应用程序刷新时无法找到 index.html 并最终显示 404 或无法 GET 请求的 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.

这里是我是如何解决的:

Here how I worked it out:

我使用 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.

create server.js in your project directory.

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

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

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-刷新页面时，网址保持不变但未加载适当的视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！