How to create a sample Angular 8 application?

We will create a sample Angular application

Prerequisites:

1. Node.js
2. NPM
3. Angular CLI
4. IDE of your choice or Visual Studio Code

You can download Node.js from the below URL

Download | Node.js

npm will be downloaded along with Node.js. Next, install Angular CLI by executing the following command

npm install -g @angular/cli

Visual Studio Code is popularly recommended for developing Angular applications.

Execute the following commands to check if Node.js, npm, and angular CLI is installed correctly,

node -v

npm -v

ng v

Version check commands

But, why Node.js and npm is required?

Angular does not need Node directly. Node.js is used for all the build and development tools. Angular is a framework & you may use Typescript or Javascript or Dart programming language to program using Angular. But, Typescript is the popular choice. Here, we are going to see an application developed in Typescript but, a web browser like Chrome, Firefox, Internet Explorer understands only Javascript. So, we have to transpile Typescript to Javascript and for this transpilation we use Node.js.

npm(node package manager) is downloaded along with Node.js. npm is a package manager for Javascript applications. It is the default package manager for the Javascript runtime environment Node.js.

Execute the following command to create a new angular project.

ng new sampleApp

Next, it will ask you questions to add routing to the application, if you need it type “N” or type “Y”. Then, choose your stylesheet format and click enter. In a few seconds, your project will be successfully created.

What happens when you try to create a project without any project name as below,

ng new

Creating project without project name

As soon as you execute the command it will ask you to enter a project name. What happens when you don’t type anything and press enter? Will it create a project? The answer is no, enter doesn’t work until you type something. Give it a try.

Now, run the project from your terminal by executing the following command.

ng serve

or

npm start

After a successful compilation, you will see something like below.

Angular CLI after successful compilation

Now, open any browser of your choice and enter localhost:4200.

Angular Application in the browser

If you see the above screen in your browser, then you have successfully created your sample application.

Below are some useful commands that come in handy while developing applications in Angular.

ng g c componentName

or

ng generate component componentName

The above command is used to create a component, you can start using the component as soon as it is created without having to do any extra work with this command.

ng g s serviceName

or

ng g service serviceName

This command is used to create a service class for your application.

ng g m module-name — flat — module=app

or

ng g module module-name — flat — module=app

The above command has 2 hyphens before flat and module(we cannot enter 2 continuous hyphens on medium). The above command is used to create module classes be it routing module classes also. — flat puts the files into the src/app folder even when you are running the command from being in any folder. — module tells the CLI to register the newly creating module file in the imports array of the AppModule class. Now, you may have this doubt why we are not using this — module=app thing while creating components and services. Yeah, we don’t do that because we add components to the declarations array of the AppModule, not to the imports array, the command we are executing for components automatically does this by adding it to the declarations array, and for services we don’t need to register it in the AppModule for some reasons.

ng new — help

This shows some useful options.

These are some useful commands you need for faster development. If you face any errors during the installation or creation of the project feel free to comment.

THANK YOU!!