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

I have the same problem, i think that the reason for this error is the "-" in the parameters. Mabe a bug? — Asaf Hananel, Oct 12 '16 at 20:06

score 0 · Answer 1 · answered Oct 12 '16 at 18:55

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

score 0 · Answer 2 · edited May 23 '17 at 12:09

0

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

edited May 23 '17 at 12:09

Community

1
1

answered Oct 14 '16 at 18:31

Luis Manuel Mansilla

21
1

Interesting, Luis ! I prefer to go back to hash strategy rather than using thins new approach of Url Matrix. I don't like the Url Matrix. ty ! – Marco Jr Oct 15 '16 at 08:49

Isaac Cummings · Answer 3 · 2016-10-12T18:53:16.757

-1

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

edited Oct 12 '16 at 18:53

answered Oct 12 '16 at 15:54

Isaac Cummings

1
1

Hi Isaac ! I replaced my gulp file and implemented your solution plus some missing code lines on the link you gave me. I loved this approach instead using routes and it's implemented succesfully. but the query string issue persists. I will update my gulp code on this post. – Marco Jr Oct 12 '16 at 16:17
Humm..now reading again your answer...looks like you did't got my point: My routes actually works fine ! However, when using query string parameters with the character ";" instead the standard "?" and "&" query string symbols..it's causes a 404 when refreshing the browser. – Marco Jr Oct 12 '16 at 16:21
What i was trying to describe is that the issue is a more generic problem than just that particular type of query string. The server is telling you that it cant find the particular route because it doesn't recognize the ';' character as the beginning of a query string. If you tell the server to always return the index.html file that problem should go away. – Isaac Cummings Oct 12 '16 at 18:49
Also it looks like this [thread](http://stackoverflow.com/questions/35284988/angular-2-404-error-occur-when-i-refresh-through-browser?rq=1) mentions how to solve the problem using a hash in the URL – Isaac Cummings Oct 12 '16 at 18:55
Sorry, Isaac...but this is not about using hash. Angular 2 decided to use Matrix URL notation instead the usual query string standard that's uses "?" for the 1st parameter and "&" for the others - and this causes errors in many web servers if not configured for this scenario. – Marco Jr Oct 13 '16 at 08:10

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

3 Answers3