unexpected closing tag angular error

Question

Writing an angular app in bulma, copied the template directly from the template site for testing and I get this error. I have checked and checked and everything is closed properly, yet somehow I keep getting an unclosed nav error. Oddly enough when I delete the closing nav tag, the site compiles correctly, but is broken. I have no idea what to do.

Code

<section class="hero is-info is-fullheight">
<div class="hero-head">
  <nav class="navbar">
    <div class="container">
      <div class="navbar-brand">
        <a class="navbar-item" href="../">
          <img src="http://bulma.io/images/bulma-type-white.png" alt="Logo">
        </a>
        <span class="navbar-burger burger" data-target="navbarMenu">
          <span></span>
          <span></span>
          <span></span>
        </span>
      </div>
      <div id="navbarMenu" class="navbar-menu">
          <div class="navbar-end">
                       <span class="navbar-item">
            <a class="button is-white is-outlined" href="#">
              <span class="icon">
                <i class="fa fa-home"></i>
              </span>
              <span>Home</span>
            </a>
          </span>
                       <span class="navbar-item">
            <a class="button is-white is-outlined" href="#">
              <span class="icon">
                <i class="fa fa-superpowers"></i>
              </span>
              <span>Examples</span>
            </a>
          </span>
          <span class="navbar-item">
            <a class="button is-white is-outlined" href="#">
              <span class="icon">
                <i class="fa fa-book"></i>
              </span>
              <span>Documentation</span>
            </a>
          </span>
          <span class="navbar-item">
            <a class="button is-white is-outlined" href="https://github.com/dansup/bulma-templates/blob/master/templates/landing.html">
              <span class="icon">
                <i class="fa fa-github"></i>
              </span>
              <span>View Source</span>
            </a>
          </span>
      </div>
    </div>
  </nav>
</div>

<div class="hero-body">
  <div class="container has-text-centered">
    <div class="column is-6 is-offset-3">
      <h1 class="title">
        Coming Soon
      </h1>
      <h2 class="subtitle">
         $this is the best software platform for running an internet business. We handle billions of dollars every year for forward-thinking businesses around the world.
      </h2>
      <div class="box">

        <div class="field is-grouped">
          <p class="control is-expanded">
            <input class="input" type="text" placeholder="Enter your email">
          </p>
          <p class="control">
            <a class="button is-info">
              Notify Me
            </a>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Error

`compiler.js:486 Uncaught Error: Template parse errors:
   Unexpected closing tag "nav". 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 ("
          </div>
        </div>
      [ERROR ->]</nav>
    </div>`

Answer 1

in my case I was forgetting a detail in the tag

    <button class="btn btn-primary" (click) "handleClickMe()
    ">Click me !</button>

I forgot to put the "=" in (click)="handleClickMe()

Answer 2

Usually if you see an "Unexpected closing tag <something> " the problem isn't actually with that <something> but rather with an adjacent element that hasn't been properly closed. Paste stuff here: https://validator.w3.org or any similar HTML validator service, or use a better editor/IDE that offers syntax highlighting to help you find these errors.

You are missing a closing </div> tag. You close navbar-brand , navbar-menu and navbar-end but you do not close <div class='container'>

As this missing </div> tag ought to be directly before </nav> , you get the error telling you, in fact, exactly where you ought to look. "I found a </nav> I wasn't expecting to see!" ... Ok, so go look at wherever you have a </nav> and figure out what element nearby is missing or has typos, etc.

Answer 3

Adding for future reference, for Angular

I've also seen this where you have invalid html like this

<p>
  <div>
  </div>
</p>

Change the p to a div and it'll work

Answer 4

Use a proper text editor then it'll become obvious what's happening here. Your container div is not closed.