Angular 5: “No provider for ControlContainer”

Question

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:

ncaught Error: Template parse error         


        

Answer 1

Somehow bootstrap class was conflicting with angular.

I had to remove the top level div with bootstrap class.

Answer 2

Just in case someone is still having issues with this. I ran into the same error. However, it was not related importing ReactiveFormsModule or FormsModule .

In my case, I had copied a component directory from a different directory, and my SCSS imports in the ~.component.scss were relative to the initial directory that I copied from.

The error did not suggest this was the case and it took a little too long to finally consider checking other component files. Dur!

Answer 3

The ControlContainer is a abstract class which is extended by the AbstractFormGroupDirective inside the ReactiveFormsModule.

The error is thrown if you're using the ReactiveFormsModule and a <form>-element without a FormGroup bound to it via [formGroup]="myForm".

To fix this error you have to create a FormGroup and bind it to your form:

<form class="container" [formGroup]="myForm" (ngSubmit)="update()">

Also make sure you have both the FormsModule and the ReactiveFormsModule added to your module imports.

Answer 4

For Me its turns out that i imported just ReactiveFormsModule but not FormsModule. you need to import both.

Answer 5

This issue happen when you import ReactiveFormsModule and missing FormsModule in the module. So we need to import it to the module that your component belong to

import { ReactiveFormsModule, FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    ReactiveFormsModule,
    FormsModule
  ]
})
export class XXXModule { }

Answer 6

if did not registering your component in your app module, then it means you have to import the ReactiveFormsModule in that component's module.