Angular 2 (Cli) not minifying asstet/css files

Question

I created a project with Angular 2 using Angular-cli. When I run

    ng build --prod

I don't have my js and css files minifyed. These files are located in assets/js/ and assets/css/.

How do I minify them? Thanks!

Answer 1

the assets-folder is included in your build because the folder is listed in the assets-array in angular-cli.json.

everything in the assets-array is copied "as-is" on build.

if you add your css and scripts to the styles and scripts -arrays in angular-cli.json they will be bundled on build so that all your css will be in styles.bundle.js (yes js).

you should not reference the css or js files in your index.html, angular-cli will insert the bundles in index.html.

If you still want the files to live inside the assets folder, remember it is copied "as is" so you can use any tool you like to minify whats in that folder, (e.g. https://www.npmjs.com/package/minifier) angular-cli will not touch it, just copy it on build.

Answer 2

Add your styles & js in angular-cli.json

"styles": [
    "assets/css/style.css",
    "assets/css/fonts.css"
],
"scripts": [
    "assets/js/app.js",
    "assets/js/other.js"
]