Angular 8 Tutorial

Angular 8 Introduction History and versions of Angular 8 Architecture of Angular 8 How to install Angular 8 and set-up it. Creating our first Angular 8 app Angular 8 app loading

Difference between Angular And react

Angular vs react

Angular 8 Advantages Disadvantage

Advantage and Disadvantage of Angular 8

Angular 8 file structure

Angular 8 file structure

Angular 8 components

Components of Angular 8

Angular 8 CLI Commands

All CLI commands of Angular

Angular 8 with Bootstrap

How to install bootstrap for Angular 8 Libraries of Angular 8

Angular 8 Routing

Routing in Angular 8

Angular 8 directives

Angular 8 Directives Angular 8 ngIf directive Angular 8 ngFor directive Angular 8 ngSwitch directive Angular 8 ngClass directive Angular 8 ngStyle directive

Angular 8 pipes

Angular 8 Pipes

Angular 8 databinding

Angular 8 Data binding Angular 8 Event binding Angular 8 Property binding Two-way data binding in Angular 8

String Interpolation In Angular 8

Angular 8 String interpolation

Angular 8 forms

Angular 8 Forms Data flow of forms in Angular 8 Creating forms in Angular 8 Testing and validation of forms in Angular 8

Error fixing in Angular 8

Error fixing in Angular 8

Dependency injection and services in Angular 8

Dependency injection services in Angular 8

Angular 8 Animations

Angular 8 Animations

Dynamic components in Angular 8

Dynamic components in Angular 8

Angular 8 Module

Angular 8 Module Deploying an angular 8 app

Introduction of unit testing in angular 8

Unit testing in angular 8

Observables in angular 8

Observables in angular 8

Angular 8 universal

Angular 8 universal

Angular 8 Changes and new features

New features and changes in Angular 8

Conclusion

Angular 8 Conclusion

Angular 8 Error Fixing

We can get errors in Angular because of many causes.

Let's see an example to see some specific types of errors.

We have to create an app with the name "testing-app." In this app, we have a server and a button on the page, which can create other servers.

Here, “component.html" file contains the given code:

<div class=”container”>
 <div class=”row”> 
 <div class=”col-xs-12”>
 <h2>My Servers</h2>
 <button class=”btn btn-primary” (click)=”OnAddServer()”>Add Server</button>
 <br><br>
 <ul class=”list-group”>
 <li class=’list-group-item”
 *ngFor= ”let server of servers; let i=index” (click)=”onRemoveServer(i)”>{{server}}
 </li>
 </ul></div>
 </div> 

Code this in component.ts file:

 import {Component} from ‘@angular/core’;
 @Component({
 Selector: ’app-root’,
 templateUrl:’.app.component.html’,
 styleUrls: [‘./app.component.css’]
 })
 Export class AppComponent{
 title= ‘testing-app’;
 servers;
 OnAddServer(){
 this.servers.push(‘Another Server Added’);
 }
 onRemoteServer(id:number) {
 const position=id+1;
 this.servers.splice (position, 1);
 }
 } 

See the output:

Now, if we click on the “Add Servers” button, it will not add any server. Open the browser console to see the error type.

Angular 8 Error Fixing

We can see that it is showing “push” property undefined. Here, we get some useful information about errors.

Let’s check component.ts file:

 import {Component} from ‘@angular/core’;
 @Component({
 selector:’app-root’,
 templateUrl:’./app.component.html’,
 styleUrls:[‘./app.component.css’]
 })
 export class AppComponent{
 title=’testing-app’;
 servers;
 OnAddServer( ){
 this.servers.push(‘Another Server Added’);
 }
 onRemoteServer(id:number){
 const position=id+1;
 this.servers.spline(position,1);
 }
 } 

Here, we have declared servers but it is initiazed. So, we set it to be in array format to keep newly created servers. So, change it to:

Servers=[];

Change the component.ts:

 Import {Component} from ‘@angular/core’;
 @Component({
 Selector:’app-root’;
 templateUrl:’./app.component.html’;
 styleUrl:[‘./app.component.css’]
 })
 export class AppComponent{
 title=’testing-app’;
 servers=’testing-app’;
 OnAddServer( ){
 this.servers.push(‘Another Server Added’);
 }
 onRemoveServer(id:number){
 const position=id+1;
 this.servers.spline(position,1);
 }
 } 

Output:

Angular 8 Error Fixing 1

Now, we can that the error is removed.

Angular 8 Error Fixing 2

Debugging code in the browser

Angular Augury Tool

What is Augury?

It is an application inspection tool for Angular which runs in a web browser. It runs as a chrome browser extention for the developer's tool (dev tools) panel.

Augury provides vision into the application structure for an Angular application and the relation between these building blocks:

  • Components
  • Services
  • Routes
  • Modules
  • Dependencies
  • Injectors
  • Data binding
  • Events
  • Object property

Augury compliments DevTools into a debugging session, making it easy to modify state and emit events.

Installation of Augury

We can install Augury from the chrome web store. Select extentions from the side panel, type "Augury" into the search field, and then press enter.

Angular 8 Error Fixing 3

The search result list the Augury extension by Rangle.io:

Angular 8 Error Fixing 4

When we click on “ADD TO CHROME,” a popup will open. Select “Add Extention” to complete the process. Once the plugin has been successfully installed in chrome, an Augury icon would seem next to the address bar in the browser.

Angular 8 Error Fixing 5

The Augury icon provides additional information. Click on the image to discover what is this.

Using Augury

To start using Augury, we must have an Angular application running in the browser for inspection. If we have never debugged a JavaScript application, we may not be alert that each modern web browser provides a debug environment in the browser. DevTools, the debug environment is opened by using the given shortcut:

  • For Windows and Linux, use Ctrl+Shift+I
  • For Mac OS X, use Cmd+Opt+I

When the DevTools are moved, we will find the Augury tab on the right.

Angular 8 Error Fixing 6

Features of Augury

We will go over the main function which is available in Augury. It becomes familiar with the features and how to locate them when needed.

The first visible view is the component Tree, which shows loaded components belonging to the application.

Angular 8 Error Fixing 7

The component tree displays a hierarchical relationship between the components.

When a component is selected, Augury presents information about the selected part in the properties tab.

Angular 8 Error Fixing 8

Source Map

The Typescript code will only shown if any source map file already exists. If there is no source map is found in production, we will see the compiled JavaScript code, which may also be minified and challenging to read.

Angular 8 Error Fixing 9

The final notable feature of Augury is the Router Tree, which displays the routing information in the application. The router tree tab is located just next to the component tree tab in the top left side.

Angular 8 Error Fixing 10

After adding Augury on chrome, open our browser’s developer tool and Augury.

Angular 8 Error Fixing 11

Augury is an excellent tool to analyze our Angular application. Open Augury and reload our browser's page. We will see pages like this:

This is the injector graph:

Angular 8 Error Fixing 12

This is router tree:

Angular 8 Error Fixing 13

This is ngModule:

Angular 8 Error Fixing 14