Repository navigation
Bug: Child Routers on Root Components with path '/' must throw pushstate error #5502
Description
If you have your RootRouter in your app.ts configured like this, where the path '/' redirects to a child router:
@RouteConfig([
{path: '/...', loader: () => System.import('./components/index/index').then(m => m.IndexComponent), as: 'Index'}
])
and your Child Component (in this case the IndexComponent) configured like this:
@RouteConfig([
{path: '/', loader: () => System.import('./components/home/index').then(m => m.HomeComponent), as: 'Home'},
{path: '/listing', loader: () => System.import('./components/listing/index').then(m => m.ListingComponent), as: 'Listing'},
{path: '/detail', loader: () => System.import('./components/detail/index').then(m => m.DetailComponent), as: 'Detail'}
])
Then your links in the IndexComponent's template
Home
Listing
Detail
will always throw the following error:
EXCEPTION: SecurityError: Failed to execute 'pushState' on 'History': A history state object with URL 'http://listing/' cannot be created in a document with origin
This is because of the double slashes in front of the href-link the angular2 router translates the route to:
Why is it doing that?
In the RootRouter.commit method, it automatically prefixes a slash to the emitPath, because it assumes that the emitPath cannot possible already have an leading '/':
if (emitPath.length > 0) {
emitPath = '/' + emitPath;
}
However, when the path to the ChildComponent is only '/', this is actually possible.
emitPath is defined as:
var emitPath = stringifyInstructionPath(instruction);
and the stringifyInstructionPath method is defined as:
export function stringifyInstructionPath(instruction: Instruction): string {
return instruction.component.urlPath + stringifyAux(instruction) +
stringifyPrimaryPrefixed(instruction.child);
}
where in our use case instruction.component.urlPath is empty, stringifyAux(instruction) is empty and stringifyPrimaryPrefixed has a leading '/'
I propose to fix this bug, by checking in the RootRouter.commit method, whether the emitPath has a leading slash, and only if this is not the case, it adds another one.
Activity
brandonroberts commentedon Dec 2, 2015
See if this helps #5218
oubushixb commentedon Dec 16, 2015
same question, replace routeConfig '/...' to '/anything/...' it will work
matteosuppo commentedon Dec 31, 2015
I created a repository that can reproduce the bug: https://github.com/matteosuppo/angular2-routing-issue
I tried to create a test case in the angular source but I couldn't make it fail.
chrisgreeff commentedon Jan 7, 2016
+1
user414 commentedon Jan 17, 2016
I can still reproduce this in the beta1, but solve it by using @oubushixb suggestion with a redirect
AlexBachmann commentedon Jan 27, 2016
I reproduced this bug in this Plunk
http://plnkr.co/edit/OjXZK9
You will not get errors thrown displayed in the console while running in Plunkr so here is the exact same code on our servers
http://test.loop-one.de/
The error still exists
angular-automatic-lock-bot commentedon Sep 8, 2019
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.