错误：模板解析错误：没有将“exportAs”设置为“bs-tooltip”的指令答案

【问题标题】：Error: Template parse errors: There is no directive with "exportAs" set to "bs-tooltip"错误：模板解析错误：没有将“exportAs”设置为“bs-tooltip”的指令
【发布时间】：2020-12-03 10:02:36
【问题描述】：

我对 Karma/jasmine 还是很陌生。在编写测试用例时，我遇到了这个错误：错误：模板解析错误：没有将“exportAs”设置为“bs-tooltip”的指令

html

<div class="col-md-12 align-center">
    <img class="some-class" src="{{ someVariable.imgUrl }}" [tooltip]="someText" triggers="" placement="right" 
    #pop="bs-tooltip" (click)="someMethod(param1, param2)">
    <p class="some-class">{{ someVariable.name }}</p>
</div>

规格文件：

import * as fromAuth from './../../../auth/store/auth.reducers';
import { Store, StoreModule } from '@ngrx/store';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { MyComponent } from './upcoming-movies.component';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { ModalModule } from 'ngx-bootstrap';
import { SharedModule } from './../../../shared/shared.module';

describe('MyComponent', () => {

    let component: MyComponent;
    let fixture: ComponentFixture<MyComponent>;

    beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [
                StoreModule.forRoot({
                    ...fromAuth.authReducer
                }),
                HttpClientTestingModule,
                RouterTestingModule,
                ModalModule.forRoot(),
                SharedModule,
            ],
            declarations: [
                MyComponent
            ],
            schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA]
        }).compileComponents();
        store = TestBed.get(Store);
        fixture = TestBed.createComponent(MyComponent);
        component = fixture.componentInstance;

    });

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

这是我面临的错误

Error: Template parse errors:
There is no directive with "exportAs" set to "bs-tooltip" ("some-class" src="{{ someVariable.imgUrl }}" [tooltip]="someText" triggers="" 
placement="right" [ERROR ->]#pop="bs-tooltip" (click)="someMethod(param1, param2)">
            <p class="dash-slate-text sub-text"): ng:///DynamicTestModule/MyComponent.html@33:134
    at syntaxError (http://localhost:9876/_karma_webpack_/webpack:/C:/WorkSpace_2/f360-web/node_modules/@angular/compiler/esm5/compiler.js:485:22)
    at TemplateParser.parse (http://localhost:9876/_karma_webpack_/webpack:/C:/WorkSpace_2/f360-web/node_modules/@angular/compiler/esm5/compiler.js:24667:1)
    at JitCompiler._parseTemplate (http://localhost:9876/_karma_webpack_/webpack:/C:/WorkSpace_2/f360-web/node_modules/@angular/compiler/esm5/compiler.js:34620:1)
    at JitCompiler._compileTemplate (http://localhost:9876/_karma_webpack_/webpack:/C:/WorkSpace_2/f360-web/node_modules/@angular/compiler/esm5/compiler.js:34595:1)
    at http://localhost:9876/_karma_webpack_/webpack:/C:/WorkSpace_2/f360-web/node_modules/@angular/compiler/esm5/compiler.js:34496:48
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (http://localhost:9876/_karma_webpack_/webpack:/C:/WorkSpace_2/f360-web/node_modules/@angular/compiler/esm5/compiler.js:34496:1)
    at http://localhost:9876/_karma_webpack_/webpack:/C:/WorkSpace_2/f360-web/node_modules/@angular/compiler/esm5/compiler.js:34384:1
    at Object.then (http://localhost:9876/_karma_webpack_/webpack:/C:/WorkSpace_2/f360-web/node_modules/@angular/compiler/esm5/compiler.js:474:33)
    at JitCompiler._compileModuleAndAllComponents (http://localhost:9876/_karma_webpack_/webpack:/C:/WorkSpace_2/f360-web/node_modules/@angular/compiler/esm5/compiler.js:34382:1)

也许我在导入中缺少一些引导模块。请帮我解决这个问题。

【问题讨论】：

是的，您很可能需要导入 BootstrapModule。
我在我的导入中包含：BrowserModule、platformBrowserDynamic，现在我面临：错误：模块“DynamicTestModule”导入的意外值“函数（extraProviders）{”。请添加@NgModule 注释。另外，bootstrapModule 的正确导入是什么？我确实尝试过，但我没有成功。
是的，不要导入BrowserModule，不需要。转到声明了MyComponent 的模块（在declarations 数组中），看看该模块有什么imports 和declarations，看看你是否需要其中之一。

标签： angular6 karma-jasmine code-coverage testcase angular-test

【解决方案1】：

找到了解决办法。我导入了 ModalModule

import { ModalModule } from 'ngx-bootstrap';

在 beforeEach() 中，

imports: [ModalModule.forRoot()]

【讨论】：

【解决方案2】：

这个错误是因为没有导入TooltipModule。

导入以下内容：
import { TooltipModule } from 'ngx-bootstrap/tooltip';

在 beforeEach() 中，

imports: [TooltipModule.forRoot()]

【讨论】：