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

Created on 17 Apr 2017 · 5Comments · Source: angular/angular-cli

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.

create a fresh angular app ng new form-app
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]
      });
    }
}

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>

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

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.

Source

mgochmuradov

Most helpful comment

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

mgochmuradov on 17 Apr 2017

👍3

All 5 comments

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.

clydin on 17 Apr 2017

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

mgochmuradov on 17 Apr 2017

👍3

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!

haricodeharan on 3 Oct 2018

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