Skip to content

Bug: Child Routers on Root Components with path '/' must throw pushstate error #5502

@AlexBachmann

Description

@AlexBachmann

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions