Angular 8 Error Fixing

Facebooktwitterredditpinterestlinkedinmailby feather

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:

Code this in component.ts file:

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:

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:

Change the component.ts:

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
Facebooktwitterredditpinterestlinkedinmailby feather