angular: Reactive Forms + AOT in 5.0.0-beta.7 - StaticInjectorError: No provider for NgForm

yes 4.4.2 doesn’t include this patch because we had problems with our CI, we’ll have another release 4.4.3 today with it… sorry about that

Not sure if it’s the same bug, but I’m seeing the same error after upgrading from 4.3.6 to 4.4.1.

4.4.3 is out

The release will probably happen later today. Sorry for the glitch !

Can confirm this for v4.4.1 only when running in AOT To Reproduce ng new noformprovider Replce app.component.ts with

@Component({
  selector: 'app-root',
  template: `
  <form [formGroup]="g" >
    <input formControlName="name" />
  </form>
  `
})
export class AppComponent{
  g = new FormGroup({
    name: new FormControl('Toxicable')
  });
}

ng serve --aot open up browser and inspect console for error:

No provider for NgForm!

Thanks @alexzuza for tracking the root cause. Working on a fix right now.

I cherry-picked the fix for the into the 4.4.x branch and I’m about to cut the 4.4.3 release that will resolve this problem.

I think I got the same for 4.2.x For those who don’t know how to set 4.3.6 i did :

• go to package.json
• get the version number from one one the “@angular” ex : “@angular/common”: “^4.2.6”
• replace every “^4.2.6” into “~4.3.6” (be careful tu change the ^ into ~)
• then I ran “npm install”

and it worked for me 😃 (checked with “ng -v”)

hope it helped.

Same here with 4.4.1 and AOT using [formControl]="myFormControl" throws No provider for NgModel! and [formGroup]="myForm" throws No provider for NgForm!

With 4.3.6 all is working.

@IgorMinar Can the fix be made to the 5.0.0-beta.x branch as well?

Verified that this works fine in 4.3.6, but is broken in 4.4.1. I feel like a unit test should’ve caught this before a release.

Yeah same here in 4.4.1. I’ve reverted to 4.3.6 and that’s ok.

Same here in 4.4.1

This still doesn’t appear to be fixed in the 5.x branch. Coming soon?

👍 same here, just updated to 4.4.1

I am experiencing this same ‘No provider for e!’ error on v5.2.7. Any ideas?

I can confirm that v4.4.3 fixed the issue as well.

@IgorMinar 4.4.3 fixed the issue for me. Thanks!

@feelthescintillation … it should be 4.4.3.

The same on 5.2.9

There has been a report in Angular CLI of another library that suffered from this problem with Angular v5 (https://github.com/angular/angular-cli/issues/9383, more info in https://github.com/psykolm22/angular-google-place/issues/29#issuecomment-360884843). Maybe this is still a problem.

I had the same issue with 4.2.4 version. I’ve just made next steps:

• replace ‘4.2.4’ with ‘4.4.3’ in package.json file (only for angular packages);
• run npm i or yarn;

and it works now. Thanks for everyone!

I think I got the same for 4.2.x

@maximebourdel Because ^4.2.6 will install 4.4.2 and ~4.3.6 will install 4.3.6. You can read more about caret ranges and other specifications and use tester to play with it.

@TahaDiNero I don’t know when we will release a new version with the fix, it’ll be this week but not sure which day yet

I think the problem here is forms.metadata.json that angular published on npm

Let’s see why…

I compared jit and aot code generated by angular 5.0.0-beta.7. Angular generates wrong reference to ControlContainer provider(useExisting) for FormGroupDirective

jit

jit_providerDef_7(2048,null,jit_ControlContainer_8, null,[jit_FormGroupDirective_6]),
                                                               ^^^^^^^^^^^^^^^^
                                                                  correct

aot

i0.ɵprd(2048, null, i1.ControlContainer, null, [i1.NgForm]),
                                                  ^^^^^
                                                  wrong

Then i investigated how angular gets reference and found out the following

forms.metadata.json angular 4.3.6

"ɵl": {
      "provide": {
        "__symbolic": "reference",
        "name": "ControlContainer"
      },
      "useExisting": {
        "__symbolic": "reference",
        "name": "FormGroupDirective"
      }
},

forms.metadata.json angular since 4.4.x

"ɵl": {
  "__symbolic": "reference",
    "name": "ɵe"
},

where ɵe

"ɵe": {
  "provide": {
    "__symbolic": "reference",
      "name": "ControlContainer"
  },
  "useExisting": {
    "__symbolic": "reference",
      "name": "NgForm"
  }
},

form.d.ts

export { formDirectiveProvider as ɵe } from './src/directives/ng_form';
...
export { formDirectiveProvider as ɵl } from './src/directives/reactive_directives/form_group_directive';

I think it can be related with the fact that NgForm directive declares provider with the same name as FormGroupDirective https://github.com/angular/angular/blob/5.0.0-beta.7/packages/forms/src/directives/ng_form.ts#L21-L25