Please enable Javascript for better experience...
Create your first Angular 6 application - ng new and serve
By Big | Apr 9, 2018 | In Tutorials | Total Views [ 94 ]
Taged In
(0 Like)
Rate

In this chapter we will learn to create new project and will go through the commands like ng new, ng serve with options they provide.

Introduction

In last chapter we have learnt about setting up prerequisite to start working on an angular project and till here it is assumed that you have all prerequisites installed on your system i.e. node.js, npm, angular CLI, any preferred IDE etc. Here in this chapter we will create new project and learn about ng new and ng serve commands with different options they have. In this chapter, our focus will be on below commands:

  • ng new
  • ng serve
  • We will learn about ng generate in next chapters

Creating new project with "ng new" command

New project can be created using ng new command with or without routing module included. You can use any of below commands as per your requirement.

  • ng new ProjactName        //Create project without route
  • ng new ProjactName -routing    //Project will be created with routing module

Here for demo purpose, we have created new project with command ng new DNCAngular5Tutorial where "DNCAngular5Tutorial" is application name. Command may take upto 5 minutes to execute and add all the dependencies.

create project ng new

Once project is created successfully, a success message displays at the end of console. You will see a projet folder with name DNCAngular5Tutorial inside which there are multiple folders like node_module, src, e2e with some cofiguration files. We will disuss this in detail in upcoming chapter.

create project ng new

Now open Visual Studio Code IDE and click on "Open folder..". Go to project location and open proect folder to see all the files and folder created so far. You will see folders like node_module, src, assets are already included into project folder. All files and folders are structured in a way that they are easy to maintain. Angular CLI adds all the related files and dependecies which are required to run the application.

project created successfully

Build and Run application with "ng serve" command

Once project is created successfully, you will see a default component (app.component) added to project. You can add as many components as needed but before that let's try to build and run the application.

Enter command ng serve in terminal to build and run application.

You can se command ng serve -open or ng serve -o to open application automatically in browser.

By default application opens on URL: http://localhost:4200 with 4200 as the default port assigned to application.

You can read about command in this link angular CLI.

create project ng new

Application opens in browser and is listening on port 4200. Our first angular application is ready to test and you can generate as many modules you want with ng generate command. We will discuss this in detail in upcoming chapter.

create project ng new

In next chapter, we will learn about angular project structure created with ng new command. We will learn about all the files and folder and configuration files generated and will try to understand their use in angular project.

<< Setting up first Angular 6 application - Installing Node.JS, NPM and Visual Studio Code IDE

Share this

About the Author

Big
Rahul Jha (Big)
Founder, Developer dotnet-concept.com
Has working experience in different phases of Software Development Life Cycle (SDLC) in CMS, Gaming, Health Care and Financial Services domain using Agile pattern. Working experience in Design patterns, ASP.NET, MVC, Windows application, WCF, ADO.NET, SQL Server and Test Driven Development (TDD) environment with JQuery, JavaScript, N-Unit, Entity Frameworks, LINQ, Code Refactoring and Business Objects Models.

User's Comments


 
Please SignUp/Login to comment...

Or comment as anonymous...
* Name
* Email ID
Comment