Simad | Angular CLI Create new project @simad2288 | Uploaded September 2018 | Updated October 2024, 8 hours ago.
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
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.
code.visualstudio.com/download
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.
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
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.
code.visualstudio.com/download
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.
