Skip to content

Location Service not working with hash #747

@bouncehead13

Description

@bouncehead13

Use Case

We are trying to set the UI Params to include both state params and a hash. An example would be

/shop?page=1#fruit=orange

Problem

The _set function within the Ng2LocationServices is not properly parsing the hash before sending it along to the Angular Path Location Strategy.

The function assumes the hash can be prepended to the URL always which is not the case when we combine state params with a hash. The incorrect output from this would be

/shop#fruit=orange?page=1

Suggested Fix

I'm not entirely sure why the code currently assumes the hash should always be prepended to the path, but may this be a potential solution.

let urlPath;
let urlParams;

const { path, search, hash } = parseUrl(url);
if (search) {
    urlPath = path;
    urlParams = search + (hash ? '#' + hash : '');
} else {
    urlPath = path + (hash ? '#' + hash : '');
    urlParams = search;
}

if (replace) {
    this._locationStrategy.replaceState(state, title, urlPath, urlParams);
} else {
    this._locationStrategy.pushState(state, title, urlPath, urlParams);
}

The main suggestion here is if we have search params, append the hash to the search not the path. If there are no search params, then do what exist currently and append the hash to the path.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions