Search code examples
angularangular-routing

Parenthesis in the URL nested routing - Angular v4

I am having a problem with the routing on my Angular app which adds a parenthesis to the URL when it should not.

I have a 'deep' nested routing, so I have been trying different approaches with not lucky.

I only have the problem at the very bottom of the nesting, so the last route possible

where I expect this:

http://localhost:4200/#/customers/1/overview

I get this:

http://localhost:4200/#/customers/1/(overview)

I decoupled the code from the project and created a simple sample on GitHub, so you can download it, and try with it (sorry, could not make it on plunkr)

https://github.com/ialex90/AngularErrorRouting

There are a couple of branches, trying different approaches,

Also, you can check this public link to see the behavior with more detailed.

https://angular-error-routing.netlify.com/#/dashboard

Any idea? Thanks!

enter image description here

Solution

  • I solved it in no the nicer way, as my favorite solution would be with relative paths and I made it with absolute paths, but at least, it does work.

    So, I changed the routerLink attribute within the HTML of the sidebar to be calling a method with the click output event, and the method is this:

    sidebarLink(item: string) {
        let paths = window.location.hash.split('/');
        if (paths.length >= this.limitCharPositionURL) {
            paths = paths.slice(this.hashCharPosition, this.limitCharPositionURL);
            paths.push(item);
            paths[0] = '/' + paths[0];
            this._router.navigate(paths);
        }
    }

    so I am building the path where limitCharPosition is 1 to remove the # from the location hash value returned. limitCharPositionURL would be 3 in this case, as the window.location.hash returns the following array:

    ['#', 'customers', 'id']

    So to be sure that even if the url is longer, I cut it off at 3.

    Then, I add the 'overview' or 'groups' or the link we need to the array. LAstly, I add the '/' to the first value to make the route navigation absolute.

    You can find the solution in this repo: https://github.com/ialex90/AngularErrorRouting/tree/Routing

    And the demo working in this link: https://neurologist-antelope-53654.netlify.com/#/dashboard

    enter image description here

    Hope it helps to someone else.

    If you had same error and found another solution, please, share it :)