Angular 2 Final - How to prevent 404 when refreshing the browser with url matrix notation instead query string?

Question

I've this...

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

that's generates something like '/search;text=test;dateFrom=12-10-2016'

that's works fine !

However...if I refresh my browser or press enter on the URL address bar, I will got a 404...

Cannot GET /search;text=test;dateFrom=12-10-2016

Using angular 2 beta it's used to work because the beta was using the standard query string format like ?text=test&dateFrom=12-10-2016.

Now, the final Angular 2 uses Url Matrix Notation to handle parameters that's came from the URL.

Any clue about how to make this work ?

Not sure if it's helps, but this is my 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
}
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

Also, i've this on my gulp/browserSync...

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

Answer 1

Isaac gave me few clues about how to solve the situation. So, this can do the trick.

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

Answer 2

You can try this... this works for me, the only think that change is the url... with this method the url is like https://yoururl.com/#/page

https://stackoverflow.com/a/39103122

Answer 3

When using Angular2 (or really any SPA) routing you really want ANY route to return your index file. For different types of servers this will require a different solution. It looks like BrowserSync doesn't have a built in feature for this, but there are a few good solutions listed here. The simplest to implement was probably

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