Question

我正在使用Gulp Angular2与路线

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

在HTML中包含基础<base href="/">。

以下是我的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文件发生任何更改后重新加载页面时，我得到了＃34;无法获取/联系＆＃34;。如何在angular2中解决这个问题？

Answer 1

我没有使用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();
}

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

Answer 2

事实上，上传应用程序时出现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}
]);

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

此链接也可以为您提供帮助：When I refresh my website I get a 404. This is with Angular2 and firebase。

重新加载页面时带有路由的Angular2给出了不能GET？

2 个答案: