在 Angular 6 中注入 Rollbar

Question

我正在尝试在 Angular 6 中使用 Rollbar。这是我在根模块中的相关代码中的代码，app.module.ts：

const rollbarConfig = {
  accessToken: '<My Rollbar Token>',
  captureUncaught: true,
  captureUnhandledRejections: true,
};

export const RollbarService = new InjectionToken<Rollbar>('rollbar');

@Injectable()
export class RollbarErrorHandler implements ErrorHandler {
  constructor(@Inject(RollbarService) private rollbar: Rollbar) {}

  handleError(err:any) : void {
    this.rollbar.error(err.originalError || err);
  }
}

export function rollbarFactory() {
    return new Rollbar(rollbarConfig);
}

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    NgbModule.forRoot(),
    CoreModule
  ],
  declarations: [AppComponent],
  providers: [
    { provide: ErrorHandler, useClass: RollbarErrorHandler },
    { provide: RollbarService, useFactory: rollbarFactory}
  ],
  bootstrap: [AppComponent]
})
export class AppModule {

}

现在，在 CoreModule 子模块中的服务中，我需要访问 Rollbar 对象。问题是指令只是说注入它：

@Inject(RollbarService) private rollbar: Rollbar

但是，这会导致一些问题。首先它不起作用。我收到一个错误：

compiler.js:215 Uncaught Error: Can't resolve all parameters for MyService: ([object Object], [object Object], ?).
    at syntaxError (compiler.js:215)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata (compiler.js:10807)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getTypeMetadata (compiler.js:10700)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getInjectableTypeMetadata (compiler.js:10922)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getProviderMetadata (compiler.js:10931)
    at compiler.js:10869
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getProvidersMetadata (compiler.js:10829)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:10548)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleSummary (compiler.js:10378)
syntaxError @ compiler.js:215
push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata @ compiler.js:10807
push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getTypeMetadata @ compiler.js:10700
push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getInjectableTypeMetadata @ compiler.js:10922
push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getProviderMetadata @ compiler.js:10931
(anonymous) @ compiler.js:10869
push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getProvidersMetadata @ compiler.js:10829
push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata @ compiler.js:10548
push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleSummary @ compiler.js:10378
(anonymous) @ compiler.js:10465
push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata @ compiler.js:10443
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules @ compiler.js:22567
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents @ compiler.js:22548
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync @ compiler.js:22508
push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync @ platform-browser-dynamic.js:143
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:4790
./src/main.ts @ main.ts:17
__webpack_require__ @ bootstrap:76
0 @ main.ts:18
__webpack_require__ @ bootstrap:76
checkDeferredModules @ bootstrap:43
webpackJsonpCallback @ bootstrap:30
(anonymous) @ main.js:1

其次，我收到大量循环依赖警告，因为我必须从根模块导入 RollbarService，而根模块依赖于 CoreModule，所以这是一个循环。

WARNING in Circular dependency detected:
src/app/app.module.ts -> src/app/core/core.module.ts -> src/app/core/shell/header/header.component.ts -> src/app/core/authentication/myservice.service.ts -> src/app/app.module.ts

如何以一种有效且不使用循环依赖的方式访问 Rollbar？

Answer 1

查看 Angular 示例：

https://github.com/rollbar/rollbar.js/tree/master/examples/angular2

该示例将 Rollbar 提取到它自己的文件中。 https://github.com/rollbar/rollbar.js/blob/master/examples/angular2/src/app/rollbar.ts

import * as Rollbar from 'rollbar';
import {
  Injectable,
  Inject,
  InjectionToken,
  ErrorHandler
} from '@angular/core';

const rollbarConfig = {
  accessToken: 'POST_CLIENT_ITEM_TOKEN',
  captureUncaught: true,
  captureUnhandledRejections: true,
};

export const RollbarService = new InjectionToken<Rollbar>('rollbar');

@Injectable()
export class RollbarErrorHandler implements ErrorHandler {
  constructor(@Inject(RollbarService) private rollbar: Rollbar) {}

  handleError(err:any) : void {
    this.rollbar.error(err.originalError || err);
  }
}

这使您可以更好地构建导入结构，并且应该修复循环依赖和其他错误。

在您的 app.module.ts 中：

import { RollbarService, rollbarFactory, RollbarErrorHandler } from './rollbar';

还有：

  providers: [
    { provide: ErrorHandler, useClass: RollbarErrorHandler },
    { provide: RollbarService, useFactory: rollbarFactory }
  ]

在您的其他组件中：

import { RollbarService } from './rollbar';
import * as Rollbar from 'rollbar';

还有：

  constructor(@Inject(RollbarService) private rollbar: Rollbar) {}

您现在应该可以使用 Rollbar 日志记录和其他功能了：

this.rollbar.info('angular test');