karma TypeError "Cannot read property 'abonnieren' von undefined"

Beim Test einer einfachen Komponente, einen shared service, wird die folgende Fehlermeldung angezeigt, und ich kann nicht verwalten, damit es funktioniert, ich habe alles versucht!

TypeError: Cannot read property 'abonnieren' undefined

lr.Komponente.ts

export class LrComponent implements OnDestroy {
  currentRouter: string;
  private subscription: Subscription;

  constructor(private lrService: LrService) {
    this.subscription = this.lrService.lrNavigation$.subscribe(
      (currentNav: string) => {
        this.currentRouter = currentNav;
      },
      (error) => {
        console.warn(error);
      }
    );
  }

  ngOnDestroy() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}

lr.service.ts

@Injectable()
export class LrService {
  //Observables for our components to subscribe to.
  lrNavigation$: Observable<string>;

  //Subjects to return data to subscribed components
  private lrNavigationSubject = new Subject<string>();

  constructor() {
    this.lrNavigation$ = this.lrNavigationSubject.asObservable();
  }

  //Triggers subscribed components
  lrNavigate(currentNav: string) {
    this.lrNavigationSubject.next(currentNav);
  }
}

alle-zufällig.Komponente.ts

//In another component we send the string that we want the subscribed component (LrComponent) to receieve
this.lrService.lrNavigate('LR');

lr.Komponente.spec.ts

class MockRouter {
  navigate = jasmine.createSpy('navigate');
}

class MockActivatedRoute {
  params = jasmine.createSpy('params');
}

class MockLrService extends LrService {
  lrNavigation$: Observable<string> = new Subject<string>().asObservable();

  constructor() {
    super();
  }

  lrNavigate(currentRouter: string) {
    return Observable.of(['LR']);
  }
}

export function main() {
  describe('LrComponent', () => {
    let fixture: ComponentFixture<LrComponent>;
    let component: LrComponent;
    let lrService: LrService;

    beforeEach(async(() => {
      TestBed.configureTestingModule({
        declarations: [
          LrComponent,
          LrMappingsComponent,
          LrCategoriesComponent,
        ],
        imports: [
          RouterTestingModule,
          CommonModule,
          LrRoutingModule,
          SharedModule,
          AgGridModule.withComponents(
            [
              CaseSensitiveFilterComponent,
              ButtonComponent,
              ColumnHeaderComponent,
              TypeaheadEditorComponent,
              ButtonGroupComponent
            ]
          )
        ],
        providers: [
          { provide: LrService, useClass: MockLrService },
          { provide: Router, useClass: MockRouter },
          { provide: ActivatedRoute, useClass: MockActivatedRoute },
        ]
      }).compileComponents();
    }));

    beforeEach(() => {
      fixture = TestBed.createComponent(LrComponent);
      component = fixture.componentInstance;
      lrService = fixture.debugElement.injector.get(LrService);
    });

    it('should create LrComponent', () => {
      fixture.detectChanges();
      expect(component).toBeDefined();
    });

    it('should have the current router set', async(() => {
      fixture.detectChanges();
      expect(component.currentRouter).toEqual('LR', 'the data should be `LR`');
    }));
  });
}

FEHLER

HINWEIS:

Wenn ich NUR Jasmin, ohne Winkel-Test-framework-Kram, es funktioniert. Aber das ist nicht, wie ich will, um zu testen @Component's.

Beispiel:

export function main() {
  describe('LrComponent', () => {
    let fixture: ComponentFixture<LrComponent>;
    let component: LrComponent;
    let lrService: LrService;

    beforeEach(() => {
      lrService = new MockLrService();
      component = new LrComponent(lrService);
    });

    it('should create LrComponent', () => {
      fixture.detectChanges();
      expect(component).toBeDefined();
    });
  });
}

Dies funktioniert, aber ist nicht das, was ich will.

Jede Ahnung, wie man dieses Problem lösen? Ich habe wirklich vieles ausprobiert und keiner hat funktioniert...