Angular 7 Error Fixing

Angular 7 Error Fixing with angular7, tutorial, introduction, angular, js, Installation, History and Versions, First App, files explanation, Components, Directives, ngIf Directive, ngFor Directive, ngClassDirective, ngStyle Directive, Angular 7 with Bootstrap etc.

<< Back to ANGULAR

next → ← prev

Angular Error Fixing

You can get errors in Angular because of many causes.

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

We have created an app named "testing-app". In this app, we have a server and a button on the page which has the ability to create other servers.

Here, "component.html" file contains the following code:


  
 
   My Servers

   
 



 
   {{ server }}

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');
  }

  onRemoveServer(id: number) {
    const position = id + 1;
    this.servers.splice(position, 1);
  }
}

See the output:

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

You can see that it is showing "push" property undefined. Here, you 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');
  }

  onRemoveServer(id: number) {
    const position = id + 1;
    this.servers.splice(position, 1);
  }
}

Here, we have declared servers but it is not initialized. 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',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'testing-app';
  servers = [];

  OnAddServer() {
    this.servers.push('Another Server Added');
  }

  onRemoveServer(id: number) {
    const position = id + 1;
    this.servers.splice(position, 1);
  }
}

Output:

Now, you can see that this error is removed.

Debugging code in the browser

Angular Augury Tool

Search Angular Augury on Google chrome.

Click on Add to chrome button to add this tool on Chrome.

After adding it on chrome, open your browser's developer tool and open Augury.

Augury is an awesome tool to analyse your Angular application. Open Augury and reload your browser's page. You will see pages like this:

This is injector graph:

This is Router Tree:

This is ngModule:

Next TopicAngular 7 Directives

← prev next →

.Net

.NET Array Dictionary List String 2D Async DataTable Dates DateTime Enum File For Foreach Format IEnumerable If IndexOf Lambda LINQ Parse Path Process Property Regex Replace Sort Split Static StringBuilder Substring Switch Tuple

Java

Core Array ArrayList HashMap String 2D Cast Character Console Deque Duplicates File For Format HashSet If IndexOf Lambda Math ParseInt Process Random Regex Replace Sort Split StringBuilder Substring Switch Vector While

TheDeveloperBlog.com

Angular 7 Error Fixing

Angular Error Fixing

My Servers

Debugging code in the browser

Angular Augury Tool

Related Links:

.Net

Java

Related Links