Property 'controls' does not exist on type 'AbstractControl' - angular4

Question

there are lots of blogs already posted for this error but none is specified for angular4.

I am adding and removing dynamic controls on the form

add controls to the form during intialization

ngOnInit() {

    this.lienHolder = this._fb.group({
      emailAddress: ['', [Validators.required, Validators.email]],
      policyDetails: this._fb.array([
        this.initPolicyTemplate(),
      ])
    });

  }

 initPolicyTemplate() {
    return this._fb.group({
      policyNumber: ['', [Validators.required, Validators.pattern("(^[^0][A-Z]{1}[0-9]*$)")]],
      vinNumber: ['', [Validators.required, Validators.pattern('^[0-9]{6}$')]],
    });
  }

adding more control by calling this method

 addPolicyTemplate() {
    const control = <FormArray>this.lienHolder.controls['policyDetails'];
    control.push(this.initPolicyTemplate());
  }

removing controls from the form

  removePolicyTemplate(i: number) {  
    const control = <FormArray>this.lienHolder.controls['policyDetails'];
    control.removeAt(i);
  }

but when i build the code i get error like this

this is my html

  <div formArrayName="policyDetails">
        <div *ngFor="let _policy of lienHolder.controls.policyDetails.controls; let i=index">
          <div class="panel panel-default">
            <div class="panel-head">
              <div class="glyphicon glyphicon-remove pull-right" *ngIf="lienHolder.controls.policyDetails.controls.length > 1" (click)="removePolicyTemplate(i)"></div>
            </div>
            <div class="panel-body">
              <div [formGroupName]="i">
                <address [policyGroup]="lienHolder.controls.policyDetails.controls[i]"></address>
              </div>
            </div>
          </div>
        </div>
      </div>

I am not able to resolve this issue. i have followed this blog to come up with the dynamic control

UPDATE 1

when i changed my .ts code like this

get DynamicFormControls() {

    return <FormArray>this.lienHolder.get('policyDetails');
  }

and the HTML code like this

 <div formArrayName="policyDetails">
        <div *ngFor="let _policy of DynamicFormControls.controls ; let i=index" style="position: relative">
          <add-policy-details [policyGroup]="lienHolder.controls.policyDetails.controls[i]"></add-policy-details>
          <div class="remove-btn" (click)="removePolicyTemplate(i)" *ngIf="lienHolder.controls.policyDetails.controls.length > 1">
          </div>
        </div>
      </div>

it was working, and i was able to compile the file in t he production mode, using the command

ng build --target=production --environment=prod

but from the past few days, i am facing the same error and not able to compile it in the production mode, i have not updated any of my application

node version - v6.11.1

npm version - 3.10.10

angular version - 4.0

dont know what exactly is causing the error.

Answer 1

After digging deep found the solution here.When you are doing the production build,you have to use the problem can be fixed by giving your component a get method:

get formData() { return <FormArray>this.lienHolder.get('policyDetails'); }

and then in your template:

<div *ngFor="let _policy of formData.controls ; let i=index">

Hope this works for you