Unexpected closing tag "a".

[GuskiS]

Hello. I just tried to setup this library, but getting weird errors:

{ Error: Template parse errors:
Unexpected closing tag "a". 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 ("ass=icon-bar></span> <span class=icon-bar></span> </button> <a class=navbar-brand routerlink=/ >Home[ERROR ->]</a> </div> <div class="collapse navbar-collapse" id=header-navbar [collapse]=collapsed> <ul class="n"): ng:///angular/app/layouts/header/header.layout.html@0:353
}

However, template is fine:

    <div class='navbar-header'>
      <button aria-expanded='false' class='navbar-toggle collapsed' (click)='collapsed = !collapsed' type='button'>
        <span class='icon-bar'></span>
        <span class='icon-bar'></span>
        <span class='icon-bar'></span>
      </button>

      <a class='navbar-brand' routerLink='/'>Home</a>
    </div>

If I change a to be like this <a class='navbar-brand' [routerLink]='"/"'>Home</a> it works. But later on I'm getting more similar errors.

[Koslun]

Got similar errors. Should rather be the angular compiler that is giving you the weird errors.

[GuskiS]

@Koslun I resolved it during the time - it was something to do with webpack.LoaderOptionsPlugin. Don't remember which key excatly - I removed it completely. Also in here is something about it - https://github.com/AngularClass/angular-starter/blob/master/config/webpack.prod.js#L300

[Koslun]

@GuskiS Ok, so you resolved it using the exact same options? Meaning:

 new webpack.LoaderOptionsPlugin({
    debug: false,
    options: {
      htmlLoader: {
        // minimize: false // workaround for ng2
        // see https://github.com/angular/angular/issues/10618#issuecomment-250322328
        minimize: true,
        removeAttributeQuotes: false,
        caseSensitive: true,
        customAttrSurround: [
          [/#/, /(?:)/],
          [/\*/, /(?:)/],
          [/\[?\(?/, /(?:)/]
        ],
        customAttrAssign: [/\)?\]?=/]
      }
    }
  })

I resolved it myself by nestling a another span tag inside the a tags marked. I did however base much of our webpack config on that particular starter so have previously been using that config, however thought that it was used due to this issue: https://github.com/angular/angular/issues/10618#issuecomment-250322328. Can't remember why I believed this. Seeing that the issue closed I nonetheless figured I could remove it. Did it with other changes to the build so might not have noticed that this change in particular caused this weird error.

Using it again now and not seeing any errors so will just assume that it's necessary for whatever reason.

[shlomiassaf]

Closing as it seems resolved