How can I inject Location in angular2?

Question

I thought it would be the same way to inject Location just like how I inject Http. However my app breaks - the page does not render, if I uncomment "public location: Location" in the last line. As far as I can see, I have the correct import and providers array:

import {Component} from 'angular2/core';
import {
    ROUTER_DIRECTIVES,
    ROUTER_PROVIDERS,
    RouteConfig,
    Location,
    LocationStrategy,
    HashLocationStrategy
} from 'angular2/router';

import {TaskForm} from './task_form';
import {TaskList} from './task_list';
import {AboutUs} from './about_us';

@Component({
    selector: 'task-app',
    templateUrl: 'app/task_app.html',
    providers: [ROUTER_PROVIDERS],
    directives: [TaskForm, TaskList, ROUTER_DIRECTIVES]
})
@RouteConfig([
    {path: '/', component: TaskApp, as: 'Home'},
    {path: '/about_us', component: AboutUs, as: 'aboutUs'}
])
export class TaskApp {  
    constructor(/*public location: Location*/) {

In my index.html, I have the following line:

<script src="https://code.angularjs.org/2.0.0-beta.0/router.dev.js"></script>

In my bootstrap code, I have:

import {bootstrap} from 'angular2/platform/browser';
import {HTTP_PROVIDERS} from 'angular2/http';
import {provide} from 'angular2/core';

import {
    ROUTER_DIRECTIVES,
    ROUTER_PROVIDERS,
    RouteConfig,
    Location,
    LocationStrategy,
    HashLocationStrategy
} from 'angular2/router';

import {TaskApp} from './task_app';
import {MyService} from './my_service'

bootstrap(TaskApp, [HTTP_PROVIDERS, ROUTER_PROVIDERS, MyService, provide(LocationStrategy, {useClass: HashLocationStrategy})]);

Not sure whether I missed something or the current build is broken. If it is the first case, what did I miss?

You're doing it right, that's how you inject [Location](https://angular.io/docs/ts/latest/api/router/Location-class.html). Do you see any error in the console? PS : Remove `ROUTER_PROVIDERS` from the component, you already have it in bootstrap. — Eric Martinez, Dec 30 '15 at 23:28
I recommend you to delete completely your node_modules folder, and remove everything related to angular2 in package.json, then retry to install everything again. — Eric Martinez, Dec 30 '15 at 23:41
@EricMartinez, finally figured out the environment problems. There was no compilation error, but at run time, in the console, it complained that I did not specify APP_BASE_HREF... once I added "provide(APP_BASE_HREF, {useValue: '/'})" in bootstrap, it all worked. However according to the document, that is only required if I used PathLocationStrategy(, which is default), but I thought I particularly specified HashLocationStrategy. — Peter Pei Guo, Dec 31 '15 at 01:00

score 2 · Answer 1 · answered Mar 29 '17 at 12:29

in your NgModule

  providers: [ 
     { provide: 'locationObject', useValue: location}
  ]

in your component you need to Inject it so

import { Component, Inject } from '@angular/core';

 constructor(
     @Inject('locationObject') private locationObject: Location
 ) {}

How can I inject Location in angular2?

1 Answers1

Linked