How To Create an Angular Application (Basic Structure)
The article will be a walkthrough of creating a Basic Angular web application and run it on the local server.
Getting Started
Note: I will be using VSCode and Microsoft Windows as the preferred IDE and OS, though the steps would be similar for any other IDE on any other OS.
After the above prerequisites are complete, let’s begin!
Creating A New Angular Project
Launch VSCode, then open a terminal window in VSCode to generate a new Angular project.
The terminal will open with a default path as shown in the prompt. You can change to a preferred directory before proceeding; in the case of Windows, I will use the cd command.
Moving forward, angular-cli has a command to generate new projects ng new <project-name>. Just use any fancy project name you like and press enter, e.g. ng new qr.
This will trigger the angular-cli magic; it will provide a few options to configure some aspects of the project, for instance, adding angular routing. Then, based on the selected options, it will generate the whole project skeleton which can be run without any modification.
For this tutorial, enter Yes for routing and select CSS for styling. This will generate a new Angular project:
We now have got ourselves a fully working Angular project. In order to make sure everything is working properly, we can run the project by entering this command in the terminal: ng serve. Uh oh, but wait, this results in an error. What could have happened?
Don’t worry. Whenever you create a new project using angular-cli, it generates the whole skeleton inside a folder named after the project name specified in the command ng new qr. Here, we will have to change the current working directory to the one just created. In Windows, use the command cd qr to change directory.
Now, try running the project again with the help of ng serve:
Open a web browser, go to the URL http://localhost:4200 to see the project running. The command ng serve runs the application on port 4200 by default.
TIP: To run it on a different port, we use the command ng serve --port <any-port> for instance, ng serve --port 3000.
This ensures that our basic Angular project is up and running.