Parse Error: when html have multiples classes

Ridermansb commented 8 years ago

The error after very long time...

 [master ≡ +2 ~0 -0 | +1 ~17 -0 !]> ./node_modules/.bin/webpack --config webpack.demo.js -d --display-chunks --display-reasons --display-error-details --progress
Hash: 7733c9a6f559e181aea6
Version: webpack 1.12.12
Time: 4200549ms
        Asset       Size  Chunks             Chunk Names
    bundle.js    1.51 MB       0  [emitted]  bundle
bundle.js.map    1.75 MB       0  [emitted]  bundle
   index.html  739 bytes          [emitted]
chunk    {0} bundle.js, bundle.js.map (bundle) 1.44 MB [rendered]
    [0] multi bundle 28 bytes {0} [built]
     + 49 hidden modules

WARNING in ./~/ng-cache-loader?minimize=false&-url&-removeComments&-removeCommentsFromCDATA&-collapseWhitespace&-conservativeCollapse&-preserveLineBreaks&-removeEmptyAttributes&-keepClosingSlash!./www/components/shared/partials/errorMessages.html
Parse Error: <p ng-message=\"required\" class=\"badge bg-danger text-white\">Este campo é obrigatório</p>\n<p ng-message=\"minlength\" class=\"badge bg-danger text-white\">O valor é muito curto</p>\n<p ng-message=\"maxlength\" class=\"badge bg-danger text-white\">O valor é muito longo</p>\n<p ng-message=\"email\" class=\"badge bg-danger text-white\">Deve ser um e-mail válido</p>\n<p ng-message=\"pattern\" class=\"badge bg-danger text-white\">Não é um valor válido</p>\n\n<span>{{::field.$name}}</span>\n<p ng-message=\"api\" class=\"badge bg-danger text-white\">{{::apiErrorMessages[field.$name] }}</p>\n";
Using unminified HTML
[master ≡ +2 ~0 -0 | +1 ~17 -0 !]>

The errorMessages.html is very simple:

<p ng-message="required" class="badge bg-danger text-white">Este campo é obrigatório</p>

<p ng-message="minlength" class="badge bg-danger text-white">O valor é muito curto</p>
<p ng-message="maxlength" class="badge bg-danger text-white">O valor é muito longo</p>
<p ng-message="email" class="badge bg-danger text-white">Deve ser um e-mail válido</p>
<p ng-message="pattern" class="badge bg-danger text-white">Não é um valor válido</p>

<span>{{::field.$name}}</span>
<p ng-message="api" class="badge bg-danger text-white">{{::apiErrorMessages[field.$name] }}</p>

And in my app.js I have import this file

require('ng-cache?minimize=false&-url&-removeComments&-removeCommentsFromCDATA&-collapseWhitespace&-conservativeCollapse&-preserveLineBreaks&-removeEmptyAttributes&-keepClosingSlash!./components/shared/partials/errorMessages.html');

If I change the html with

<p ng-message="minlength" class="badge">O valor é muito curto</p>

this works.

If I change the html with

<p ng-message="minlength" class="badge mySecondClass">O valor é muito curto</p>

this NOT works.

The follow webpack.config

teux commented 8 years ago

If you match extension with loader in webpack.config and simultaneously point same loader in require statement the loader applied twice. In this case result is unpredictable.

Please see this commen for explanation.

ShawnMercado commented 6 years ago

I'm having a similar problem but I don't have webpack.config set up to use this loader, only the inline require. I cannot for the life of me figure out what is happening

teux / ng-cache-loader

Parse Error: when html have multiples classes #17