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

Question

我還導入了 HttpClientModule 並正確配置了 GoogleTagManagerService。

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

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

但我仍然遇到錯誤。 我正在使用 Google 標簽管理器包並正確導入所有內容。 現在我在新系統中克隆了項目，所以現在我收到了這個錯誤

app.component.ts 代碼

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

正如您在此軟件包中已解決的問題中所見，您必須將此軟件包的舊版本用於 angular 8 ( https://github.com/mzuccaroli/angular-google-tag-manager/issues/38 )

npm i --save angular-google-tag-manager@1.1.4

Answer 2

似乎一切正常。 您可以使用ng run重新啟動您的應用程序。

我建議您按照該博客上的步驟操作：

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

或者，您可以使用演示頁面交叉檢查您的應用程序。

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

而且，最后但並非最不重要的是，您可以重新安裝該軟件包。

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