Question

我已经看到有关stackoverflow的这个问题的答案，它涉及应用程序的配置方式。但是我很确定我已正确配置它，因为应用程序运行得很好但我的超级简单的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 { }

这是login-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)
                )
      );
  }

这是我的login-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进行操作，因此不知道问题是什么。除登录和应用外，我没有任何其他组件。我将Manager Service作为唯一的服务，而我所有的其他代码都只是普通的类。

Answer 1

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

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

Angular 4 - ＆＃34; exportAs＆＃34;没有指令。设置为＆＃34; ngForm＆＃34;

1 个答案: