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