Angular CLI Create new project

In this video we will dscuss
1. How to create a new angular project from scratch using Angular CLI
2. Run the app
3. Run unit and end-to-end test

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

In this course we will use Visual Studio Code as the editor. Visual Studio Code is free and you can use it on any platform - Windows, Mac or Linux. If you have not installed it already, please install it by downloading from the following link.

To create a new Angular Project, open Command Prompt as an Administrator and execute the following command. This command creates all the required files and also installs all the required packages. Depending on your computer and internet connection speed, this command takes a few minutes to complete.

ng new MyFirstApp

ng is the Angular CLI
new for creating a new application
MyFirstApp is the name of your angular application

There are several options that we can use with "ng new". We will discuss all these options in our next video.

Once the above command has completed successfully you will see the following messages.
Installed packages for tooling via npm.
Project 'MyFirstApp' successfully created.

So what did this "ng new" command do
A new folder with name MyFirstApp is created
All the required configuration and source files are created.
All the npm dependencies are installed in node_modules folder
Unit and end-to-end tests are created
The Karma unit test runner is configured
The Protractor end-to-end test framework is configured

We will discuss unit tests, end-to-end tests, Karma and Protractor in our upcoming videos.

Please note that all these code and configuration files are created by the Angular CLI out of the box while still following the angular teams best practices and conventions.

Now, go to the folder (MyFirstApp) that contains our angular project, by executing the following command. cd stands for change directory
cd MyFirstApp

Now execute the following command at the command prompt to open the project folder in Visual Studio Code. Notice there is a single space and a DOT after the word code.
code .

At this point in Visual Studio Code you will see all the Angular project files. Also notice node_modules folder, that conatins all the installed packages.

We will discuss, what all these files are and their purpose in our upcoming videos.

To run the project using Angular CLI, type the following command at the command prompt. This command builds the application and opens it in our default browser. The flag --open, launches our default browser and runs the application. By default the application runs on port 4200. We can change this port number if required. We will discuss how to do that in our upcoming videos.
ng serve --open

At the moment, the angular development server is running in watch mode, meaning when a file changes, those changes are automatically detected, compiled and the browser reloads to reflect the changes. This is called live reload. We can turn this live reload functionality off, if required. Again we will discuss how to do this in our upcoming videos.

To stop the server, press CTRL + C while you are on the command prompt and then "Y" and ENTER key. This will stop the server.

To run all the unit tests, use the following command
ng test

To run all the end-to-end tests, use the following command
ng e2e

We will discuss Unit tests, end-to-end tests and all the options we can use to run them using Angular CLI in our upcoming videos.

Text version of the video

Slides

Angular CLI Tutorial

Angular CLI Text articles & Slides

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic

[Nitisha]

Thank you so much sir for this video. I was unable to use the 'ng new' command from last two days but I found the error and solved it finally. Nothing worked, neither github nor stackOverflow not even slack. But this video did, thank you!!!

[RaghuKarnati]

Hi Sir. I am following your videos since ages. You should be really appreciated for the way you explain complicated things in simple terms. I am always a fan of you. Brilliant work !!
I have a question here. Can't we use Visual Studio 2015 or 2017 instead of Visual studio Code. The problem is, I don't want to install so many versions of visual studio if all can be done on one common version.

[avinashg]

Great video again...the whole details description you provide in description section of video is really very helpful..Keep doing so. many thanks n salute for ur great work

[prafullawankhede]

visual studio 2019 is installed on machine but then also "code ." command is not opening source in visual studio. Please help
.

[koushikalam]

very helpful and effective tutorials . Thanks a lot.

[FarhaIbuCergas]

very clear explanation. fiuhh thank you for the effort. salute

[prajaktaawhad]

When I am going to create new project then this error is come "package install failed see above " So now what I do?

[prashanthmudaliar]

I am creating my project in D drive in a specific folder. I am facing two issues
1. unable to open visual code through code . command (Note I have directed cmd to my folder)
2. I didn't find karma.json in my application folder

Please help

[gkmishra]

give video on angular 9 on below topic sir --
changedetectorRef
ViewContainerRef
CDK Portal
DOM Portal
Template Portal
Application Ref
ngZone
ComponentFactoryResolver
queryList
Breakpoint observer
ForwardRef
WithLatestForm
OverLay Ref
Overlay
Navigation Extras
Children Outlet Context
URL Serielizer
URL Segment
Nested Tree Control- angular CDK
fake async

[jagadeeshkunche]

Sir While downloading the visual studio in which there are three option 1)User Installer
2)System Installer
3).zip form those which one I have to choose.

[rajkumarlodhi]

i got the error when i run the ng serve --open command

No projects support the 'serve' target.

[mdhabib-xfdc]

i have problem always comes A complete log of this run can be found in please give me solution,
This is probably not a problem with npm. There is likely additional log

[CodingSquid]

Internet Explorer was displaying a blank page after ng serve --open. The problem went away when I switched my default browser to Chrome.

[atignasa]

using new my-app, i was able to create a project but it was created in C:\windows. How do I change the default path?

[venkatkatta]

Hi, I tried to create a new angular App but installed successfully along with some error messages like "Error: not found: python2". Does it affect the project? How Do I minimize the errors

[dhananjaychintanwar]

thanks for tutorial :). npm install -g angular-cli is working for me instaed of npm install -g angular/cli.

[meenumeenu]

I’m getting an error like ‘ng’ is not recognised as an internal or external command, operable program or batch plzzz help

[DilliChalise]

In my case, angular CLI didn't install. And i followed this step to resolve the issue:

go to the environment variable under PATH and add the below line

[Vmol]

'npm' is not recognized as an internal or external command,
operable program or batch file.
Package install failed, see above.

[balachandraubhat]

error when creating a new project:
npm ERR! Unexpected end of JSON input while parsing near '....tgz"}, "engines":{"no'