Инъекционный роллер в Угловой 6 - PullRequest
Новая
       35

Инъекционный роллер в Угловой 6

1 голос
/ 12 апреля 2019

Я пытаюсь использовать Rollbar в Angular 6. Вот мой код в соответствующем коде в корневом модуле, 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 таким образом, чтобы он работал и не использовал циклические зависимости?

1 Ответ

0 голосов
/ 16 апреля 2019

Посмотрите на пример 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 logging и другие функции: 

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