What Angular CLI Wraps/Ejects, and Deploying Zip Files

tldr; Angular CLI wraps ~19 packages and also webpack configuration. We can deploy zip files with our ng serve/build by prefixing the require function’s file name param with “file-loader!”.

Hey fellow coders!

In the beginning, we thought it only helped generate angular code for modules, routes, components, pipes, etc. And before that, we had been using the AngularClass Webpack seed project before Angular CLI switched over from SystemJS to WebPack.

Angular CLI rocks! Angular CLI also wraps up so many of the complexities and configuration for webpack, tucked neatly away. But sometimes, out of necessity or curiosity, we must eject this elegantly packaged present. Angular CLI wraps packages for webpack-dev-server, autoprefixer, cssnano, postcss-url and 15 “-loader”’s for css, exports, file, json, karma-sourcemap, less, postcss, raw, sass, script, source-map, istanbul-instrumenter, style, stylus, and url.

packages added by ng eject

scripts updated/added by ng eject

ng eject also updates angular-cli.json, the “ejected” boolean value

webpack.config.js is also ejected

We also needed to deploy zip files and before, we had modified the webpack.common.js config file to add the “zip” extension.

added “zip” to test

Instead of ejecting the angular cli packaging and adding zip to the test value inside the config, we can manually specify the loader per require as below.

prefix the file path with the name of the loader and “!”

Ejecting would have made a mess; hoping to avoid that and wondering if we’ll ever need it. Until then….

Let’s go play with some code!