Creating angular 6 project
Setting up Angular 6 Development environment
Step 1 :- Install Node and NPM using the link below.
https://nodejs.org/en/download/
You need Node version 8.x or greater and NPM version 5.x or greater. To
veriify the version of NODE and NPM you have, execute the following 2
commands using the command prompt window. Make sure you are running
the command prompt as an administrator.
node -v
npm -v
If you already have NODE and NPM installed and if you want to upgrade to
the latest version simply download and run the installer again, and it will
automatically update NODE and NPM to the latest version.
Step 2 :-
Install Angular CLI. It is a command line tool that help us create angular
applications quickly and easily while still following angular's best practices
and conventions. It's a great tool to increase your productivity as an angular
developer.
If you do not have Angular CLI installed already, execute the following
command and it will install the latest version.
npm install -g @angular/cli
If you already have Angular CLI installed, and you want to upgrade to the
latest version, then execute the following command
npm install -g @angular/cli@latest
Step 3 : Download and install Visual Studio Code
https://code.visualstudio.com/download
Create a new Angular 6 project using the Angular CLI :
Step 1 : Run the command prompt window as an administrator
Step 2 : Execute the following command to create a new Angular 6 project.
ng new Angular6Project -d
Command Explanation
Ng Is the Angular CLI
new For generating a new project
Angular6Projec
Is the name of the project
t
This is dry-run flag. This flag instructs Angular CLI just to list
the files it's going to create. It does not actually create them. This
-d
is a great option, because it lets us see what files will be
generated without actually generating them.
In our case, we do not want test files to be generated so let's also use --skip-tests
option to skip generating test files. The following generates a new Angular 6
project and all the required files. Notice, we have not used -d option, so Angular
CLI will create the Angular project and all the required files.
ng new Angular6Project --skip-tests
Running the Angular 6 Project
Step 1 : In the command prompt window, use the following command to go to the
project directory
cd Angular6Project
Step 2 : Execute the following command to run the Angular 6 project. This
command builds, launches your default browser and serves the application using
the default port number 4200 (http://localhost:4200/)
ng serve --open (short cut command : ng s -o)
At this point you will see the following on the browser
Welcome to Angular6Project!
This message is coming from the root component AppComponent.
The project structure and the files in angular project have not changed much
between Angular 5 and Angular 6. One change I can point out at this time is the
Angular CLI configuration file. Prior to Angular 6, the Angular CLI configuration
file is called angular-cli.json. In Angular 6, it is renamed to just angular.json. It's
not a simple rename, the file format is also slightly different.
