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.

First step creating Angular 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:

Select Stylesheet for Angular App

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.

Angular 8 Project Creation is in Process

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

Angular 8 Project 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)

Serve Angular Application on local server.

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”

Yogesh Koli

Software engineer & Blogger live in India, has 8+ years of experience working with the Front-end and Back-end Web Application Development.

Recent Posts

Complete guide of using Laravel 6 Eloquent Subquery Enhancements

Learn How to use laravel frameworks new improved feature called Eloquent Subquery and get example…

1 year ago

3 Useful examples of using Array Map function in PHP – Best Practices

Learn how to use php array map function with easy and essential tutorial to modify…

1 year ago

Working with PHP Array Filter Function – Best Practices

Learn how to use php array filter function with easy and essential tutorial to filter…

1 year ago

How to add Access Modifiers with Constructor Parameters in TypeScript

Want to know how to refactor your Typescript class, Learn here utilising Typescript of the…

1 year ago

What is Access Modifiers and how to use Access Modifiers in TypeScript ?

What is Access Modifiers in typescript, how to use Access Modifiers, when to use them,…

1 year ago

Top 10 Super Useful Packages to Improve Laravel applications in 2019

This tutorial provide ultimate list of package those are top 10 on packagist and super…

1 year ago