title: Property 'controls' does not exist on type 'AbstractControl' - angular4
body: <p>there are lots of blogs already posted for this error but none is specified for angular4.</p>
  <p>I am adding and removing dynamic controls on the form</p>
  <p><strong>add controls to the form during intialization</strong></p>
  <pre class="lang-js prettyprint-override"><code>    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(&quot;(^[^0][A-Z]{1}[0-9]*$)&quot;)]],
            vinNumber: ['', [Validators.required, Validators.pattern('^[0-9]{6}$')]],
          });
        }
  </code></pre>
  <p><strong>adding more control by calling this method</strong></p>
  <pre class="lang-js prettyprint-override"><code>     addPolicyTemplate() {
          const control = &lt;FormArray&gt;this.lienHolder.controls['policyDetails'];
          control.push(this.initPolicyTemplate());
        }
  </code></pre>
  <p><strong>removing controls from the form</strong></p>
  <pre class="lang-js prettyprint-override"><code>      removePolicyTemplate(i: number) {  
          const control = &lt;FormArray&gt;this.lienHolder.controls['policyDetails'];
          control.removeAt(i);
        }
  </code></pre>
  <p>but when i build the code i get error like this</p>
  <p><a href="https://i.stack.imgur.com/tuArK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tuArK.png" alt="enter image description here" /></a></p>
  <p>this is my html</p>
  <pre class="lang-html prettyprint-override"><code>      &lt;div formArrayName=&quot;policyDetails&quot;&gt;
              &lt;div *ngFor=&quot;let _policy of lienHolder.controls.policyDetails.controls; let i=index&quot;&gt;
                &lt;div class=&quot;panel panel-default&quot;&gt;
                  &lt;div class=&quot;panel-head&quot;&gt;
                    &lt;div class=&quot;glyphicon glyphicon-remove pull-right&quot; *ngIf=&quot;lienHolder.controls.policyDetails.controls.length &gt; 1&quot; (click)=&quot;removePolicyTemplate(i)&quot;&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;panel-body&quot;&gt;
                    &lt;div [formGroupName]=&quot;i&quot;&gt;
                      &lt;address [policyGroup]=&quot;lienHolder.controls.policyDetails.controls[i]&quot;&gt;&lt;/address&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  </code></pre>
  <p>I am not able to resolve this issue. i have followed <a href="https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2" rel="nofollow noreferrer">this</a> blog to come up with the dynamic control</p>
  <p><strong>UPDATE 1</strong></p>
  <p>when i changed my .ts code like this</p>
  <pre class="lang-js prettyprint-override"><code>    get DynamicFormControls() {
      
          return &lt;FormArray&gt;this.lienHolder.get('policyDetails');
        }
  </code></pre>
  <p>and the HTML code like this</p>
  <pre class="lang-html prettyprint-override"><code>     &lt;div formArrayName=&quot;policyDetails&quot;&gt;
              &lt;div *ngFor=&quot;let _policy of DynamicFormControls.controls ; let i=index&quot; style=&quot;position: relative&quot;&gt;
                &lt;add-policy-details [policyGroup]=&quot;lienHolder.controls.policyDetails.controls[i]&quot;&gt;&lt;/add-policy-details&gt;
                &lt;div class=&quot;remove-btn&quot; (click)=&quot;removePolicyTemplate(i)&quot; *ngIf=&quot;lienHolder.controls.policyDetails.controls.length &gt; 1&quot;&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  </code></pre>
  <p>it was working, and i was able to compile the file in t he production mode, using the command</p>
  <blockquote>
  <p>ng build --target=production --environment=prod</p>
  </blockquote>
  <p>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</p>
  <p>node version - v6.11.1</p>
  <p>npm version - 3.10.10</p>
  <p>angular version - 4.0</p>
  <p>dont know what exactly is causing the error.</p>