Component template HTML strings require attribute quotes

[uglow]

Using Angular 2.0.0-beta6 certain HTML template strings cause an error.

The following strings work:

<div><img src="/assets/demoModule/img/blank-logo.d71838b1.png"> <a class="btn" href="#/page2">Link</a></div>

<div><img src="/assets/demoModule/img/blank-logo.d71838b1.png"> <a class=btn href="#/page2">Link</a></div>

These strings do not work:

// Image does not render:
<div><img src=/assets/demoModule/img/blank-logo.d71838b1.png> <a class=btn href="#/page2">Link</a></div>

// Exception (see below):
<div><img src="/assets/demoModule/img/blank-logo.d71838b1.png"> <a class=btn href=#/page2>Link</a></div>

// Exception (see below):
<div><img src=/assets/demoModule/img/blank-logo.d71838b1.png> <a class=btn href=#/page2>Link</a></div>

The motivation for using quote-less attributes is that I hope to use existing HTML minification tools (like Webpack's html-loader?minimize=true) to reduce the size of component HTML strings. One of the ways that these tools save bytes is by removing attribute quotes when it is safe to do so.

Component:

import {Component} from 'angular2/core';

@Component({
  selector: 'page1',
  // This HTML string is valid according to HTML spec, but Angular throws a TemplateNormalizer error:
  template: '<div><img src=/assets/demoModule/img/blank-logo.d71838b1.png> <a class=btn href=#/page2>Link</a></div>'
})
export class Page1Component {
  constructor() {}
}

Exception:

EXCEPTION: Template parse errors:
Unexpected closing tag "a" ("<div><img src=/assets/demoModule/img/blank-logo.d71838b1.png> <a class=btn href=#/page2>Link[ERROR ->]</a></div>"): Page1Component@0:92
browser_adapter.js:76 EXCEPTION: Template parse errors:
Unexpected closing tag "a" ("<div><img src=/assets/demoModule/img/blank-logo.d71838b1.png> <a class=btn href=#/page2>Link[ERROR ->]</a></div>"): Page1Component@0:92BrowserDomAdapter.logError @ browser_adapter.js:76BrowserDomAdapter.logGroup @ browser_adapter.js:86ExceptionHandler.call @ exception_handler.js:56(anonymous function) @ application_ref.js:192NgZone._notifyOnError @ ng_zone.js:431collection_1.StringMapWrapper.merge.onError @ ng_zone.js:326Zone.run @ zone-microtask.js:1221(anonymous function) @ ng_zone.js:344zoneBoundFn @ zone-microtask.js:1194lib$es6$promise$$internal$$tryCatch @ zone-microtask.js:442lib$es6$promise$$internal$$invokeCallback @ zone-microtask.js:454lib$es6$promise$$internal$$publish @ zone-microtask.js:425(anonymous function) @ zone-microtask.js:97microtask @ ng_zone.js:384Zone.run @ zone-microtask.js:1217(anonymous function) @ ng_zone.js:344zoneBoundFn @ zone-microtask.js:1194lib$es6$promise$asap$$flush @ zone-microtask.js:236
browser_adapter.js:76 STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.js:76ExceptionHandler.call @ exception_handler.js:58(anonymous function) @ application_ref.js:192NgZone._notifyOnError @ ng_zone.js:431collection_1.StringMapWrapper.merge.onError @ ng_zone.js:326Zone.run @ zone-microtask.js:1221(anonymous function) @ ng_zone.js:344zoneBoundFn @ zone-microtask.js:1194lib$es6$promise$$internal$$tryCatch @ zone-microtask.js:442lib$es6$promise$$internal$$invokeCallback @ zone-microtask.js:454lib$es6$promise$$internal$$publish @ zone-microtask.js:425(anonymous function) @ zone-microtask.js:97microtask @ ng_zone.js:384Zone.run @ zone-microtask.js:1217(anonymous function) @ ng_zone.js:344zoneBoundFn @ zone-microtask.js:1194lib$es6$promise$asap$$flush @ zone-microtask.js:236
browser_adapter.js:76 Error: Template parse errors:
Unexpected closing tag "a" ("<div><img src=/assets/demoModule/img/blank-logo.d71838b1.png> <a class=btn href=#/page2>Link[ERROR ->]</a></div>"): Page1Component@0:92
    at new BaseException (https://localhost:3000/vendor/vendor.d1bcae28.js:1695:24)
    at TemplateNormalizer.normalizeLoadedTemplate (https://localhost:3000/vendor/vendor.d1bcae28.js:27718:20)
    at TemplateNormalizer.normalizeTemplate (https://localhost:3000/vendor/vendor.d1bcae28.js:27702:57)
    at TemplateCompiler.normalizeDirectiveMetadata (https://localhost:3000/vendor/vendor.d1bcae28.js:19686:42)
    at https://localhost:3000/vendor/vendor.d1bcae28.js:19759:152
    at Array.map (native)
    at Array.map (https://localhost:3000/vendor/vendor.d1bcae28.js:36097:15)
    at TemplateCompiler._compileComponentRuntime (https://localhost:3000/vendor/vendor.d1bcae28.js:19759:114)
    at TemplateCompiler.compileHostComponentRuntime (https://localhost:3000/vendor/vendor.d1bcae28.js:19711:19)
    at RuntimeCompiler_.compileInHost (https://localhost:3000/vendor/vendor.d1bcae28.js:27018:40)
    at DynamicComponentLoader_.loadNextToLocation (https://localhost:3000/vendor/vendor.d1bcae28.js:9670:32)
    at RouterOutlet.activate (https://localhost:3000/vendor/vendor.d1bcae28.js:33680:30)
    at https://localhost:3000/vendor/vendor.d1bcae28.js:17046:92
    at Zone.run (https://localhost:3000/vendor/vendor.d1bcae28.js:64455:25)
    at Zone.run (https://localhost:3000/vendor/vendor.d1bcae28.js:16207:43)
    at zoneBoundFn (https://localhost:3000/vendor/vendor.d1bcae28.js:64432:27)
    at lib$es6$promise$$internal$$tryCatch (https://localhost:3000/vendor/vendor.d1bcae28.js:63680:18)
    at lib$es6$promise$$internal$$invokeCallback (https://localhost:3000/vendor/vendor.d1bcae28.js:63692:19)
    at lib$es6$promise$$internal$$publish (https://localhost:3000/vendor/vendor.d1bcae28.js:63663:13)
    at https://localhost:3000/vendor/vendor.d1bcae28.js:63335:11
    at microtask (https://localhost:3000/vendor/vendor.d1bcae28.js:16247:30)
    at Zone.run (https://localhost:3000/vendor/vendor.d1bcae28.js:64455:25)
    at Zone.run (https://localhost:3000/vendor/vendor.d1bcae28.js:16207:43)
    at zoneBoundFn (https://localhost:3000/vendor/vendor.d1bcae28.js:64432:27)
    at MutationObserver.lib$es6$promise$asap$$flush (https://localhost:3000/vendor/vendor.d1bcae28.js:63474:11)

-----async gap-----
...

Also raised with the AngularClass team.

Raised on the back of a question I asked in #6099 (comment)

[CaptainCodeman]

You may also run into issues with case sensitivity - when I tried the webpack minifier it changed things like *ngIf to *ngif which broke the templates.

[uglow]

@CaptainCodeman - After upgrading to the latest version of html-loader (0.4.3), I found the following Webpack configuration worked:

config.module.loaders.push({
  test: /\.html$/,
  loader: 'html-loader'
});

config.htmlLoader = {
  minimize: true,
  removeAttributeQuotes: false,
  caseSensitive: true,
  customAttrSurround: [ [/#/, /(?:)/], [/\*/, /(?:)/], [/\[?\(?/, /(?:)/] ],
  customAttrAssign: [ /\)?\]?=/ ] 
};

Works with the following HTML template string:

<div class="page1">
  <h1>This is page 1</h1>

  <img src="../assets/img/blank-logo.png">

  <div *ngIf="myFlag">Yes</div>
  <div [style.display]="!myFlag ? 'block' : 'none'">Opposite of yes</div>

  <a class="btn" href="#/page2">Page 2</a>
</div>

Output:

<div class="page1"> <h1>This is page 1</h1> <img src="/assets/demoModule/img/blank-logo.d71838b1.png"> <div *ngIf="myFlag">Yes</div> <div [style.display]="!myFlag ? 'block' : 'none'">Opposite</div> <a class="btn" href="#/page2">Page 2</a> </div>

[CaptainCodeman]

Cool, thanks @uglow !

[aarmora]

@uglow This is awesome and has helped me a bunch. I'm going to ask this question here, even though it may not be related. After using the solution you provided here I was able to view html but I'm getting a js error now: EXCEPTION: SyntaxError: Unexpected token < in JSON at position 0. It seems like it's bringing back html when it's expecting json but all the html on the page appears to be loading correctly.

I'm requiring the views like this:

// WelcomeComponent
template:  require('../../views/welcome.component.html')

// AppComponent
template:  require('../../views/app.component.html')

// HomeComponent
template: require('../../../views/luw/home.component.html')

Also...is there way to not have the pathing be so disgusting? I'm not sure how to reference it. Again, this is from my webpack inexperience. I really appreciate your help!

[uglow]

@aarmora - sounds like a Webpack config issue. Not sure if this is the right place to discuss...
Maybe post a question to StackOverflow along with your Webpack config.

[aarmora]

@uglow It's something with how the html is being parsed, I think. If I remove the html and just add text to the template file it works fine. Even if I start to add in basic elements it works okay. Isn't that what the html-loader does, is parse the html?

In fact, after further testing, it's only when I add router-outlet, independent of the content of that route.

[aarmora]

@uglow Okay, I'm dumb, sorry. I'm making a call to a .json page that is not being included in the prod build and by default all 404s are going to the home page. So it's returning that homepage instead of the json that it is expecting. Thanks for your time and this html-loader!

[pkozlowski-opensource]

We want to be strict about quotes in the HTML compiler. I don't think HTML minification tools like WebPack plugin are good justification for changing the current approach since you would be using an offline compiler to process templates and HTML minification won't be needed at all.

Closing for now but speak up if you feel strongly about it.

[uglow]

@pkozlowski-opensource Thanks for responding, but can you help me understand what you mean by, "...you would be using an offline compiler to process templates..."?

[CaptainCodeman]

Not everyone will want to do offline codegen (especially during development)

Surely Angular 2 should be able to handle what is valid HTML ??