angular 2 error: Can't resolve all parameters for FormGroup

I am following Thoughtram's tutorial for FormBuilder http://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html I copied the code and changed a few variable names. I'm using Angular 2.1.2, Typescript 2.0.8, and Angular Material2 (from Google). Atom Typescript says no error on any page. Nonetheless, I get errors at load, and the page does not load with this new code.

zone.js:388 Unhandled Promise rejection: Can't resolve all parameters for FormGroup: (?, ?, ?). ; Zone: <root> ; Task: Promise.then ; Value: Error: Can't resolve all parameters for FormGroup: (?, ?, ?).(…) Error: Can't resolve all parameters for FormGroup: (?, ?, ?).
at CompileMetadataResolver.getDependenciesMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14598:21)
at CompileMetadataResolver.getTypeMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14499:28)
at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14642:43)
at Array.forEach (native)
at CompileMetadataResolver.getProvidersMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14622:21)
at CompileMetadataResolver.getDirectiveMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14262:36)
at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14367:51)
at Array.forEach (native)
at CompileMetadataResolver.getNgModuleMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14361:51)
at RuntimeCompiler._compileComponents (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:17063:49)consoleError @ zone.js:388_loop_1 @ zone.js:417drainMicroTaskQueue @ zone.js:421ZoneTask.invoke @ zone.js:339
2016-11-10 16:01:40.394 zone.js:390 Error: Uncaught (in promise): Error: Can't resolve all parameters for FormGroup: (?, ?, ?).(…)consoleError @ zone.js:390_loop_1 @ zone.js:417drainMicroTaskQueue @ zone.js:421ZoneTask.invoke @ zone.js:339


HTML sample for apartment4Rent.component.html

<form [formGroup]="registerApartment4RentForm" (submit)="onSubmit($event)">
<md-input id="country" name="country" class="required" aria-labelledby="country" formControlName="country"
i18n-placeholder="select country placeholder" placeholder="Country" type="text" size="30" maxlength="30">
</md-input>


plus 4 more identically for state, city, street, and ZIPcode

AppComponent with constructor from the tutorial - in the app folder

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';

@Component({
moduleId: module.id,
selector: 'residence-app',
templateUrl: "components/navigation/headerFooter.html",
styleUrls: [ "components/navigation/styleHeaderFooter.css" ],
providers: [
FormBuilder,
FormGroup
]
})
export class AppComponent implements OnInit {
registerApartment4RentForm: FormGroup;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.registerApartment4RentForm = this.formBuilder.group({
country: '',
stateProvince: '',
address: this.formBuilder.group({
streetAddress: '',
zipCode: '',
city: ''
})
});
}
}


The headerFooter.html in the templateUrl has some html for a header and a footer and

<div>
<router-outlet></router-outlet>
</div>


in between where apartment4Rent.component.html loads and appears before I tried this reactive form code. My directory structure is app/components/input/apartment4Rent.component(s)

What has to change to make reactive forms work?

Continue reading...