Refreshing the page does not trigger Angular callHooks

Encountering an issue with the proper invocation of F5 button or directive call URL from the address bar resulting in ngOnInit not being triggered correctly. Using a debugger to analyze the situation, it was noticed that callHook is not initiated after ngOnInit.

The Angular version in use is 9.1.2

This snippet demonstrates the ngOnInit method:

ngOnInit(): void {
    console.log('fired OnInit');
    
    this.dtOptions = {
      pagingType : 'full_numbers',
      pageLength : 10
    };
    this.getCurrentUser();
    this.initializeList();
    this.resetFormData();
  }

Furthermore, Ngx-Soap is utilized for database calls with the following service:

import { Injectable } from '@angular/core';
import { Client, ISoapMethodResponse, NgxSoapService } from 'ngx-soap';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { Document } from '../_models/document.model';
import { User } from '../_models/user.model';

@Injectable({
  providedIn: 'root'
})
export class GeneralService {
  client : Client;
  xmlResponse : string;
  jsonResponse : string;
  resultLabel : string;

  constructor(
    private soap : NgxSoapService
  ) {
    this.soap.createClient(environment.wsURL).then(client=>{
      client.addSoapHeader({
        'tns:ModuleCredential':{
          'tns:ModuleAppName':'xxxx',
          'tns:ModuleUserName':'xxxx',
          'tns:ModulePassword':'xxxx'
        }  
      });
      client.addHttpHeader(
        'Content-Type','text/xml; charset=utf-8'
      );
      this.client = client;
    })
    .catch(err=>console.log('SoapError',err))
   }

  Login(formData : User) : Observable<ISoapMethodResponse>{
    const body = {
      data : formData
    };    
    return this.client.call('Login',body)
  }

  GetCategoryList():Observable<ISoapMethodResponse>{
    const body ={
      data:null
    };
    return this.client.call('GetCategoryList',body);
  }  

An image captured from the Debugger shows three yellow warnings that were not called post-ngOnInit

The console output can be viewed here

Answer №1

After thorough investigation and experimentation, it was determined that the issue lied with NgxSoap as the service constructor was not being triggered, resulting in the error. Further exploration is underway to understand why this constructor is not activated on NgxSoap's GitHub repository. Appreciate all the support.

Answer №2

Display the specific error message that appears in the Chrome DevTools console.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Update the color of the label on the ng2-charts/charts.js pie chart

I am currently using ng2-charts and have successfully created a beautiful pie-chart with labels and data. However, I am unable to change the default grey color of the labels. Is this normal? How can I override the default label color? It appears that the ...

Creating a Map in TypeScript from an Array

I have a series of TypeScript objects structured like this: interface MyObject { id: string, position: number } My goal is to transform this array into a map format where it shows the relationship between id and position, as needed for a future JSON ...

Why is the mappable Observable lost after using Angular 5's HttpClient?

Why is Angular 5 httpclient causing me to lose the observable after mapping? Am I overlooking something crucial in my code? The following is my code snippet: getRepos(org:string):Observable<any>{ let params = new HttpParams().set('org&ap ...

How to Validate Ionic 2 Radio Button Selections with TypeScript

Imagine having a list like the one shown below: <ion-list radio-group [(ngModel)]="autoManufacturers"> <ion-list-header> Auto Manufacturers </ion-list-header> <ion-item> <ion-label>Cord</ion-label> &l ...

Sending a message through Discord.JS to a designated channel

Recently diving into Discord.JS, I am struggling to understand how to make my bot send a message to the General Chat when a new user joins. Many examples I've come across suggest using the following code: const channel = client.channels.cache.find(ch ...

TypeScript struggling to recognize specified types when using a type that encompasses various types

I have a defined type structure that looks like this: export type MediaProps = ImageMediaProps | OembedProps; Following that, the types it references are defined as shown below: type SharedMediaProps = { /** Type of media */ type: "image" | "oembed"; ...

Angular4 - Div with ngIf doesn't respond to click event

I'm attempting to add a click event to a specific div. Within this div, there is another div that is dynamically generated based on a Boolean condition that I receive as input. Unfortunately, in this case, the click event is only functioning when clic ...

The type of 'username' cannot be determined without specifying the reference to '@angular/forms/forms' in the node modules

I'm encountering an issue with my application: forgot-password.component.ts(44,7): error TS2742: The inferred type of 'username' cannot be named without a reference to '.../node_modules/@angular/forms/forms'. This is likely not po ...

The custom FontAwesome icon is failing to display properly

UPDATE : Here is the StackBlitz as requested. A custom SVG icon was created based on instructions provided by FontAwesome's collaborator found here. Despite mirroring the exact element structure of FontAwesome's icons, the custom icon does not ...

Exploring the implementation of binding a dynamic title using interpolation within a Kendo TabStrip component in an Angular 2

I have been attempting to bind interpolated titles into a Kendo TabStrip for Angular 2, but my code doesn't seem to be functioning correctly. When using hardcoded data without interpolation, everything works fine. However, when trying to incorporate ...

Warning: NG2 RC5 has deprecated the use of HTTP_PROVIDERS

With the release of Angular2 version RC5, there have been some changes such as deprecating HTTP_PROVIDERS and introducing HttpModule. While my application code is functioning properly with this change, I am facing difficulties in updating my Jasmine tests. ...

Utilizing the Teams web app within my customized electron application

I've been developing an electron app and am trying to integrate the MS Teams web app into it. I've successfully displayed MS Word, MS Powerpoint, and other apps using window.loadURL(''), but I'm experiencing issues with MS Teams. D ...

Best practice for importing pipeable RxJs operators in Angular CLI/WebPack rollup

In the earlier versions of Angular CLI, specifically those before 1.5.0, it was common practice to import all RxJs operators and statics into a single file for easy usage throughout the application. For example: rxjs-operators.ts // Statics import &apos ...

What is the best way to rid ourselves of unwanted values?

In the laravel-vue-boilerplate package, there is a User CRUD feature. I duplicated this functionality to create an Item CRUD by making some changes and adjustments. Everything is working fine except for one issue: after editing an item, when trying to add ...

The angular content is not scrolling

I have a basic angular content window that contains an adjustable group of settings values. When the window is collapsed, the fxLayout collapses properly, but I am having difficulty scrolling vertically. I have attempted to use overflow-y and just overflow ...

TypeScript's type inference feature functions well in scenario one but encounters an error in a different situation

I recently tried out TypeScript's type inference feature, where we don't specify variable types like number, string, or boolean and let TypeScript figure it out during initialization or assignment. However, I encountered some confusion in its be ...

Using Node.js and Typescript to bring in external modules from

Attempting to generate a random integer between 1 and 6 using the 'random' library. Here's what I have coded so far: import random from 'random' function rollDice(min:number, max:number) { return Math.floor(Math.random() * (ma ...

Tips for incorporating moment.js library into an Angular 2 TypeScript application

I attempted to utilize TypeScript bindings in my project: npm install moment --save typings install moment --ambient -- save test.ts file content: import {moment} from 'moment/moment'; I also tried without using TypeScript bindings: npm inst ...

When hovering over one div, both it and another div should be displayed simultaneously. The second div should continue to be displayed even when hovered over

I am looking to keep another div displayed when hovering over it - in this example, it says "hello." The div I want to remain visible is not a child element of the main div where I initiate the hover event. document.write("<base href=\"" + docum ...

What is the reason for my algorithm's inability to work with this specific number?

I'm currently working on creating an algorithm to compute the sum of prime numbers that are less than or equal to a specified number. Below is my attempt: function calculatePrimeSum(num) { // initialize an array with numbers up to the given num let ...