Setup

Installing the angular-cli is quite easy. All you need to do, is to paste the following command into a terminal window.

npm install @angular/cli -g

For this to work, you need to have node.js with npm installed on your machine.

The installation may take a while.

Creating your first Angular CLI App

Now it's time to create your first angular app with the CLI (Command Line Interface)

Doing so is not complex at all.

All you need to do, is choose a file-directory for your application to live in. Once that's done, open a terminal at that location and use the command

ng new [project-name]

to generate a new project. Make sure to replace [project-name] with a actual project name of your choice.

The CLI will now go ahead and create a new directory named just like the project.

Inside of that folder, it will create all the files for a basic but already executable angular application.

It will also install all required external dependencies. This can actually take some time.

What you need to know about ng New

The command we used above is not the only way to create a new angular application.

In fact, the command itself as a ton of options, that are all controlled via additional flags.

Of course, you do not need to know all of them by heart, but some of them are pretty useful.

Here are some of them:

Dry Run

Sometimes you want to try out, what a command does, before it actually does something.

Specifically if you are new to the CLI, the dry-run option will be very useful.

This option will stop the CLI from making any changes to the file system. Instead it will print everything it would have done to the console. That way you can check if the command actually does what you thought it does, before it causes any harm.

Using Sass instead of Css? No problem!

But the CLI creates normal css-files for every component by default. If you don't want to change them manually every time, you can use the --style scss option to tell the CLI that you want to use Sass.

But not only Sass-files (.scss) are supported. You can find a list of all supported style-extensions at the official angular-cli-wiki.

ng new example --style scss

Generate all the Things using the Angular CLI

Generating working angular application with just one command is pretty convenient isn't it?

But the angular CLI can do so much more!

You have created a new project and started developing. It will not take to long for you to come to point, where you will need more files. You need a new component, module, service or any other angular construct.

I don't know if you have already notice this, but developers are generally pretty lazy people. So creating three (or four with tests) new files every time you need a new component seems like an impossible task.

That is why the angular-cli can create these files for you.

To do this, you can use the ng generate command.

For example, if you need a new component, you could open a terminal at the desired location and use the

ng generate component [name]

command to generate all the files you need to create a new component.

The CLI will generate a new folder for you, as well. Isn't that great?

By the way, if you don't want that extra folder, you can use the --flat option:

ng generate component [name] --flat

Of course this does not only work for components. You can create a whole bunch of different angular-blueprints by replacing component by one of the following.

classdirectiveenumguardinterfacemodulepipeservice

Running your App with just One Command

Once we are done creating and developing our angular application, we also want to test and run it.

Fortunately doing so is very easy as well, thanks to the CLI.

All we need to do, is to open a terminal at the root of our project and use the command

ng serve

to start our application in development mode.

It will also watch the directory of our application for changes.

So if it detects a change, it will recompile the application (partly) and automatically update the application in the browser.

Personally, I have the app running in watch mode, almost all of the time during development.

It is important to know, that this feature is for development purposes only. Do not use this small web-server in an production environment!

Building

When you are happy with your angular app, it is time to deploy it to a web-server.

To get the files, that are required for that, we can use the

ng build

command.

This command will cause the CLI to build your application and places the output in a directory called "dist" (by default).

Using this command, the app is still in an development state.

This means, that certain optimizations where not performed and the app is still using the development environment variables.

To change that, use the --prod flag like this:

ng build --prod

Pull the Ripcord - Angular CLI Eject

Over the past year, the angular-cli has become more and more flexible.

But there might be still some scenarios that are not achievable with the CLI.

In this case, you can use the

ng eject

command.

It will disable the CLI for your project and create you a webpack configuration file.

While the CLI was using webpack under the hood anyway, you now have full control over webpack.

That way you have the most possible felxibility, at the cost of all of the convenient features we discussed above.

The main point of this command is, that the angular-cli does not lock you in. You can decide to leave it behind at any time.This is certainly important for large organisations.

However, keep in mind, that this command is a one way ticket.

There is no command that coverts the project pack to angular-cli-mode.

Conclusion

In this tutorial we learned how to set up the angular-cli and how to use it to do all the work, like-creating a new project or creating a bunch of files for a component, for us.

I hope you enjoyed this post.

If you did please hit the share buttons below and help other people enjoy angular a little bit more, as well.

Happy Coding!

Leave a comment

We save your email address, your name and your profile picture on our servers when you sing in. Read more in our Privacy Policy.

Stay up to date about what is going on in the web-dev community and on this site.

Special offers

Get notified about special offers of our own, or our partners' products. Don't worry, we won't spam your inbox!

Your Email Address

Yes, I want to subscribe to the email newsletter about new articles, products and special offers.

You can change your mind at any time by clicking the unsubscribe link in the footer of any email you
receive from us. For more information about our privacy practices, email performance mesurements, logging of the registration
process and your rights, please take a look at our
Privacy Policy

Join the Newsletter

Never miss a post

Receive updates when a new post is published.

Stay in touch

Stay up to date about what is going on in the web-dev community and on this site.

Special offers

Get notified about special offers of our own, or our partners' products. Don't worry, we won't spam your inbox!

Your Email Address

Yes, I want to subscribe to the email newsletter about new articles, products and special offers.

You can change your mind at any time by clicking the unsubscribe link in the footer of any email you
receive from us. For more information about our privacy practices, email performance mesurements, logging of the registration
process and your rights, please take a look at our
Privacy Policy