ng build or ng eject (webpack.config.js): does not generate encapsulated styles

[splincode]

Add materialize.css to app.component.ts

import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [
    './app.component.css',
    './materialize.css'
  ]
})
export class AppComponent {
  title = 'app';
}

Why in the dev mode you do not encapsulate the styles, but for prod mode you generate encapsulating, what is the difference then?

1. Angular CLI
Git clone https://github.com/splincode/css-unused-angular/tree/master

a) without --prod

$ ng build
Date: 2018-02-16T20:40:32.048Z
Hash: 13224e5318df41174336
Time: 6482ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 214 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 201 kB [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 11.4 kB [initial] [rendered]

b) --prod

$ ng build --prod
Date: 2018-02-16T20:14:15.082Z
Hash: 97493f8887217a94537b
Time: 13806ms
chunk {0} polyfills.f20484b2fa4642e0dca8.bundle.js (polyfills) 59.4 kB [initial] [rendered]
chunk {1} main.d08f181aadf378d3b8ee.bundle.js (main) 360 kB [initial] [rendered]
chunk {2} styles.9c0ad738f18adc3d19ed.bundle.css (styles) 79 bytes [initial] [rendered]
chunk {3} inline.747aae221429d69429b5.bundle.js (inline) 1.45 kB [entry] [rendered]

main.d08f181aadf378d3b8ee.bundle.js

2. Webpack
Git clone https://github.com/splincode/css-unused-angular/tree/ng-eject

a) without --prod

$ ng eject
$ npm run build -- -p
> webpack "-p"
 94% asset optimization(node:9024) DeprecationWarning: Chunk.modules is deprecated. Use Chunk.getNumberOfModules/mapModules/forEachModule/containsModule instead.                                                                             Hash: 302749e585f8cf378
d09
Version: webpack 3.11.0
Time: 7743ms
              Asset       Size     Chunks                    Chunk Names
   inline.bundle.js  803 bytes     inline  [emitted]         inline
     main.bundle.js     209 kB       main  [emitted]         main
polyfills.bundle.js    74.8 kB  polyfills  [emitted]         polyfills
   styles.bundle.js    5.47 kB     styles  [emitted]         styles
   vendor.bundle.js     636 kB     vendor  [emitted]  [big]  vendor
        favicon.ico    5.43 kB             [emitted]         
       ./index.html  625 bytes             [emitted]         

main.bundle.js (does not generate encapsulated styles)

b) --prod
Git clone https://github.com/splincode/css-unused-angular/tree/ng-eject-prod

$ ng eject --prod
$ npm run build -- -p
> webpack "-p"

Hash: 09d46d48293ddad3b805
Version: webpack 3.11.0
Time: 6565ms
                                   Asset       Size  Chunks                    Chunk Names
polyfills.fb8ad884215c65546efb.bundle.js    59.2 kB       0  [emitted]         polyfills
     main.d59389895f0bd2d338bc.bundle.js     355 kB       1  [emitted]  [big]  main
   inline.318b50c57b4eba3d437b.bundle.js  796 bytes       3  [emitted]         inline
  styles.0744b9f6769c326ccd7f.bundle.css    0 bytes       2  [emitted]         styles
                             favicon.ico    5.43 kB          [emitted]         
                            ./index.html  591 bytes          [emitted]         
                    3rdpartylicenses.txt    3.29 kB          [emitted]         

And your plugin does no work for unused css code:

webpack.config.js

// ..
const { PurifyPlugin } = require('@angular-devkit/build-optimizer');
// ..
plugins: [
 new PurifyPlugin(),
]

Why?

[mgechev]

We should have consistent behavior across environments. @splincode do you still hit this issue?

[angular-automatic-lock-bot]

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.}