CODEWITHSUNDEEP
htmlangular
PolarisTLX
PolarisTLX

Reputation: 349

Angular 2+: Error: Unexpected closing tag "div" - Uncaught Error: Template parse errors

I've been staring and toying with this html code block for a simple Angular 4 page, and no matter what I do, looking for typos and searches on the errors it keeps giving me a hard time with my closing tags.

Error Message:
Uncaught Error: Template parse errors: Unexpected closing tag "div". It may happen when the tag has already been closed by another tag. /div> /div> [ERROR ->]/div>

  <form [formGroup]="form">

    <!-- OLD PASSWORD -->
    <div class="form-group">
      <label for="">Old Password</label>
      <input formControlName="oldPassword" type="password" class="form-control">
         <div 
           *ngIf="oldPassword.touched && oldPassword.invalid" 
           class="alert alert-danger">
              <div *ngIf="oldPassword.errors.required">
                  Old password is required.
              </div>
         </div>
    </div>


    <!-- NEW PASSWORD -->
    <div class="form-group">
        <label for="">New Password</label>
        <input formControlName="newPassword" type="password" class="form-control">
        <div 
          *ngIf="newPassword.touched && newPassword.invalid" 
           class="alert alert-danger">
             <div *ngIf="newPassword.errors.required">New password is required.</div>
        </div>
    </div>


    <!-- CONFIRM PASSWORD -->
    <div class="form-group">
        <label for="">Confirm Password</label>
        <input formControlName="confirmPassword" type="password" class="form-control">
        <div 
          *ngIf="confirmPassword.touched && confirmPassword.invalid" 
           class="alert alert-danger">
             <div *ngIf="confirmPassword.errors.required">Confirm password is required.</div>
        </div>
    </div>

    <button class="btn btn-primary">Change Password</button>
  </form>

Upvotes: 0

Views: 2432

Answers (1)

PolarisTLX
PolarisTLX

Reputation: 349

[SOLVED] after pretty much turning this project upside-down and inside-out it seems my problem was that I had two components that were very similarly named:

"change-password"

and then

"change-password-reactive"

I had to removed the instance of "change-password" from my app.module.ts to get the page to load and this error to go away.

Upvotes: 1

Related Questions