Javascript Angular2:异常：Angulartics2GoogleAnalytics没有提供程序

我正在尝试使用我的应用程序

我已按照文档中所述正确配置

注意：没有提到将提供者添加为依赖项的位置

当我尝试运行应用程序时，它显示错误如下

例外：Angulartics2GoogleAnalytics没有提供程序！错误：DI 错误 在NoProviderError.ZoneAwareError（zone.js:811） 在NoProviderError.BaseError[作为构造函数]（core.umd.js:1186） 在NoProviderError.AbstractProviderError[作为构造函数]（core.umd.js:1371） 在新的NoProviderError（core.umd.js:1411） 在ReflectiveInjector_uz.throwOrNull处（core.umd.js:3394） 在ReflectiveInjector.getByKeyDefault（core.umd.js:3433） 在ReflectiveInjector.getByKey（core.umd.js:3380） 在ReflectiveInjector.get（core.umd.js:3140） 位于AppModuleInjector.NgModuleInjector.get（core.umd.js:8996） 位于CompiledTemplate.proxyViewClass.AppView.injectorGet（core.umd.js:12465） 位于CompiledTemplate.proxyViewClass.DebugAppView.injectorGet（core.umd.js:12845） 在CompiledTemplate.proxyViewClass.View\u AppComponent\u Host0.createInternal （/AppModule/AppComponent/host.ngfactory.js:15） 位于CompiledTemplate.proxyViewClass.AppView.createHostView（core.umd.js:12421） 位于CompiledTemplate.proxyViewClass.DebugAppView.createHostView（core.umd.js:12829） 在ComponentFactory.create（core.umd.js:7766）中：

应用程序组件.ts

import { Component } from '@angular/core';
import { Angulartics2GoogleAnalytics } from 'angulartics2';
@Component({
  selector: 'my-app',
  moduleId: module.id,
  templateUrl: `./app.component.html`,
  styleUrls: ['/app.componenet.css']
})
export class AppComponent {
title = 'Angular2 google analytics';
constructor(angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics) {}
}

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { HttpModule } from '@angular/http';
import { FormsModule }   from '@angular/forms';
import { Angulartics2Module, Angulartics2GoogleAnalytics } from 'angulartics2';
@NgModule({
  imports:      [ HttpModule, BrowserModule, FormsModule, Angulartics2Module.forRoot([ Angulartics2GoogleAnalytics ])],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
})
export class AppModule { }

应用程序模块.ts

import { Component } from '@angular/core';
import { Angulartics2GoogleAnalytics } from 'angulartics2';
@Component({
  selector: 'my-app',
  moduleId: module.id,
  templateUrl: `./app.component.html`,
  styleUrls: ['/app.componenet.css']
})
export class AppComponent {
title = 'Angular2 google analytics';
constructor(angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics) {}
}

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { HttpModule } from '@angular/http';
import { FormsModule }   from '@angular/forms';
import { Angulartics2Module, Angulartics2GoogleAnalytics } from 'angulartics2';
@NgModule({
  imports:      [ HttpModule, BrowserModule, FormsModule, Angulartics2Module.forRoot([ Angulartics2GoogleAnalytics ])],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
})
export class AppModule { }

---

您的问题应该存在于构造函数中：

constructor(angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics) {}

您应该在提供商前面添加例如

public

：

constructor(public angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics) {}

---

使用

提供程序

在组件中启动提供程序

 @Component({
    selector: 'yourselector',
    styleUrls: [''],
    templateUrl: '',
    providers: [Angulartics2GoogleAnalytics]
})

---

试试这个

是的，应该像你做的那样做。如果模块重复，并且

Angulartics2GoogleAnalytics

引用不同模块中的不同类，则可能发生这种情况。您有

App.component.ts

但导入了

/App.component

，这可能表明您不小心使用了case，这将导致模块重复。我建议检查

Angulartics2GoogleAnalytics

是否真的是所有模块中的同一个类，正如在重复问题的答案中所建议的那样。@estus不，这没用！我已经尝试了两个小时来确保，您所说的“it”是指您试图在两个类中将

Angulartics2GoogleAnalytics

暴露为

window

属性，并且在比较时它是

==

相等的？如果您不能提供可以复制该问题的解决方案，我不认为这里有任何建议可以作为答案。提供者块是必需的！奇怪的是，还需要在喷油器中公开这一点。我把它当作私人的，然后把它转成公共的。