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 .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 ponent itself it just looks like this:

@Component({
  selector: 'app-address-card',
  templateUrl: './address-cardponent.html',
  styleUrls: ['./address-cardponent.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 e up while developing angular apps?

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

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/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 ponent itself it just looks like this:

@Component({
  selector: 'app-address-card',
  templateUrl: './address-card.ponent.html',
  styleUrls: ['./address-card.ponent.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 e up while developing angular apps?

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

• javascript
• html
• angular
• angular6
• angular7

• 3 Take a read of this. You cannot have an h1 tag inside a p tag – user184994 Commented Nov 10, 2018 at 11:22
• 2 Possible duplicate of Should a heading be inside or outside a <p>? – Kirk Larkin Commented Nov 10, 2018 at 11:24
• @user184994 Well, the browsers do render such things even though it doesn't follow the standards. Another question then: does angular really need to tell me what tags to use? and moreover, with such vague error messages... Feels a bit weird – Denis Yakovenko Commented Nov 10, 2018 at 11:29
• 1 I'd argue that it isn't that vague. It tells you exactly which tag is causing the error, and a link to the w3 spec that shows you the reason. The browser will automatically insert a closing p tag as soon as it reaches your h1, so you now have the original closing tag without a matching opening tag – user184994 Commented Nov 10, 2018 at 11:33
• Ok, I see. Thank you, guys, this topic was new to me. I think I should take some time with angular to get more used to it – Denis Yakovenko Commented Nov 10, 2018 at 11:37

1 Answer 1

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.