Repository navigation
Angular2 server-side rendering not working with matrix-formatted URLs #250
Description
Activity
I do believe on the Universal-side, you shouldn't have a problem with these URLs, it may be being encoded before its sent to node since it believes it's a Querystring?
Not by a computer at the moment but I can try and take a look at the code tomorrow !
- Run
yo aspnetcore-spaand choose Angular2 - Replace
home.tswith:
import * as ng from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @ng.Component({ selector: 'home', template: require('./home.html') }) export class Home { constructor(private route: ActivatedRoute) { this.route.params.subscribe((p: any) => console.log("params: ", p)); } }
- Go to
/home;test=hello! - See the logged params in the server (
params: { 'test%3Dhello!': 'true' }) - Compare to the browser's (
params: Object {test: "hello!"})
- Run
Thanks for the clear repro info.
The issue comes down to the fact when ASP.NET gets incoming path segments containing reserved characters (like
=), thenHttpContext.Request.Pathreturns them with URL encoding, whereas JavaScript'slocation.pathnameAPI returns them without URL encoding.One workaround you could do right now would be to edit your
boot-server.tsfile and change this line:ngCore.provide(REQUEST_URL, { useValue: params.url }),to this:
ngCore.provide(REQUEST_URL, { useValue: decodeURIComponent(params.url) }),However, I'm still discussing with colleagues on the ASP.NET team whether this is really a good idea and what would be the right way to reconcile ASP.NET's behaviour with Node/browser-based-JS. I want to get more feedback from people on whether the use of
decodeURIComponentlike that could constitute any security issue in any scenario we can imagine.Amazing! Please keep us posted if you come to any conclusion.
OK, I've pushed a change (c53bd8f) that should make the URL encoding (or lack thereof) consistent between server and client, so the problem should go away in your example at least. I'll publish updated NuGet packages shortly.
I'm still curious about how these matrix URLs are meant to work though. What is supposed to happen if an embedded key or value contains a space? It looks to me like this would be broken (not because of JavaScriptServices, but even just with a client-only app), because although the HTML5 pushState APIs let you set a URL with a space, if you tried to reload the page or navigate to it from somewhere else, Chrome at least will change the space to
%20, and thenlocation.pathnamewill see it as the characters%20rather than a space. Does Angular 2 do something to fix this?You're right, I'm getting
%20instead of spaces. Not only with matrix notation, but also with regular params. I'll have to do areplaceI guess.- added a commit that references this issue
on Aug 17, 2016
Hi,
I have started a new angular2 project with the yeoman generator. I'm setting up the routing but I'm having an issue with the query parameters in matrix URL notation (angular's default) with server-side prerendering.
I'm trying to render
http://localhost:5000/shop;page=1;genres=Alternative,Rock, but the=are being encoded and it breaks angular's parsing.I'm posting here because the first message from the dotnet cli output seems to indicate there's an issue with how the URL is being sent to node from the aspnet side. Having said that, maybe I'm wrong and this is an issue with https://github.com/angular/universal, so let me know!
If you need a repro I can work on that, but maybe you already know where and how the urls are being encoded and can easily spot the issue :).
Thanks!