Angular V6.1 Environment Set-up And Steps To Fix Set-Up Issue If Any

Introduction

Angular is an open source project, which can be used freely, modified and shared by others. Angular is developed by Google. Angular is a typescript based front-end web application platform.

The merits behind the use of Angular

It supports MVC Concept.
It always supports SPA Application.
It supports unit testing very easily.
It is open source.

Knowledge requires before go through Angular 6

Basic knowledge of Angular
Angular CLI

Prerequisite

Node
Npm
Angular CLI
Typescript
Text editor- visual code

Set up for Angular 6

Steps to check the installation of NODE and NPM

To verify the version of NODE and NPM you have to 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

Here from the below screenshot, you can find out the version of node -v is 8.12.0 and version of npm –v is 6.4.1.

Steps to update NODE and NPM

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.

Installing Angular CLI

It is a command line tool that helps us create Angular applications quickly and easily. Execute the following command and it will install the latest version.

npm install -g @angular/cli

Open browser type https://cli.angular.io/ check command to install Angular CLI.

As per the below screenshot Angular 6.2.1 CLI was installed globally on your machine.

Steps to update Angular CLI

To upgrade to the latest version, then execute the following command.

npm install -g @angular/cli@latest

It will install CLI globally where g represents globally. To check Angular CLI installed type command ng –v

Typescript Installation

Open the command prompt type npm install –g typescript, it will install TypeScript in your system. Now type tsc --version in command prompt to check the version of TypeScript installed.

Issues in Angular CLI latest version

If you get an error, there is an issue with your Angular CLI version. I recommend you install CLI version 6.2.1. Here are the steps,

npm uninstall –g @angular/cli
npm install –g @angular/[email protected]

Install the below files step by step, otherwise you will get an error during the creation of Angular 6 project. Using Visual Studio Code or Command prompt:

Node
Npm
Angular CLI
Typescript
Text editor- visual code

Steps to be followed,

Step 1

Open Visual Studio Code, The initial screen will be seen as below.

Step 2

Navigate to View >> Terminal. Then the terminal window will be opened in Visual Studio Code.

To create the directory named Angular6Demo:

PS C:\Users\prakash> mkdir Angular6Demo

Next, create a directory with the name “Angular6Demo”.

PS C:\Users\prakash> cd .\Angular6Demo\

Next, create an Angular application with the name “Angular6App” inside that directory.

PSC:\Users\prakash\Angular6Demo> ng new Angular6App

The below packages are installed.

The issue during run the above command using Visual Studio Code

npm ERR! Unexpected end of JSON input while parsing near '...,"esprima":"~ 1.0.2"}'

The package installation failed.

Steps to solve >>

Npm uses cache for downloading new packages for you. You need to clear your npm cache. Use the following command to clean:

npm cache clean --force

Then use your npm install command normally; e.g.:

npm install -g @angular/cli

Now, I created our first Angular 6 application using VS Code and Angular CLI. Now, run the following command to open the project.

PS C:\Users\prakash\Angular6Demo> code.

Now you can see the code file of our application in a new VS Code window. You can see the following file structure in Solution Explorer.

Open the package.json file and you can observe that we have the latest Angular 6.1.0 packages installed in our project.

Type the following command to start the web server.

PS C:\> cd .\Angular6Project\
PS C:\Angular6Project> ng serve

After the successful execution of the command, the below output will be shown in the Visual Studio Code terminal.

The OUTPUT will be shown like this.

Customize the home screen

Navigate to /src/app/app.component.ts file and replace the code with the below code.

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 6 App By Satyaprakash';
}

Running the Angular 6 project using the Angular CLI

Execute the following command to create a new Angular 6 project.

ng new Angular6App –d

Here, ng is the Angular CLI and new is for generating a new project. Angular6App Is the name of the project.

-d 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.

ng new Angular6App --skip-tests

--skip-tests option to skip generating test files. It 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.

In the command prompt window, use the following command to go to the project directory.

cd Angular6App

Then execute the following command to run the Angular 6 project. This command builds and launches your default browser and serves the application using the default port number 4200.

ng serve --open (shortcut command: ng s -o)

The project file structure between Angular 5 and Angular 6

One change I can point out at this time is the Angular CLI configuration file. Angular 5, the Angular CLI configuration file is called Angular-cli.json. In Angular 6, it is renamed to just Angular.json.

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.

Port Number Issue and its solution

Angular 6 Port 4200 is already in use. Use '--port' to specify a different port.

Using Visual Studio code I used port 4200 to start the web server; Angular live development server is taking port number 4200. So, again when I used the same command in command prompt by default, it takes port number 4200 and it shows the below error message.

C:\Angular6Project>ng serve

To overcome this issue I used a different port number so that the Angular live development server is listening to two port numbers, that is localhost:4200 and localhost:4201.

The output using new port number 4201.

SUMMARY

Introduction to Angular v6.1 environment set-up.
Steps to fix the set-up issue if anything is found.