Angular2在重新加载页面时无法获取路由？

我在喝啤酒 带路线的角2

 @RouteConfig([{path:'/contacts', name:'Contacts', component:ContactListComponent, useAsDefault: true    }, {path:'/newcontact', name: 'NewContact', component:NewContactComponent}])

在HTML中包含base

下面是我的gulpfile详细信息

gulp.task('serve', function(){
gulp.watch([config.allTs],['ts-lint','compile-ts']);

browserSync({
    port: 3000,
    files: ['index.html','**/*.js'],
    injectChanges: true,
    logFileChanges: false,
    logLevel: 'silent',
    notify: true,
    reloadDelay: 0,
    server:{
        baseDir: ['./'],
        middleware: superstatic({ debug: false })
        }
});

}))

---

在ts文件发生任何更改后重新加载页面时，我得到“无法获取/联系人”。如何在angular2中解决这个问题？

我没有使用

superstatic

作为中间件，但问题就在那里。尝试将此函数用作中间件：

var fs = require('fs');
var url = require('url');

function(req, res, next) {
  var fileName    = url.parse(req.url);
      fileName    = fileName.href.split(fileName.search).join('');
  var fileExists  = fs.existsSync(path.resolve(__dirname, './') + fileName);

  if(!fileExists && fileName.indexOf("browser-sync-client") < 0) {
    req.url = "/index.html";
  }
  return next();
}

var fs=require（'fs'）；
var url=require（'url'）；
功能（req、res、next）{
var fileName=url.parse（req.url）；
fileName=fileName.href.split（fileName.search.join）（“”）；
var fileExists=fs.existsSync（path.resolve（uu dirname，./）+fileName）；
如果（！fileExists&&fileName.indexOf（“浏览器同步客户端”）<0）{
req.url=“/index.html”；
}
返回next（）；
}

---

如果找不到请求路径的文件，它将提供

index.html

。

我没有使用

superstatic

作为中间件，但问题就在那里。尝试将此函数用作中间件：

var fs = require('fs');
var url = require('url');

function(req, res, next) {
  var fileName    = url.parse(req.url);
      fileName    = fileName.href.split(fileName.search).join('');
  var fileExists  = fs.existsSync(path.resolve(__dirname, './') + fileName);

  if(!fileExists && fileName.indexOf("browser-sync-client") < 0) {
    req.url = "/index.html";
  }
  return next();
}

var fs=require（'fs'）；
var url=require（'url'）；
功能（req、res、next）{
var fileName=url.parse（req.url）；
fileName=fileName.href.split（fileName.search.join）（“”）；
var fileExists=fs.existsSync（path.resolve（uu dirname，./）+fileName）；
如果（！fileExists&&fileName.indexOf（“浏览器同步客户端”）<0）{
req.url=“/index.html”；
}
返回next（）；
}

---

如果无法找到请求路径的文件，它将提供

index.html

。

事实上，由于浏览器中的实际地址正在更新（并且没有#/hashbang方法），因此在上载应用程序时出现404错误是正常的。默认情况下，HTML5历史记录用于Angular2中的重用

如果不希望出现404错误，则需要更新服务器以为每个路由路径提供index.html文件。请参阅Saxsa的答案

如果要切换到HashBang方法，则需要使用以下配置：

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

import {MyApp} from './myapp';

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

在这种情况下，当您刷新页面时，它将再次显示

---

此链接也可以帮助您：。

事实上，您在上载应用程序时出现404错误是正常的，因为浏览器中的实际地址正在更新（并且没有#/hashbang方法）。默认情况下，HTML5历史记录用于Angular2中的重用

如果不希望出现404错误，则需要更新服务器以为每个路由路径提供index.html文件。请参阅Saxsa的答案

如果要切换到HashBang方法，则需要使用以下配置：

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

import {MyApp} from './myapp';

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

在这种情况下，当您刷新页面时，它将再次显示

---

此链接也可以帮助您：。

我曾经遇到过一次麻烦，因为我不小心将

base

标记放在

头部

之外。它也在头部标记之内。我曾经遇到过一次麻烦，因为我不小心将

base

标记放在

头部

之外。它也在头部标记之内WellhashLocationStrategy正在发挥作用。但通常情况下，它应该没有“砰”的方法。但是当我尝试使用文档中提到的PathLocationStrategy时，我得到了相同的错误。这次我将继续使用“砰”的一声，等待PathLocationStrategy.HashLocationStrategy起作用。但通常情况下，它应该没有“砰”的方法。但是当我尝试使用文档中提到的PathLocationStrategy时，我得到了相同的错误。这一次我将坚持“砰”的一声，等待PathLocationStrategy。