[SOLVED] Angular2 Router: add hashtag to url

Angular2 Router: add hashtag to url

I'm using Angular2 Seed application, and you can find it in the official repo. As you can see, here we have angular2/router imported, and we're using it to create the basic routing of the application.

import {Component, ViewEncapsulation} from 'angular2/angular2';
import {
  RouteConfig,
  ROUTER_DIRECTIVES
} from 'angular2/router';
...
@RouteConfig([
  { path: '/', component: HomeCmp, as: 'Home' },
  { path: '/about', component: AboutCmp, as: 'About' }
])
export class AppCmp {}

My question is: how can I configure router to add hashtag in my url, to make it looks like: localhost:5555/#/about. Is there any beautiful and easy way to make it? (as earlier with $locationProvider)

I know it's bizarre, but I used to love this hashtag in url, and my apache-config also used to love it. Of course, I can change my httpd.conf file, very easy and properly, but I really want to figure out, how to simply add hashtag, with Angular2 Router.

Solution

In your application startup file, you need to provide locationstrategy while calling bootstrap,

import {LocationStrategy, HashLocationStrategy} from 'angular2/router';

class MyDemoApp {
    //your code
}

bootstrap(MyDemoApp,[provide(LocationStrategy, {useClass: HashLocationStrategy})]);