How to Create A New Angular 6 Project Using Angular CLI

Introduction

In this article, we are going to learn how to create a new angular 6 projects using Angular CLI.

Prerequisites

“The development environment requirements you need to have these 4 tools installed on your system“.

1] Install Node & NPM
The angular 6 development environment you need Node a version 8.x or greater and the NPM version 5.x or greater. you can verify the version of Node and NPM on the command prompt and execute this command.

2] Install Angular CLI 6
If you are installing angular CLI for the first time then execute the following command. It will install the latest version.

>> npm install -g @angular/cli

And if you already have angular CLI installed on your machine and you want to upgrade it to angular CLI 6 or later then execute the following command.

>> npm install -g @angular/cli@latest

The verify version of angular CLI uses this command.

>> ng -v

3] Download and install Visual Studio Code

We have our Angular 6 development environment ready so Let’s create a new angular 6 project using the angular CLI command.

Let’s see what files generate without actually creating them these are the files generated as part of the new Angular 6 Project. because we have used the dry run flag angular CLI.

It didn’t actually create them it is just listing these files so we know what files create as part of the project.

If we don’t want the test files to generate then use the –skip-tests option to skip generating test files.

>> ng new Angular6Project --skip-tests

Let’s open this project in Visual Studio code so we can see the generated angular project structure and the files.

The Angular CLI configuration file is call angular-cli.json but the version In Angular 6, it rename to just angular.json

In this generated project we have several other files and folders, the project root folder we have the source folder this source folder contains the application source code that is the

Components
Templates
Services
Styles
Images etc..

And we also have some files outside of the src folder these files are meant to

Support
Building
Testing
Maintaining and Deploying the angular application

The root component class app.component.ts which is present in the app folder and the title contains the message “Welcome to Angular6Project” and save the file.

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
	templateUrl: '/app.component.html',
	styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'Welcome to Angular6Project!';
}

So our angular project has created successfully. Let’s go to the project directory and run the project using this command.

>> ng serve - - open
  //short cut command : ng s -o

The application is running on localhost with compiles the files and Let’s see the output in the browser.

Finally, let’s confirm this angular project is using angular version 6 for that open package.json file and see the all angular packages version is 6.1.0

“Thank you for reading this article. I hope you get started your application using Angular 6 CLI”.