ng build production should minify index.html in dist

[CharlBest]

Bug Report or Feature Request (mark with an x)

- [] bug report -> please search issues before submitting
- [x] feature request

Area

- [x] devkit
- [ ] schematics

Versions

node -- version = v8.10.0
node -- version = v5.6.0

Repro steps

ng new proj
cd proj
ng build --prod

The log given by the failure

index.html in dist is not minified

Desired functionality

Minify the index.html in production dist

Mention any other details that might be useful

• I'm sure it did this in previous versions of the CLI
• I ran my site through https://developers.google.com/speed/pagespeed/insights and it suggested to minify my HTML. So that's how I ended up here.
  
• I'm not sure if this is related to this previous commit (feat(@angular/cli): add support for minifying HTML): 75311c2

PS: it's so cool how so many of these best practices and enhancement the CLI does out of the box for you. Thanks for that!

[CharlBest]

Hi @Brocco. I would just like to know how issues like these gets considered to be done?

[robindijkhof]

I thought Angular4 was able to do this?

[CharlBest]

AFAIK it was but was disabled as they made big changes in the core code (I think) and didn't have time to put it back in. But 8 votes so far is looking good so hopefully it will be considered soon.

[gilhanan]

I'm not sure if it will help someone, but worth try.
I found a workaround by use the html-minifier npm package and run it after the build have finished:
npm install --save-dev html-minifier

package.json:

"postbuild": "node index-minifier.js"

index-minifier.js:

var fs = require('fs');
var minify = require('html-minifier').minify;

var filePath = 'dist/index.html';

fs.readFile(filePath, function (err, buf) {
  if (err) {
    console.log(err);
  } else {

    var originalValue = buf.toString();
    var minifiedValue = minify(originalValue, {
      caseSensitive: false,
      collapseBooleanAttributes: true,
      collapseInlineTagWhitespace: false,
      collapseWhitespace: true,
      conservativeCollapse: false,
      decodeEntities: true,
      html5: true,
      includeAutoGeneratedTags: false,
      keepClosingSlash: false,
      minifyCSS: true,
      minifyJS: true,
      preserveLineBreaks: false,
      preventAttributesEscaping: false,
      processConditionalComments: true,
      processScripts: ["text/html"],
      removeAttributeQuotes: true,
      removeComments: true,
      removeEmptyAttributes: true,
      removeEmptyElements: false,
      removeOptionalTags: true,
      removeRedundantAttributes: true,
      removeScriptTypeAttributes: true,
      removeStyleLinkTypeAttributes: true,
      removeTagWhitespace: true,
      sortAttributes: true,
      sortClassName: true,
      trimCustomFragments: true,
      useShortDoctype: true
    });


    fs.writeFile(filePath, minifiedValue, function (err, data) {
      if (err) {
        console.log(err)
      } else {
        var diff = originalValue.length - minifiedValue.length;
        var savings = originalValue.length ? (100 * diff / originalValue.length).toFixed(2) : 0;
        console.log("Successfully minified '" + filePath + "'" +
          ". Original size: " + originalValue.length +
          ". Minified size: " + minifiedValue.length +
          ". Savings: " + diff + " (" + savings + "%)");
      }
    });
  }
});

[JounQin]

{
  "postbuild": "html-minifier dist/static/index.html --collapse-whitespace --remove-comments --remove-optional-tags --remove-redundant-attributes --remove-script-type-attributes --remove-tag-whitespace --use-short-doctype -o dist/static/index.html"
}

It should be simplest solution to me.

[MilesBHuff]

This should be built-in to Angular itself; we shouldn't have to configure a separate library to do this.

[e-oz]

It's definitely not a bug. I don't see why this feature should be implemented at all.

[rafa-suagu]

It's definitely not a bug. I don't see why this feature should be implemented at all.

It's simple, it's the same reason to apply the minification to CSS and JS.

This bug/feature must be present in combination with this issue: #8759

[e-oz]

It's pretty special file, so if such minification could produce any issues/bugs - better to avoid it.
I don't think many single-page angular apps have a lot of content in index.html so I don't see actual benefits - few bytes of saved space?

[rafa-suagu]

I'm sorry but I don't understand how the premise that a feature can cause bugs leads you to think that it can be ignored. In addition, your statement is contradicted because if index.html is such a controlled environment, it should not cause problems to treat it.

Finally, Google (through speed insights) warns you to minify the html with the consequent positioning problems. Angular is not just a framework to use in admin apps. Some of us need to take in count the Google tips to have good positioning.