angulartics2: Error: No provider for location

Hey there,

I followed the instructions in your README.md to install this plugin in my Angular 2 application.

I keep getting this error:

ORIGINAL EXCEPTION: No provider for Location! (Angulartics2 -> Location)

Is it because I’m using ngrx/router instead of angular2/router ?

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 1
  • Comments: 20 (2 by maintainers)

Most upvoted comments

Yes. You need

import {Location} from '@angular/common';

Add Location to your bootstrap array.

For anyone else still hitting this problem but not using routes in your app, make sure to initialize the Router Module correctly and pass an empty array:

import { RouterModule } from '@angular/router'

...

@NgModule({
  declarations: [    MyComponent  ],
  imports: [
    Angulartics2Module.forRoot([ Angulartics2GoogleAnalytics ]),
    RouterModule.forRoot([])
  ],
  providers: [ ],
})
export class MyModule { }

This example is a feature module that uses forRoot. I haven’t tested it, but I bet that if your App Module is using forRoot, your “MyModule” module will probably need forChild

You add Location to the providers array, not the bootstrap array

On May 25, 2017 1:38 PM, “Chao” notifications@github.com wrote:

@brandonroberts https://github.com/brandonroberts i am also getting this error, i tried to add Location to bootstrap array but got the following error Location cannot be used as an entry component… any idea what i did wrong, is there a sample repo i can see how it is setup

@NgModule({ declarations: [ AppComponent ], imports: [ Angulartics2Module.forRoot([ Angulartics2GoogleAnalytics ]) ], providers: [ ], bootstrap: [AppComponent, Location] }) export class AppModule { }

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/angulartics/angulartics2/issues/43#issuecomment-304073425, or mute the thread https://github.com/notifications/unsubscribe-auth/AACk42yT6vROfwANCxIWtFGOrcXFe30xks5r9byjgaJpZM4I_4FD .

I was getting this error, I added import { RouterModule } from '@angular/router' and imported it into my module and it solved the issue, hope it helps.

What are you trying to do? You shouldn’t need to do anything special if you’re using this with the Angular router.

@sairahul1526 I just made sure Location is imported from ‘@angular/common’ not the one provided by the browser. I was using “Location” without any import and the IDE didn’t show it as an error and the transpilation was completing successfully but when I ran the code in the browser it threw the above error.

I think dependency on RouterModule is serious limitation for UI-Router users like me.

Yea, if you’re not using the Angular Router yet then you need to add the Location, and PathLocationStrategy from @angular/common to get those services

Hi all For anyone who finds this thread in the future In case you don’t want to import Angular Router, you can just register Location as provider alongside with chosen LocationStrategy Example:

@NgModule({
  // ..all the declarations you need
  providers: [
    Location,
    { provide: LocationStrategy, useClass: PathLocationStrategy },
  ],
})
export class MyModule { }

See Location service API docs for more details

Hi, I just have this issue too. Visual Studio 2017 shows that Location already exists, but as interface Location declared in lib.dom.ts. So it is ok for transpiler. But when I moved to next item called also “Location”, it imported Location from ng/core and everything is ok. Maybe best thing is to rename it to LocationService, but it is breaking change… image image

I had this issue and wasted sometime debugging it until I realized that my IDE (visual studio code) doesn’t detect the missing import for Location. Once I imported location from ‘@angular/common’ the issue went away.

I’ve run into this before where one of my services using my analytics service gets tripped up by angulartics’ requirement for routing/locations. I resolve this by adding a mock service for analytics. If you’re using angulartics directly, you can try providing a mocked service, like so:

describe('MyTest', () => {
 TestBed.configureTestingModule({
  providers: [
   { provide: Angulartics2GoogleAnalytics, useValue: new AngularticsMock() }
  ]
 })
 ....
})

class AngularticsMock {
  public eventTrack(action, properties) { }
}

@azanebrain perfect answer, wish the docs were updated with this and other examples. it seems like most of the issues being reported are for not enough examples…is it preferable to submit PRs here for that?