Very unintuitive "Unexpected closing tag" error on a valid template

user_4674270 0
Viewed 5442

It's my first day of learning angular and I've encountered a very unintuitive error message, which says:

Uncaught Error: Template parse errors: Unexpected closing tag "p". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (" Number {{ i + 1 }}: {{ phoneNumber }} [ERROR ->]

"): ng:///AppModule/AddressCardComponent.html@5:0

The error is thrown on a valid html template that looks like this:

<p>Phones:</p>
<p *ngFor="let phoneNumber of user.phone; index as i">
  <h3>
      Number {{ i + 1 }}: {{ phoneNumber }}
  </h3>
</p>

and in the component itself it just looks like this:

@Component({
  selector: 'app-address-card',
  templateUrl: './address-card.component.html',
  styleUrls: ['./address-card.component.scss']
})
export class AddressCardComponent implements OnInit {

  user: any;

  constructor() {
    this.user = {
      name: 'Foo Bar',
      title: 'Software Developer',
      address: '1234 Main St., State, City 610010',
      phone: [
        '123-123-1234',
        '456-546-4574'
      ]
    }
  }

  ngOnInit() {
  }

}

The cool thing is that if I change the inner h3 tag to a span or a, it works perfectly as expected, whereas when the inner tag is p, h3, h2, h1, div etc it just breaks with the same error.

It seams it just doesn't like certain kinds of tags, lol

Anyway,

  1. Am I doing something wrong here? If so, how should I correct the template? What do I miss?

  2. Are there many situations when that much unintuitive error messages come up while developing angular apps?

PS: I'm using Angular v7.0.5 if it makes any difference

angular7 angular6 angular html javascript
1 Answers

For HTML 5 to validate, heading tags cannot be inside paragraph tags. I suspect your code will also run fine if you replace <p *ngFor="let phoneNumber of user.phone; index as i"> with <div *ngFor="let phoneNumber of user.phone; index as i">

I am finding that Angular will often really force you to do things correctly. The way they see it, there is a standard, and it's there for a reason. So even if technically the code runs, there are potential side-effects that will happen elsewhere. And those, those might be a total PITA to find. So, they force you on the right path at the very core. This is probably a big part of the reason that Angular has a steep learning curve. It questions everything you think you already know.

Some Angular error messages can be a bit... vague. But I think I've struggled with JS errors just as much at the start.

user_79644470
Related