Some time ago, Angular team introduced a CLI (Command Line Interface) tool for Angular2. It was created to help in development of ng2 applications. It can initialize a fresh app and serve it. It also has a support for webpack, so you can use it to build your applications. Today, I will like to have some play with it and show you how to make some use of this tool.
- What it is and what is it capable of
- Creating a new applications
- Working with the application
- Building the application
- Adding a lazy loaded route
- Summary - pros & cons
Code on GitHub
What it is and what is it capable of
When you go to the projects repository, you’ll learn it’s still a beta version, so you can expect some issues.
You install the CLI tool with the npm using this command:
npm install -g angular-cli. It will make it globally available on your system. After that you can check its help with
ng --help. You’ll see a big list of commands with their possible parameters:
The list goes on… You can check all the options in the mentioned github repository.
Creating a new applications
I said, you can initialize an empty application with the cli tool. Lets try it out:
ng new CliTest. This command will create a directory CliTest and bootstrap an application in it:
- Create applications
- Setup CLI commands
- Setup e2e tests with protractor
- Setup unit tests with karma
- Initialize a git repository
- Install all the dependencies via npm
When it’s finished, you can serve the application with
ng serve. It will first build the app and then serve it using a development server:
As you see, we have a working angular application now. The
ng serve functionality as a cool additional feature. It is watching for changes you make in the files when it detects some, it rebuilds the app and refreshes the browser, so you always have a fresh version running.
Working with the application
Let’s look into the code that was generated:
We have one component, which is the root of the application and displays the “App Works” message. We don’t have any services, pipes or routes. Apert from the routes, which generation was temporarily disabled, you can use the ng tool to add them to your application.
Adding a component
To generate a new component you run
ng generate component my-new-component:
As you see, it has added a new directory with all the files, including tests. It has also added it to the declarations section of the AppModule.
Adding a service
Now, lets try to add a service with
ng generate service my-new-service:
Again, service file was added along with the spec.ts, but this time the CLI didn’t add newly generated class to AppModule. Instead, it is showing a warning you have to do it yourself.
As I said above, routes are not supported by cli tool yet.
Building the application
Applications generated with the CLI tool, have support for 2 environments: development and production. When you run
npm build, the dev one is used by default. It analyses the application and builds it to dist directory:
main.bundle.js file has over 2.5MB, but remember it’s just a dev build - the file has comments and is not minified at all. Whole application was combined into 4 files. That’s very useful, because, without bundling, Angular2 apps are loading hundreds of files!
Now let’s try the production build with
ng build --prod:
Now, this looks much better! The whole app is just over 800KB. I know it’s not really ‘just’, but remember it contains everything needed to render it and Angular2 is quite a heavy framework:
Adding a lazy loaded route
As I mentioned above, the current version of the CLI does not support adding routes. I was interested to see, how can I add a new, lazy loaded route and how cli would handle the build process. It turned out to be really simple. I have pushed my test repository to and you can see these changes in one commit here. In general, I have added a new module with
ng g module lazy command. This has added a module and a component. After that I only had to modify the app routing:
And create a `lazy.routing.ts’:
Next, I added these routing definitions to
LazyModule, built it and it worked straight away. The CLI tool instructed webpack there is new module and it should be processed as a separate bundle:
Summary - pros & cons
After these few simple tasks with cli, I am sure it makes a lot of sense to use it. It’s not just a tool creating files for you. For me, its biggest selling point is the building process. Here is my list of its pros & cons:
- ng init - very easy way to bootstrap a project with everything you need
- ng generate - useful, but nothing special
- ng build - pure magic - one command and you get a dist folder with your files bundled and minified
- lack of control - you might run into problems of not knowing what is going on in your build. Everything happens automagically - it’s great when it works, but hard to debug in case something goes wrong
- no support for routes (temporarily)
- hard to introduce to ‘old’ projects - I think the only solution is to bootstrap a new project and move all your files there
All in all - it’s a great tool and will definitely simplify your daily work.