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
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.
If you have your RootRouter in your app.ts configured like this, where the path '/' redirects to a child router:
and your Child Component (in this case the IndexComponent) configured like this:
Then your links in the IndexComponent's template
will always throw the following error:
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 '/':
However, when the path to the ChildComponent is only '/', this is actually possible.
emitPath is defined as:
and the stringifyInstructionPath method is defined as:
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.