Angular and Javascript blog

Angular-cli with the super powers

Sharing is caring!

Angular-cli has simplified the life of a lot of developers reducing the startup time of a project and giving the ability to focus only on the code without wasting time in configurations.

However, a lot of angular developers (me included) were not able to use angular-cli because was not possible to change the configuration, adding new plugins or in general use all the flexibility that webpack offer.

Yesterday, after a long day while I was relaxing on the couch reading some news on twitter and boooom the twitter that I was waiting for months it’s finally here: Angular-cli from version 32.3 has a new feature called eject that allow you to generate a webpack.config.js for your project.

Let’s start from scratch following all the steps that we need to have this feature in place.

First of all we need to install angular-cli globally (for whom was already using it remember that it has changed name from angular-cli to @angular/cli) :

We’re ready to generate a new project with the cli ( I like scss so I’ll use it):

Until now nothing new, we just created a normal project with scss support…. now be ready for the magic part.

Inside your project run:

ng eject

In your project you’ll find finally the file that you were dreaming for a long time: webpack.config.js and you finally are free to add the plugin that you like.

Just because I was sceptical and I was not able to believe it, I tried to change some configurations and later install a plugin and trust me it works as a charm.

I installed smart-banner-webpack-plugin and  I just follow the plugin instructions:

npm install smart-banner-webpack-plugin

and running:

npm run build

the result of my bundle is:

So guys we don’t have anymore excuses not to use this awesome tool and we have to say thanks to the great jobs that people like Brocco, Hansl and other 195 contributors are doing.

If you enjoyed this post follow me on twitter @Dzurico!

6 Comments

  • Heinrich Goebl

    This is really good news, thanks for sharing! I can’t image that editing the `webpack.config.js` survives angular-cli updates. But I’ll give it a try.

    • dzurico

      tnx Heinrich. I’m glad you appreciated 😉

  • Pedro Castro

    Yeah! really good news.
    I’ll try it too 😉
    Thank you.

    • dzurico

      happy you like! Yesterday they just released RC with other interesting news

  • Nervosa

    Please change `ng new ng-cli-test –style scss` in an article to `ng new ng-cli-test –style scss` (double-dash before `style`). I’m on Linux Mint and that worked for me this way, not with a single dash.

    • dzurico

      Hi Nervosa,
      thanks for your comment, you’re right you need to put a double dash but unfortunately is the theme that I’m using that looks like remove it. I’ll change it with a gist.
      Thanks again
      Daniele