Angular 4 - 没有将 "exportAs" 设置为 "ngForm" 的指令

Question

我已经看到有关 Whosebug 的这个问题的答案，该问题涉及如何配置应用程序。但是我很确定我已经正确配置了它，因为应用程序运行得很好，但是我的超级简单的 Karma 测试失败了。

这是我的 app.module.ts:

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
//import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { LoginFormComponent } from './login-form/login-form.component';

import { ManagerService } from './manager.service';
// import { AuthinterceptorService } from './authinterceptor.service';


@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
//    AppRoutingModule,
    HttpClientModule,
  ],
  declarations: [
    AppComponent,
    LoginFormComponent
  ],
  // TODO use interceptor to send oauth token
  providers: [
    ManagerService
    // , {provide: HTTP_INTERCEPTORS, useClass: AuthinterceptorService, multi: true}
    ],
  bootstrap: [AppComponent]
})
export class AppModule { }

这里是登录-form.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http';
import { FormsModule }   from '@angular/forms';

import { ManagerService } from '../manager.service';
import { Login } from './login';

@Component({
  selector: 'manager-login-form',
  templateUrl: './login-form.component.html',
  styleUrls: ['./login-form.component.css']
})
export class LoginFormComponent implements OnInit {

  login = new Login('', '');

  submitted = false;

  constructor(private managerService: ManagerService) { }

  ngOnInit() {
  }

  onSubmit() {
    console.log('Submitting form');
    this.submitted = true;
    this.managerService.retrieveToken(this.login).subscribe(oauth =>
        this.managerService.start(oauth).subscribe(
                  res => console.log(res),
                  (error: HttpErrorResponse) => this.processError(error)
                )
      );
  }

这是我的登录-form.component.html

<form (ngSubmit)="onSubmit()" #loginForm="ngForm" class="form-signin">

    <div class="form-group">
        <input type="text" class="form-control" id="username" placeholder="Username" [(ngModel)]="login.username" name="username" required>
    </div>
    <div class="form-group">
        <input type="password" class="form-control" id="password" placeholder="Password" [(ngModel)]="login.password" name="password" required >
    </div>

    <button type=submit class="btn btn-lg btn-primary btn-block" [disabled]="!loginForm.form.valid">Sign In</button>
    <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
</form>

单元测试（很简单）：

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

import { LoginFormComponent } from './login-form.component';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ LoginFormComponent ]
    })
    .compileComponents();
  }));

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

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

为了完整起见，我的 package.json：

{
  "name": "ui",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4",
    "angular-in-memory-web-api": "^0.3.1"
  },
  "devDependencies": {
    "@angular/cli": "1.3.1",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/language-service": "^4.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

因此，除了 There is no directive with "exportAs" set to "ngForm"，我的两个输入也有 Can't bind to 'ngModel' since it isn't a known property of 'input'。

我已经按照文档 here 进行操作，所以不知道问题出在哪里。除了登录和应用程序，我没有任何其他组件。我将管理器服务作为唯一的服务，我的所有其他代码都很简单类.

Answer 1

您应该在测试模块中导入 FormsModule

TestBed.configureTestingModule({
  declarations: [ LoginFormComponent ],
  imports: [ FormsModule ]  <====================== this one 
})
.compileComponents();

Angular 4 - 没有将 "exportAs" 设置为 "ngForm" 的指令

Angular 4 - There is no directive with "exportAs" set to "ngForm"

typescript

angular

angular4-forms