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

I'm submitting a...


[x] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

When compiling an App with Reactive Forms using AOT in 5.0.0-beta.7 i'm getting the following Error when navigating to the Form:

Expected behavior

Reactive Forms should work like in beta.6

Minimal reproduction of the problem with instructions

test.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { TestComponent } from './test.component';

@NgModule({
    declarations: [ TestComponent ],
    imports: [ CommonModule, ReactiveFormsModule ],
    exports: [ TestComponent ],
    providers: [],
})
export class TestModule {}

test.component.ts

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

@Component({
    selector: 'app-form',
    templateUrl: './test.component.html',
    styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

    form: FormGroup;

    constructor() { }

    ngOnInit() {
        this.form = new FormGroup({
            name: new FormControl('test')
        });
    }
}

test.component.html

<form [formGroup]="form">
    <input type="text" formControlName="name">
</form>

What is the motivation / use case for changing the behavior?

Environment


Angular version: 5.0.0-beta.7


Browser:
- [x] Chrome (desktop) version 63
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [x] Safari (desktop) version 10.1.2
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:


@angular/cli: 1.5.0-beta.0
node: 7.5.0
os: darwin x64
@angular/animations: 5.0.0-beta.7
@angular/common: 5.0.0-beta.7
@angular/compiler: 5.0.0-beta.7
@angular/core: 5.0.0-beta.7
@angular/forms: 5.0.0-beta.7
@angular/http: 5.0.0-beta.7
@angular/platform-browser: 5.0.0-beta.7
@angular/platform-browser-dynamic: 5.0.0-beta.7
@angular/router: 5.0.0-beta.7
@angular/cli: 1.5.0-beta.0
@angular/compiler-cli: 5.0.0-beta.7
@angular/language-service: 5.0.0-beta.7
typescript: 2.4.2

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.

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!

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

Same here in 4.4.1

👍 same here, just updated to 4.4.1

Updated to 4.4.1 and get same error, but reverting to 4.3.6 not helped, removed all cache, node_modules and installed fresh version.

@fpmk

@fpmk Can you share small repo to reproduce it on 4.3.6?

@alexzuza

@alexzuza sorry it was my fault, I have ^4.3.6 and when I start npm install it installs me 4.4.1. 4.3.6 seems fine.

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 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.

I confirm problem resolved.
Thanks for all.

Thanks to all. The update fixes the problem!

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

Temporary workaround for beta: npm i @angular/[email protected]

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!

Updated Angular to fix Forms issue in prod mode. See angular/angular#…

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

Thanks for this. I was on 4.4.1, and the error I got didn't even point to ng-forms. It just said No provider for e!.

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

The same on 5.2.9

--prod flag, No provider for e!, 4.4.2, every view which contains a form...

--prod flag on 5.2.0 giving me the same issue

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Navigation Menu

Repository navigation

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

I'm submitting a...

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

30 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

I'm submitting a...

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

Activity

AustinMatherne commented on Sep 16, 2017

Toxicable commented on Sep 16, 2017

alexzuza commented on Sep 16, 2017

bjornharvold commented on Sep 16, 2017

PierreRochard commented on Sep 16, 2017

fpmk commented on Sep 17, 2017

alexzuza commented on Sep 17, 2017

fpmk commented on Sep 17, 2017

dessalines commented on Sep 17, 2017

dottodot commented on Sep 17, 2017

smoke commented on Sep 18, 2017

30 remaining items

dinerotah commented on Sep 20, 2017

alexanderknapstein commented on Sep 20, 2017

jponeill commented on Sep 23, 2017

intellix commented on Sep 23, 2017

andreypelykh commented on Sep 25, 2017

filipesilva commented on Jan 31, 2018

jdhines commented on Mar 23, 2018

SalilGokhale commented on Jun 12, 2018

fontenele commented on Aug 12, 2018

salcott commented on Feb 23, 2019

cpower1994 commented on Mar 11, 2019

angular-automatic-lock-bot commented on Sep 14, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions