找不到名称'outlet'的角因果导出！预期未定义是真实的

Question

我有一个路由器动画，效果很好。它相当简单。但是我无法通过测试。

我具有如下设置。

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { fader } from 'app/route-animations';

@Component({
    selector: 'app-logged-in-layout',
    templateUrl: './logged-in-layout.component.html',
    styleUrls: ['./logged-in-layout.component.less'],
    animations: [fader],
})
export class LoggedInLayoutComponent implements OnInit {
    constructor() {}

    prepareRoute(outlet: RouterOutlet) {
        return (
            outlet &&
            outlet.activatedRouteData &&
            outlet.activatedRouteData['animation']
        );
    }

html如下

<main [@routeAnimations]="prepareRoute(outlet)" class="content">
    <router-outlet #outlet="outlet"></router-outlet>
</main>

下面有一张测试结果的图片

现在我意识到有一个名为#outlet的模板引用，但我不知道是在测试文件还是在组件文件中定义它？

我该怎么做？

我的测试文件是

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { LoggedInLayoutComponent } from './logged-in-layout.component';
import { RouterOutlet } from '@angular/router';

describe('LoggedInLayoutComponent', () => {
    let component: LoggedInLayoutComponent;
    let fixture: ComponentFixture<LoggedInLayoutComponent>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [LoggedInLayoutComponent],
            providers: [RouterOutlet],
        }).compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(LoggedInLayoutComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });

});

任何指导将不胜感激。