How to Create Angular Application using Angular CLI

In last tutorial Setting up Angular Development Environment we have done setting up the development environment for angular production.

If you have note done with setup yet, then I would suggest your read Development setup tutorial first and then follow this tutorial.

If you are using old Angular CLI then I would suggest to update your angular cli to latest version by following this tutorial – How to upgrade Angular CLI from Version 7 to 8

So I assume you have angular CLI in place on your system.

Create new Angular Project

Now using Angular CLI we can create new Angular project, so open your terminal or command prompt if you are on windows and execute following command to create new Angular Product:

ng new first-angular-app

Make sure to use sudo if you are on mac OS.

After executing above command it will ask Would you like to add Angular routing? type y to say yes and enter, this will generate routing for our application.

Next it will cli will ask you about stylesheet, Which stylesheet format would you like to use? this will list option to use from such as CSS, SCSS, Sass, Less and Stylus you use arrows keys to choice your preferred stylesheet. I would always prefer to use SCSS so in my case I have selected SCSS here.

So select your preferred choice and press enter:

So above process will generate bunch files and folder inside first-angular-app folder and it is going to use npm to download the third party libraries.

Alright following screen is showing that our project is successfully created.

Next if you go inside our newly created project and checkout the package.json file you will see that we are using Angular 7 that is the latest and greatest

Serve Angular Application

let’s make sure that our application works before diving to understand angular folder structure

So back to the terminal and one more time we will use angular cli, use following command to start our angular application local server:

ng serve

You should see that our application is compile successful it generated bundles of javascript and css files and we have our live developer server running and listing to port 4300 on localhost (http://localhost:4300)

Next you can go ahead and open up browser and head over to http://localhost:4200/ you should see that our application is running:

Conclusion

So to conclude what you have learn from this tutorial is how you can create an Angular 8 application using Angular CLI and how you can serve you angular application on local server.

What’s Next

Now let’s move on to further step to understand Angular Application folder structure, what exactly it is and what are the important folder are there and how it exactly works.

To Learn more about Angular Application folder structure you can read this article “Angular Application Folder Structure”