CODEWITHSUNDEEP
htmlangular
Cookies
Cookies

Reputation: 325

Unexpected closing tag "div" error angular2 HTML

I'm getting some errors in the console and not sure what is the issue is in the HTML. Any help would be appreciated.

error_handler.js:51 EXCEPTION: Uncaught (in promise): Error: Template parse errors: Unexpected closing tag "div" (" Click here to Signup [ERROR ->] "): ResetPassword@22:1 Error: Template parse errors: Unexpected closing tag "div" (" Click here to Signup [ERROR ->] "): ResetPassword@22:1

<section class="reset-password">
<div class="container container-responsive inner-top-xs">
    <form [formGroup]="resetPasswordForm" (ngSubmit)="resetPassword(resetPasswordForm.value, resetPasswordForm.valid)">
        <h4>Please enter your e-mail address and a temporary password will be sent to you.</h4>
        <div class="form-group">
            <label class="control-label" for="email">Email</label>
            <input type="text" formControlName="email" required class="form-control" id="email" placeholder="Email">
            <validation-message [control]="resetPasswordForm.controls.email"></validation-message>
        </div>
        <button type="submit" class="btn btn-flat__blue outer-top-xs" [disabled]="!resetPasswordForm.valid">RESET PASSWORD</button>
    </form>
    <div class="alert alert-dismissible alert-danger outer-top-xs" *ngIf="errorMessage && !successMessage"">
      <button type="button" class="close" data-dismiss="alert">&times;</button>
      {{errorMessage}}
    </div>
    <div class="alert alert-dismissible alert-success outer-top-xs" *ngIf="successMessage">
      <button type="button" class="close" data-dismiss="alert">&times;</button>
      {{successMessage}}
    </div>
    <div class="outer-top-xs">
        <a [routerLink]="['/getstarted']">Click here to Signup</a>
    </div>
</div>
</section>

Upvotes: 13

Views: 31377

Answers (3)

Caio Oliveira
Caio Oliveira

Reputation: 71

I was having this error because my component name started with a number (ex: <10-component-name></10-component-name>).

Changing the name to only fixed the issue.

Upvotes: 0

Iman Bahrampour
Iman Bahrampour

Reputation: 6800

This error occurred when you open an element and don't close its. this error shows up in this example:

<ion-list *ngSwitchCase="'facilities'">
 <ion-item *ngFor="let facility of facilities">
  <ion-icon name="facility.Icon" item-start></ion-icon>
  {{facility.Name}}
  <ion-icon color="red" name="rose" item-end></ion-icon>
 </ion-item> 
<ion-list>

As you see I don't close <ion-list> element (should be </ion-list>)

Be careful:

If you use any element properties with its values as the parser can't handle them, the element will be opened and this error occurs( "" at above example).

Upvotes: 5

Poul Kruijt
Poul Kruijt

Reputation: 71931

You've got one double quote too many at *ngIf="errorMessage && !successMessage"":

<div class="alert alert-dismissible alert-danger outer-top-xs" *ngIf="errorMessage && !successMessage"> 
<!--at the end of this line-->

Upvotes: 15

Related Questions