模板中的Angular4.4.3 html不会抛出错误

Question

我的应用程序的某些视图无法加载，但是当我检查视图时，但是没有渲染。我研究了HTML是如何工作的，如果你有人遗漏了一个未封闭的标签，HTML会查找最后一个标签并加载它。我在我的代码中修复了所有这些问题，但问题仍然存在于某些视图中但我已关闭所有标记。可能是什么问题呢？是否有任何工具或任何我可以添加的东西来检测这些问题？

在initiate-bill.component.html

中

<div class="main-content">
    <div class="container-fluid">
        <!-- <div class="row">
          <div class="col-md-5">
            <h3 class="text-align">Iniatiate bill payments</h3>
          </div>
        </div> -->
        <!-- row ends here for title -->

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header card-header-text" data-background-color="cyan">
                        <h3 class="card-title">Initiate bill payment</h3>
                    </div>
                    <div class="card-content">

                        <form [formGroup]="IniateBillGroup">

                            <div class="row">
                                <div class="col-md-7">
                                    <div class="input-group">
    <span
            class="input-group-addon">
<i class="material-icons">phone</i></span>
                                        <input type="text" placeholder="Enter customer's number" class="form-control"

                                        >
                                    </div>
                                    <div class="input-group">
    <span
            class="input-group-addon">
<i class="material-icons">monetization_on</i></span>
                                        <input type="text" placeholder="Enter amount" class="form-control"

                                        >
                                    </div>

                                    <div class="input-group">
      <span
              class="input-group-addon">
      <i class="material-icons">lock_open</i></span>
                                        <input type="text" placeholder="Enter pin " class="form-control"

                                        >
                                    </div>

                                </div>

                            </div> <!--row stops here-->

                            <div class="row">
                                <div class="col-xs-2 col-sm-3"></div>
                                <!-- Add the extra clearfix for only the required viewport -->
                                <div class="clearfix visible-xs-block"></div>
                                <div class="col-md-6 col-sm-3">


                                    <button type="submit" class="btn btn-fill btn-primary">SEND<i
                                            class="material-icons">payment</i>

                                    </button>
                                </div>
                            </div>

                        </form>


                    </div>
                </div><!--card ends here-->


            </div><!--col ends here-->
        </div>


    </div>
</div>

在initiate-bill.component.ts

中

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

@Component({
  selector: 'app-initiate-bill',
  templateUrl: './initiate-bill.component.html',
  styleUrls: ['./initiate-bill.component.scss']
})
export class InitiateBillComponent implements OnInit {
IniateBillGroup: FormGroup;
  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.IniateBillGroup = this.fb.group({
      customerNumber: '',
      amount: '',
      pin: ''
    })
  }

}