I've encountered various responses to this issue on stackoverflow regarding the configuration of the app. However, despite being confident in the correctness of my configuration as the app runs smoothly, my Karma test fails inexplicably.

Below is my 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 { }

The details of the login-form.component.ts file are presented below:

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)
                )
      );
  }

Check out the login-form.component.html code snippet below:

<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>

A brief overview of the unit test is provided below:

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();
  });
});

Moreover, here's an outline of my package.json for holistic insight:

{
  "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"
  }
}

In connection with

There is no directive with "exportAs" set to "ngForm"

, I'm also facing the issue of

Can't bind to 'ngModel' since it isn't a known property of 'input'

with regards to both input fields.

Despite adhering to the guidelines outlined here, I am baffled by the predicament at hand. My components solely consist of login and app, supplemented by Manager Service as the only service, while the rest of my code comprises plain classes.