NullInjectorError: StaticInjectorError(AppModule)[AppComponent -> GoogleTagManagerService]: Angular 8

Question

i have also imported HttpClientModule and also properly configure GoogleTagManagerService.

import { HttpClientModule, /* other http imports */ } from "@angular/common/http";

@NgModule({
  imports: [
   HttpClientModule,
  ]}),
  providers: [
    { provide: 'googleTagManagerId', useValue: 'GTM-XXXXXXX' }
  ],
});

But i am still getting errors . i am using Google Tag Manager package and import every things properly . and now i clone the project in new system, so now i am getting this error

app.component.ts code

import { GoogleTagManagerService } from 'angular-google-tag-manager';

constructor(
  private gtmService: GoogleTagManagerService
) {}

ngOnInit(): void {
  this.router.events.subscribe((evt) => {
    if (evt instanceof NavigationEnd) {
      const gtmTag = {
        event: 'page',
        pageName: evt.url
      };
      this.gtmService.pushTag(gtmTag);
    }
    if (!(evt instanceof NavigationEnd)) {
      return;
    }
  });
}

Answer 1

As you can see in an resolved issue from this package, you have to use an older version of this package for angular 8 (https://github.com/mzuccaroli/angular-google-tag-manager/issues/38)

npm i --save [email protected]

Answer 2

It seems everything is ok. You can restart your app with ng run.

I advise you to follow the steps on that blog:

https://itnext.io/how-to-add-google-tag-manager-to-an-angular-application-fc68624386e2

Or, you can cross-check your app with the demo-page.

https://github.com/mzuccaroli/angular-google-tag-manager/tree/master/demo-application

And, last but not least, you can re-install the package.

https://www.npmjs.com/package/angular-google-tag-manager