title: Angular 5: "No provider for ControlContainer"
body: <p>I have a little web app with Angular 5 and out of a sudden I am getting this strange error message in my browser console:</p>
  <pre><code>ncaught Error: Template parse errors:
  No provider for ControlContainer (&quot;
  &lt;/p&gt;
  &lt;form class=&quot;container&quot; (ngSubmit)=&quot;update()&quot;&gt;
    [ERROR -&gt;]&lt;app-form-group-component 
  [formGroup]=&quot;additionalInformation&quot;&gt;&lt;/app-form-group-component&gt;
        &lt;button &quot;): ng:///AppModule/KickoffComponent.html@4:2
  </code></pre>
  <p>That did not happen before and I am not aware of any made changes. And I have no idea what that message tries to tell me.</p>
  <p>This is the component template of form-group which seems to be invalid somehow:</p>
  <pre><code>&lt;div *ngFor='let e of formGroup' class=&quot;form-group&quot;&gt;
  &lt;label for=&quot;{{e.key}}&quot;&gt;{{e.label}}&lt;/label&gt;
  &lt;input type=&quot;{{e.type}}&quot; name=&quot;{{e.key}}&quot; 
  [(ngModel)]=&quot;e.value&quot; class=&quot;form-control&quot; 
  [ngClass]='{&quot;is-valid&quot;: e.valid === true &amp;&amp; e.required === true}'
          /&gt;
      &lt;/div&gt;
  </code></pre>
  <p>And this is the template where I consume form-group:</p>
  <pre><code>&lt;form class=&quot;container&quot; (ngSubmit)=&quot;update()&quot;&gt;
   &lt;app-form-group-component [formGroup]=&quot;additionalInformation&quot;&gt;&lt;/app-form-group-component&gt;
    &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  &lt;app-notification [notification]=&quot;notification&quot;&gt;&lt;/app-notification&gt;
  </code></pre>
  <p>I stared at it for hours, but I can't find any mistake.</p>
  <p>I should mention that I don't use Angular's FormGroup but my own solution (because I thought theirs to be overengineered and it didn't fit my specific needs). Could there be some kind of name collision? Of course, in the app.module I have imported the FormsModule for two-way binding to work and to intercept the form's submit.
  The notification-component at least works without complaints.</p>
  <p>I would be very grateful for any help.</p>
  <p><strong>Edit:</strong>
  I was asked to share my TS code.</p>
  <p>Failing component:</p>
  <pre><code>import { Component, Input } from '@angular/core';
  import { FormGroup } from '../../models/form-group';
  
  @Component({
    selector: 'app-form-group-component',
    templateUrl: './form-group.component.html',
  })
  export class FormGroupComponent {
    @Input() formGroup?: FormGroup
  }
  </code></pre>
  <p>The type <em>FormGroup</em> is just an Array and the component is just meant to be a visual wrapper.
  There are no additional services involved or DI and without that component Angular compiles just fine.
  (<em>formGroup</em> is marked as optional because TS would keep complaining about it not being initialized, although at runtime it will always be initialized)</p>
  <p>Component which hands over property:</p>
  <pre><code>import { Component, OnInit } from &quot;@angular/core&quot;;
  import { additionalInformation } from &quot;./additional-information&quot;;
  import { basicInformation } from &quot;./basic-information&quot;;
  ...
  
  @Component({
    selector: &quot;app-kickoff&quot;,
    templateUrl: &quot;./kickoff.component.html&quot;,
  })
  export class KickoffComponent implements OnInit {
    basicInformation: FormGroup = basicInformation;
    additionalInformation: FormGroup = additionalInformation;
    methods...
  }
  </code></pre>
  <p><strong>Edit:</strong> To answer @Andrei's question: I have no service or provider called ControlContainer. I just have three small services, none of them causes any trouble. As far as I can tell, ControlContainer has something to do with DI, but Angular's documentation on that topic is rather mystifying.</p>