title: angular 2 error: Can't resolve all parameters for FormGroup
body: <p>I am following Thoughtram's tutorial for FormBuilder  <a href="http://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html" rel="noreferrer">http://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html</a>  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.</p>
  
  <pre><code>zone.js:388 Unhandled Promise rejection: Can't resolve all parameters for FormGroup: (?, ?, ?). ; Zone: &lt;root&gt; ; 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
  </code></pre>
  
  <p><strong>HTML sample</strong> for apartment4Rent.component.html</p>
  
  <pre><code>&lt;form [formGroup]="registerApartment4RentForm" (submit)="onSubmit($event)"&gt;
    &lt;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"&gt;
    &lt;/md-input&gt;
  </code></pre>
  
  <p>plus 4 more identically for state, city, street, and ZIPcode</p>
  
  <p><strong>AppComponent</strong> with constructor from the tutorial - in the app folder</p>
  
  <pre><code>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: ''
          })
        });
      }
  }
  </code></pre>
  
  <p>The headerFooter.html in the templateUrl has some html for a header and a footer and </p>
  
  <pre><code>            &lt;div&gt;
                  &lt;router-outlet&gt;&lt;/router-outlet&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>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)</p>
  
  <p>What has to change to make reactive forms work?</p>