Can't uglify inline CSS in HTML when `ng build --prod`

Anduin2017 commented 6 years ago

Versions

Angular CLI: 1.7.3
Node: 9.9.0
OS: win32 x64
Angular: 5.2.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

@angular/cli: 1.7.3
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.6.2
webpack: 3.11.0

Repro steps

Step 1 Create a new angular app using ng new

Step 2 Create some inline CSS in index.html, like:

<!DOCTYPE html>
<html lang="en">
<head><title>Kahla - Aiursoft</title>
<base href=".">
<link rel="manifest" href="manifest.json"/>
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" name="viewport">
</head>
<body>
<app-kahla>
<style>
  .loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%
  }

  body {
    background-color: #2391D3
  }

      @keyframes con {
    50% {
      transform: translateY(-.4rem)
    }
    100% {
      transform: translateY(0)
    }
  }

  .d {
    animation: con 2.0s ease-out infinite
  }

  .d-2 {
    animation-delay: .5s
  }

  .d-3 {
    animation-delay: 1s
  }
</style>
<h1 class="loading">Loading Kahla 
<span class="d">.</span>
<span class="d d-2">.</span>
<span class="d d-3">.</span>
</h1>
</app-kahla>
</html>

Step 3 Execute to build
```
ng build --prod
```

Observed behavior

The output of built index.html is uglified(Compressed). The output of built index.html is using the CSS where was input and not uglified(Compressed).

Desired behavior

The output of built index.html should use uglified(Compressed) CSS.

alan-agius4 commented 5 years ago

Hi, this is expected since styles inside the HTML is outside of the build pipeline.

That said you might be interested in this feature request https://github.com/angular/angular-cli/issues/11395

angular-automatic-lock-bot[bot] commented 5 years ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

angular / angular-cli