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