Creating angular 6 project

Suggested Courses
Angular 2 | Text articles & Slides
Angular CRUD | Text articles & Slides
Angular CLI | Text articles & Slides

This is Part 1 of Angular 6 Tutorial for beginners. In this video

• We will set up the development environment by installing the tools required for Angular 6 development
• Create a brand new Angular 6 project using Angular CLI

Pre-requisites
Basic knowledge of Angular and Angular CLI


If you are new to Angular, please check out our 
Angular 2 course and Angular CRUD course

If you are new to Angular CLI, please check out our 
Angular CLI course

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
Angular6Project	Is the name of the project
-d	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 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.

In the generated project there are several files and folders. If you are new to these files and folders, please check out Parts 7 and 8 from Angular CLI tutorial. 

The src folder contains the angular application components, templates, services, styles, images, and anything else the application needs. The files outside of this folder are meant to support building, testing, maintaining, documenting, and deploying the angular application.

To confirm this Angular application is using Angular Version 6, open package.json file and notice all the Angular packages version is 6.1.0.