4

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

Denis Yakovenko
  • 3,241
  • 6
  • 48
  • 82
  • 3
    Take a read of [this](https://stackoverflow.com/questions/15656785/should-a-heading-be-inside-or-outside-a-p). You cannot have an `h1` tag inside a `p` tag – user184994 Nov 10 '18 at 11:22
  • 2
    Possible duplicate of [Should a heading be inside or outside a

    ?](https://stackoverflow.com/questions/15656785/should-a-heading-be-inside-or-outside-a-p)

     – Kirk Larkin Nov 10 '18 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 Nov 10 '18 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 Nov 10 '18 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 Nov 10 '18 at 11:37

1 Answers1

6

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.

Bytech
  • 1,125
  • 7
  • 22
  • Well, yeah, you're right. But it still feels a bit weird that angular tells me what tags to use and where to use them. At least, they shoud've come up with an appropriate error message... – Denis Yakovenko Nov 10 '18 at 11:34
  • I've updated my answer to better address the full set of your questions. :) – Bytech Nov 10 '18 at 12:16
  • You can replace too by < ng-container *ngFor="...>< p>..< /p>< /ng-container> – Eliseo Nov 10 '18 at 13:39