Angular2 с маршрутизацией при перегрузке страницы дает Не может GET?

Question

Я использую глоток Angular2 с маршрутом

В комплекте базовой <base href="/"> в HTML.

Ниже мои детали 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, я получаю сообщение «Can not GET/contacts». Как решить эту проблему в угловом2?

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 для каждого маршрута маршрута. См. Ответ Сакса на это.

Если вы хотите переключиться на подход 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.