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.

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:

Now, we can that the error is removed.

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.

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

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.

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.

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.

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.

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.

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.