How can I prevent persistent URL anchor link hash values with UI-Router?

Question

I'm using Angular2 and UI-Router 2 in no-hash mode for a simple app with some anchor links in the menu. For example:

• https://example.com/blah/blech
• https://example.com/blah/blech#specifications
• https://example.com/blah/derp

If I go from a route with a hash in the URL to one without, the hash remains. For example, going from /blah/blech#specifications to /blah/derp via the menu results in a browser address of /blah/derp#specifications. Obviously this is incorrect and actually somewhat limiting, such as when I return to /blah/blech and the hash value remains, sending the window to that anchor location.

Another side effect is page refresh in a somewhat unpredictable manner. Going from /blah/derp to /blah/blech#specifications causes a full page refresh.

The setup is fairly standard:

export let derpState: Ng2StateDeclaration = {
    name: 'derpState',
    component: DerpComponent,
    url: '/derp'
}

How can I combine hash links with UI-Router 2 with good results? (Alternatively, how can I use anchor links with UI-Router in other ways?)

Answer 1

which version of angular 2 you use ? Please upgrade it. No need of name and all.

import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { DerpComponent }    from './derp.component';

const derp: Routes = [
{ path: 'derp',  component: DerpComponent }
];
export const derpState: ModuleWithProviders = RouterModule.forChild(derp);

Try this. Hope this will help you.