Angular 2 Final — как предотвратить 404 при обновлении браузера с помощью матричной нотации URL вместо строки запроса?

у меня это...

 this.router.navigate(['search', this.searchParameters]);

это генерирует что-то вроде '/search;text=test;dateFrom=12-10-2016'

это нормально работает!

Однако... если я обновлю свой браузер или нажму Enter в адресной строке URL, я получу 404...

Не удается получить /search;text=test;dateFrom=12-10-2016

Используя бета-версию angular 2, она работала, потому что бета-версия использовала стандартный формат строки запроса, например ?text=test&dateFrom=12-10-2016.

Теперь окончательный вариант Angular 2 использует нотацию матрицы URL-адресов для обработки параметров, полученных из URL-адреса.

Любая подсказка о том, как сделать эту работу?

Не уверен, что это поможет, но это мой app.routing.ts

import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent }      from './components/pages/home/home.component';
import { SearchComponent }      from './components/pages/search/search.component';
const appRoutes: Routes = [
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
},
{
path: 'search',
component: SearchComponent
}
];

экспорт постоянной маршрутизации: ModuleWithProviders = RouterModule.forRoot(appRoutes);

Кроме того, у меня это есть в gulp/browserSync...

browserSync.init({
   server: {
        baseDir: "./",
        routes: {
            "/home": "index.html",
            "/search": "index.html"
        }
    }
});

angular browser-sync gulp-browser-sync angular2-routing
person Marco Jr    schedule 12.10.2016    source источник
comment
У меня такая же проблема, я думаю, что причина этой ошибки - в параметрах. Может баг?   -  person Asaf Hananel    schedule 12.10.2016
comment
Нет, @AsafHananel ... Это не -... а ; Только.   -  person Marco Jr    schedule 13.10.2016

Ответы (3)


arrow_upward
0
arrow_downward

Исаак дал мне несколько подсказок о том, как разрешить ситуацию. Таким образом, это может сделать трюк.

browserSync.init({
   server: {
        baseDir: "./",
        routes: {
            "/home": "index.html",
            "/search": "index.html"
        },
        middleware: function(req, res, next) {
            req.url = req.url.replace(';','?');
            req.url = req.url.replace(/;/g,'&');
            return next();
        }
    }
});
person Marco Jr    schedule 12.10.2016

arrow_upward
0
arrow_downward

Вы можете попробовать это... это работает для меня, единственное, что я думаю, что изменение - это URL-адрес... с этим методом URL-адрес выглядит как https://yoururl.com/#/page

https://stackoverflow.com/a/39103122

person Luis Manuel Mansilla    schedule 14.10.2016
comment
Интересно, Луис! Я предпочитаю вернуться к хеш-стратегии, а не использовать новый подход Url Matrix. Мне не нравится матрица URL. ты ! - person Marco Jr; 15.10.2016

arrow_upward
-1
arrow_downward

При использовании маршрутизации Angular2 (или любого SPA) вы действительно хотите, чтобы ЛЮБОЙ маршрут возвращал ваш индексный файл. Для разных типов серверов это потребует другого решения. Похоже, что в BrowserSync нет встроенной функции для этого, но есть несколько хороших решений, перечисленных здесь. Вероятно, самым простым в реализации было

var fs = require("fs"),
    path = require("path"),
    url = require("url"),
    gulp = require("gulp"),
    browserSync = require("browser-sync");

// The default file if the file/path is not found
var defaultFile = "index.html"

// I had to resolve to the previous folder, because this task lives inside a ./tasks folder
// If that's not your case, just use `__dirname`
var folder = path.resolve(__dirname, "../");

browserSync({
        files: ["./css/*.css", "./js/*.js", "./index.html"],
        server: {
            baseDir: "./",
            middleware: function(req, res, next) {
                var fileName = url.parse(req.url);
                fileName = fileName.href.split(fileName.search).join("");
                var fileExists = fs.existsSync(folder + fileName);
                if (!fileExists && fileName.indexOf("browser-sync-client") < 0) {
                    req.url = "/" + defaultFile;
                }
                return next();
            }
        }
    });
person Isaac Cummings    schedule 12.10.2016
comment
Привет Исаак! Я заменил свой файл gulp и реализовал ваше решение, а также несколько отсутствующих строк кода по ссылке, которую вы мне дали. Мне понравился этот подход вместо использования маршрутов, и он успешно реализован. но проблема со строкой запроса сохраняется. Я обновлю свой код глотка в этом посте. - person Marco Jr; 12.10.2016
comment
Хм... теперь снова читаю ваш ответ... похоже, вы не поняли мою точку зрения: мои маршруты на самом деле работают нормально! Однако при использовании параметров строки запроса с символом ; вместо стандарта? и символы строки запроса. Это вызывает ошибку 404 при обновлении браузера. - person Marco Jr; 12.10.2016
comment
Я пытался описать, что проблема является более общей проблемой, чем просто конкретный тип строки запроса. Сервер сообщает вам, что не может найти конкретный маршрут, потому что не распознает ';' символ в качестве начала строки запроса. Если вы скажете серверу всегда возвращать файл index.html, проблема исчезнет. - person Isaac Cummings; 12.10.2016
comment
Также это выглядит как этот thread упоминает, как решить проблему, используя хэш в URL - person Isaac Cummings; 12.10.2016
comment
Извини, Исаак... но речь не об использовании хэша. Angular 2 решил использовать нотацию Matrix URL вместо обычного стандарта строки запроса, который использует ? для 1-го параметра и & для остальных - и это вызывает ошибки на многих веб-серверах, если они не настроены для этого сценария. - person Marco Jr; 13.10.2016