重载页面时，带有路由的Angular2给出无法获取? [英] Angular2 with routing when reloading the page gives Cannot GET?

问题描述

我正在使用Gulp Angular2与路线

I am using Gulp Angular2 with route

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

HTML中包含的基本<base href="/">.

Included base <base href="/"> in HTML.

以下是我的gulpfile详细信息

Below is my gulpfile details

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文件中进行任何更改后重新加载页面时，我得到的是无法获取/contacts".如何在angular2中解决此问题?

While reloading the page after any change in the ts files, I am getting "Cannot GET /contacts". How to resolve this issue in angular2?

推荐答案

实际上，由于浏览器中的实际地址正在更新(并且没有#/hashbang方法)，因此上传应用程序时会出现404错误，这很正常.默认情况下，HTML5历史记录用于在Angular2中重复使用.

In fact, it's normal that you have a 404 error when uploading your application since the actual address within the browser is updating (and without # / hashbang approach). By default, HTML5 history is used for reusing in Angular2.

如果您不想出现404错误，则需要更新服务器以为每个路由路径提供index.html文件.有关此信息，请参见Saxsa的答案.

If you want not having a 404 error, you need to update your server to serve the index.html file for each route path. See the Saxsa's answer for this.

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

If you want to switch to the HashBang approach, you need to use this configuration:

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

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

In this case, when you refresh the page, it will be displayed again.

此链接也可以为您提供帮助:

This link could help you as well: When I refresh my website I get a 404. This is with Angular2 and firebase.

这篇关于重载页面时，带有路由的Angular2给出无法获取?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！