Create an Angular Project

To Create a new project in Angular, the recommended way is to use Angular CLI which is a command-line tool for Angular.

There are 2 ways you can execute Angular CLI commands to create an Angular Project:

• Using the command prompt 
• Using the Visual Studio Code (or any other IDE) terminal

In both ways, we would run the same commands to create Angular Project and I would recommend you learn both the ways.

Firstly we will see using the command prompt:

1. Open the command prompt in Administrator mode then change to the directory in which you want to create your project.

You can choose your own location for the project folder. Now you have changed the directory in command prompt. 

2. Create a new folder directory inside the directory you are currently in. In the windows operating system, you can create a folder using MD "Your Directory Name". 

 

Once you create the folder, Enter the folder directory to create your Angular app using the cd command.

3. Now, before you use the Angular CLI command, make sure that it is installed in your system using the command ng --version. If Angular CLI is installed it should return its version and if not, it will give you an error.

4. Create your first project using Angular CLI "ng command".

Note: ng command does not work if you have not installed the Angular CLI.

Press Enter to run the above command. It will ask you a question "Would you like to add Angular routing? ". Type "N" as we don't want to have routing in our first project.

Then it will ask you "Which stylesheet format you would like to use". Just press Enter to choose default i.e CSS.

Once you press enter, Angular CLI will start downloading the required packages for your project. After a few minutes, your new angular application will be created. 

you can check the project folder:

5. Run your Project

You can build, and run your application using ng serve command. 

As you can see, ng serve will compile your application and run it on the port "4200".

Now, open the browser and type the URL: "localhost:4200". 

This is the default page that Angular CLI creates for you. you can also run "ng serve -o" command, this will build your app, start the webserver and open it automatically to the default browser. 

Steps to create Angular Project in Visual Studio Code IDE

1. Open the Visual Studio Code and then open a new terminal.

2. Create a Project from the terminal using ng new command.

Change the directory to the "MeanTutorial" directory using CD command or wherever you want to keep your Angular project:

If you are getting the above error, this is because of the Windows PowerShell execution policy. 

To remove this error you have two ways:

The first method is to change the settings in the Visual Studio Code. Click on the manage icon at the left bottom of the IDE and click settings.

Now, Edit the settings.json file under the Application menu.

Edit the settings.Json file to bypass the Execution policy

For your reference:

"terminal.integrated.shellArgs.windows": [
        "-ExecutionPolicy",
        "Bypass"
    ]

Save your settings.json file and restart the Visual Studio Code. 

The Second method, to resolve this issue is using the Windows PowerShell.

Running the above command will give you a warning stating "Changing the execution policy might expose you to the security risks". Type "A" for yes to all. Don't worry we will set the policy back to the default.

Now that we have granted the permission, we can set the policy back to the default using the below command:

Set-ExecutionPolicy Restricted

You can choose any of the two options available to bypass the Execution policy. I would recommend you to use the first way as it can be done quickly.

Now, Run the ng new command

As you can see, we are following the same steps to create an app in the Visual Studio Code terminal as we did in the command prompt.

After you run the above command, your project will be created and can be viewed in the IDE.

You can run the project using: ng serve