Angular 失败：模板分析错误：没有带“的指令”；exportAs"；设置为"；“日期选择器”；在运行单元测试时

我有一个angular SPA应用程序，它具有来自ngx引导的日历控制。我正在从从BsDatepickerModule导入的NgModule imports声明中的ngx引导导入

BsDatepickerModule.forRoot（）。现在我有了一个组件，它包含了一些字段作为日期日历控件，当我使用karma jasmine在这个组件上运行单元测试时，除了这个组件之外，所有测试都通过了，错误显示：

MyTestComponent>应创建失败：模板分析错误：存在
没有将“exportAs”设置为“bsDatepicker”的指令

我尝试过以下内容：

1.在“beforeach”下的测试床导入中添加了“FormModule”

2.已删除node_modules文件夹并再次运行npm安装

html文件代码：

<input class="form-control" placeholder="yyyy-mm-dd" formControlName="testDateOfBirth"
[ngClass]="{ 'is-invalid': displayMessage.testDateOfBirth }" bsDatepicker #dp="bsDatepicker">



spec.ts文件：

import { FormsModule } from '@angular/forms';
describe('MyTestComponent', () => {
  let component: MyTestComponent;
  let fixture: ComponentFixture<MyTestComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports:[FormsModule],
      declarations: [ MyTestComponent],
      schemas:[NO_ERRORS_SCHEMA],
    })
    .compileComponents();
  }));

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

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


从'@angular/forms'导入{FormsModule}；
描述（'MyTestComponent'，（）=>{
let组件：MyTestComponent；
let夹具：组件夹具；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
导入：[FormsModule]，
声明：[MyTestComponent]，
模式：[无错误模式]，
})
.compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（MyTestComponent）；
组件=fixture.componentInstance；
组件。ngOnInit（）；
fixture.detectChanges（）；
});
它（'应该创建'，（）=>{
expect（component.toBeTruthy（）；
})
});

预期：测试“应创建”应通过

实际：我看到这个错误：

MyTestComponent>应创建失败：模板分析错误：存在
没有将“exportAs”设置为“bsDatepicker”（“teOfBirth”）的指令
[ngClass]=“{”无效：displayMessage.testDateOfBirth}”bsDatepicker[ERROR->]#dp=“bsDatepicker”>

所需的html代码：

 id="wrap" class="container">
  <div class="col-md-12 col-lg-6">
    <h1>{{pageTitle}}</h1>
    <form novalidate (ngSubmit)="save()" [formGroup]="testForm">

      <div class="form-group">
        <label class="form-label required " for="EightDigitNumberId">
          What is your eightdigitNumber?
        </label>
        <input class="form-control " id="EightDigitNumberId" type="text"
          formControlName="EightDigitNumber" [ngClass]="{ 'is-invalid': displayMessage.EightDigitNumber }" mask='99999999' />
        <span class="invalid-message">{{ displayMessage.EightDigitNumber }}</span>
      </div>

      <div class="form-group">
        <label class="form-label required " for="firstNameId">
           First Name:
        </label>
        <input class="form-control " id="firstNameId" type="text" placeholder="First Name"
          formControlName="firstName" [ngClass]="{ 'is-invalid': displayMessage.firstName }" />
        <span class="invalid-message">{{ displayMessage.firstName }}</span>
      </div>

      <div class="form-group">
        <label class="form-label required " for="lastNameId">
           Last Name:
        </label>
        <input class="form-control " id="lastNameId" type="text" placeholder="last Name"
          formControlName="lastName" [ngClass]="{ 'is-invalid': displayMessage.lastName }" />
        <span class="invalid-message">{{ displayMessage.lastName }}</span>
      </div>

      <div class="form-group">
        <label class="form-label required " for="DateOfBirthId">
           Date of Birth:
        </label>
        <div class="input-group">
          <!-- 
              To add more options:
                [outsideClick]="true"
                [bsConfig]="{ dateInputFormat: 'YYYY-MM-DD', containerClass: 'theme-orange'}" 
            -->

          <input class="form-control" placeholder="yyyy-mm-dd" formControlName="DateOfBirth"
            [ngClass]="{ 'is-invalid': displayMessage.DateOfBirth }" bsDatepicker #dp="bsDatepicker">
          <div class="input-group-append">
            <button class=" fa fa-calendar" (click)="dp.toggle()" type="button"></button>
          </div>
        </div>
        <span class="invalid-message">{{ displayMessage.DateOfBirth }}</span>
      </div>

      <div class="form-group">
        <button class="btn btn-primary" type="submit" [title]="
            testForm.valid
              ? 'Save your entered data'
              : 'Disabled until the form data is valid'
          " [disabled]="!testForm.valid">
          Submit
        </button>


      </div>
    </form>

    <div class="alert alert-danger" *ngIf="errorMessage">{{errorMessage}}
    </div>
  </div>
</main>

id=“wrap”class=“container”>
{{pageTitle}}
你的八位数是多少？
{{displayMessage.EightDigitNumber}
名字：
{{displayMessage.firstName}
姓氏：
{{displayMessage.lastName}
出生日期:
{{displayMessage.DateOfBirth}
提交
{{errorMessage}}
将
BsDatepickerModule
添加到
TestBed
导入

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports:[BsDatepickerModule, FormsModule],
      declarations: [ MyTestComponent],
      schemas:[NO_ERRORS_SCHEMA],
    })
    .compileComponents();
  }));

将
BsDatepickerModule
添加到
TestBed
imports

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports:[BsDatepickerModule, FormsModule],
      declarations: [ MyTestComponent],
      schemas:[NO_ERRORS_SCHEMA],
    })
    .compileComponents();
  }));

我知道我比赛迟到了，但对于那些正在寻找答案的人来说……我对BsDropdownModule有一个确切的问题。
我知道我比赛迟到了，但对于那些正在寻找答案的人来说……我对BsDropdownModule有一个确切的问题。
确保您正在从导入BsDatepickerModule
'ngx-bootstrap/datepicker'而不是来自'ngx-bootstrap/datepicker/public\u api'
请确保从导入BsDatepickerModule
'ngx-bootstrap/datepicker'而不是来自'ngx-bootstrap/datepicker/public_api'
我尝试了它，但仍然不起作用。错误是：失败：模板解析错误：没有ControlContainer的提供程序（{pageTitle}}[error->]这是另一个问题。它与formgroup有关。我需要查看完整的html代码。编辑原始问题以添加完整的html代码还将
ReactiveFormsModule
添加到导入。现在是另一个错误。错误：StaticInjectorError（DynamicTestModule）[MyTestService]->HttpClient]：StaticInjectorError（平台：core）[MyTestService->HttpClient]：NullInjectorError:HttpClient没有提供程序！我尝试添加HttpMock测试客户端，但之后出现另一个错误：错误：无法调用Promise。然后在同步测试中，我尝试了它，但仍然不起作用。错误是：失败：模板分析错误：没有ControlContainer（{pageTitle}）的提供程序[错误->]这是另一个问题。它与formgroup有关。我需要查看完整的html代码。编辑原始问题以添加完整的html代码也将
ReactiveFormsModule
添加到导入。现在是另一个错误。错误：StaticInjectorError（DynamicTestModule）[MyTestService]->HttpClient]：StaticInjectorError（平台：core）[MyTestService->HttpClient]：NullInjectorError:没有HttpClient的提供程序！我尝试添加HttpMock测试客户端，但之后出现另一个错误：错误：无法调用Promise。然后从同步测试中
无错误\u架构
应为无否，除非您绝对绝望
无错误\u架构
应为无否，除非您绝对绝望