Home Angular How to Create Angular Application using Angular CLI

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:

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:

Select Stylesheet for Angular App
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
Angular 8 Project Creation is in Process

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

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

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.
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”

Enjoy this tutorial? Get iTech Empires updates delivered straight to your inbox.

No Spam, ever. We'll never share your email address and you can opt out at any time.

Yogesh Kolihttp://www.itechempires.com
Yogesh Koli is a software engineer & Blogger lives in India. He's driven by an addiction to learning and a love for adventure. he has 6+ years of experience working with the front-end and back-end web application development.
avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of

Tutorials You May Like!

- Advertisement -