ng build/serve error with @angular/forms when --target=production

[mgochmuradov]

Bug Report or Feature Request (mark with an x)

- [x] bug report
- [ ] feature request

Versions.

@angular/cli: 1.0.0
node: 7.4.0
os: win32 x64
@angular/common: 4.0.2
@angular/compiler: 4.0.2
@angular/core: 4.0.2
@angular/forms: 4.0.2
@angular/http: 4.0.2
@angular/platform-browser: 4.0.2
@angular/platform-browser-dynamic: 4.0.2
@angular/router: 4.0.2
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.2

Repro steps.

1. create a fresh angular app ng new form-app
2. edit src/app/app.component.ts (add form builder)

import { Component, Inject } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from "@angular/forms";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';

  formGroup: FormGroup;

  constructor(
    private fb: FormBuilder) {
      this.formGroup = this.fb.group({
        foo: ["", Validators.required]
      });
    }
}

3. edit src/app/app.component.html (add form)

<h1>
  {{title}}
</h1>

<form [formGroup]="formGroup">
  <input required formControlName="foo" placeholder="foo">
  <span *ngIf="formGroup.hasError('required','foo')">This field is required!</span>
</form>

4. edit src/app/app.module.ts (add ReactiveFormsModule)

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';  //<-- update this
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
    , ReactiveFormsModule //<-- add this
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

5. run serve targeting production ng serve -prod

The log given by the failure.

****************************************************************************************
This is a simple server for use in testing or debugging Angular applications locally.
It hasn't been reviewed for security issues.

DON'T USE IT FOR PRODUCTION USE!
****************************************************************************************
** NG Live Development Server is running on http://localhost:4200 **
Hash: cafedca95df090c40d17
Time: 21618ms
chunk    {0} polyfills.eff75a43b855715a9d4b.bundle.js (polyfills) 158 kB {4} [initial] [rendered]
chunk    {1} main.f16af0db22be9a1f1e91.bundle.js (main) 32.4 kB {3} [initial] [rendered]
chunk    {2} styles.d41d8cd98f00b204e980.bundle.css (styles) 69 bytes {4} [initial] [rendered]
chunk    {3} vendor.079bcc603077b2f83490.bundle.js (vendor) 1.38 MB [initial] [rendered]
chunk    {4} inline.444a42088fb101a7229a.bundle.js (inline) 0 bytes [entry] [rendered]

ERROR in ng:///D:/Dev/SandBox/issue/form-app/src/app/app.component.html (7,3): Argument of type '"foo"' is not assignable to para
meter of type 'string[]'.

ERROR in ng:///D:/Dev/SandBox/issue/form-app/src/app/app.component.html (7,3): Argument of type '"foo"' is not assignable to para
meter of type 'string[]'.
webpack: Failed to compile.

Desired functionality.

build/serve without errors

Mention any other details that might be useful.

ng serve works without any problem, but targeting production fails.

[clydin]

The second parameter for hasError (and getError) is a string array so that error would be expected.
This should really be an angular issue as the path argument should probably have the same type as the path argument of the get function.

[mgochmuradov]

@clydin thanks, changing 'foo' to -> ['foo'] fixed the problem, and now building/serving with -prod works without any error.

...
<span *ngIf="formGroup.hasError('required',['foo'])">This field is required!</span>
...

[haricodeharan]

Production builds successfully but shows this warning:

This is a simple server for use in testing or debugging Angular applications locally.
It hasn't been reviewed for security issues.

DON'T USE IT FOR PRODUCTION!

[programad]

@clydin thanks, changing 'foo' to -> ['foo'] fixed the problem, and now building/serving with -prod works without any error.

...
<span *ngIf="formGroup.hasError('required',['foo'])">This field is required!</span>
...

This solution worked for me too.

[angular-automatic-lock-bot]

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