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

Tips on utilizing a connected service in a custom Azure DevOps extension's index.ts file

I have created a unique extension for Azure DevOps that includes a specialized Connected Service and Build task. When setting up the task through the pipeline visual designer, I am able to utilize the Connected Service to choose a service and then populate ...

Splitting Angular Components with Angular as-split

Having trouble adding a "title" to my angular as-split-area. The titles are appearing together rather than above the as-split-area. <div style="width: 800px; height: 400px; background: yellow;"> <as-split direction="vertical&q ...

Querying data elements using Graphql mutations: a step-by-step guide

const MUTATION_QUERY = gql` mutation MUTATION_QUERY( $name: bigint! ) { insert_name( objects: { name: $name } ) { returning { id name } } } `; const [onClick, { error, data }] = useMut ...

Incorporate the Get Your Guide Widget into an Angular2 component

Currently, I am attempting to embed a "Get Your Guide" Widget within an Angular2 application. Although the script in index.html is being requested successfully, I am facing difficulties adding it to the HTML of the component. <script async defer src=" ...

Implementing cursor-based pagination in Next.js API Route with Prisma and leveraging the power of useSWRInfinite

I am working on implementing cursor-based pagination for a table of posts using Next.js API Route, Prisma, and useSWRInfinite. Currently, I am fetching the ten most recent posts with Prisma in a Next.js API Route and displaying them using useSWR, sorted b ...

Having difficulty implementing Angular 4 redirection for transitioning from old hash URLs to new non-hash URLs

In our single page application, we originally had a simple tab structure where each tab click led to a corresponding #url. Examples: , After transitioning to Angular 4, the urls no longer contain hash symbols. They now look like this: , I have added the ...

In Laravel, a post request can pass a class with a property that is of a different class type

In my Laravel controller, I have the following function: public function save(Request $request, ClientOrderDTO $clientOrderDTO){ } The definition of the ClientOrderDTO used above is as follows: use App\DTO\ClientDTO; class ClientOrderD ...

Using pipes() and map() to extract an array from a nested hash with Angular's HttpClient Observable

Struggling with understanding RXJS Observables and pipes. The API response structure is as follows: { "_embedded": { "users": [ { "id": 1, "username": "steve" } ] } } Here ...

Troubleshooting issue with Vue Class Component and Vuex-class causing ESLint error

I am interested in utilizing vuex-class to bind helpers for vuex and vue-class-component However, an error message is displayed: Error: Parsing error - Using the export keyword between a decorator and a class is not allowed. Please use `export @dec class ...

Discovering different types of navigation in React Navigation using navigationRef

I'm currently working on adding types to my TypeScript version of this function, but I'm facing some difficulties with it. Perusing the React Navigation documentation: // RootNavigation.js import { createNavigationContainerRef } from '@rea ...

What is preventing the dependency injection of AuthHttp (angular2-jwt) into a component?

UPDATE: Success! Problem Solved After much trial and error, I finally discovered the solution to my issue. It turned out that the problem lied in a simple configuration mistake. To rectify this, I made changes to both my package.json (dependencies section ...

The ng2-pdf-viewer functionality does not seem to be compatible with the Ionic framework

Currently, I am developing a mobile app using Ionic 5 Angular project. The main purpose of the app is to allow users to explore PDF books. To display the PDFs on mobile, I have installed ng2-pdf-viewer. However, I encountered a problem where the page does ...

Discover the process of enhancing features in an Angular component with JavaScript functionality

I am currently working on a shopping cart project and I need to implement the functionality to add products to the cart. Can Angular scripts be used in the way shown in my code snippet, or is there another solution that may work better? <div> < ...

Utilizing an InjectionToken to supply another InjectionToken

I'm puzzled as to why the following code isn't functioning properly. When I manually set a string for APP_BASE_HREF, everything works smoothly. main.ts export function main(baseHref: string) { platformBrowserDynamic([ { provide: MY ...

The "void" type cannot be assigned to the type "ObservableInput<{}>"

I recently encountered this issue after updating to TS 2.2.2, and I suspect that is the root cause... While the code still functions properly, I am now seeing this error. I attempted various solutions such as returning an empty observable, catching the re- ...

Waiting for completion of two observables in RxJS/Angular 11 while also managing errors

Currently, I am facing the challenge of waiting for two requests to complete (observables) and performing certain actions. Here is what I need: Wait for both requests (observables) to finish If one of them fails - show one error message If both of them f ...

Encountering trouble with Angular material library following upgrade to Angular 6

Upon attempting to compile the application, I encountered the following error: ERROR in src/app/app.module.ts(15,5): error TS2304: Cannot find name 'MatToolbarModule'. src/app/app.module.ts(16,5): error TS2304: Cannot find name 'MatSidenavM ...

Strange behavior when working with Typescript decorators and Object.defineProperty

I'm currently working on a project that involves creating a decorator to override a property and define a hidden property. Let's take a look at the following example: function customDecorator() { return (target: any, key: string) => { ...

How can I retrieve an array from an object containing both a property and an array in TypeScript?

One of my objects always consists of a property and an array. When I use the console.log(obj) method to print it out, it looks like the following example: ProjectName: MyTest1 [0] { foo: 1, bar: 2} [1] { foo: 3, bar: 4} [2] { foo: 5, bar: 6} Alternat ...

Advanced automatic type inference for object literals in TypeScript

When working with TypeScript, I often declare generic functions using the syntax: const fn: <T>(arg: T)=>Partial<T> While TypeScript can sometimes infer the type parameter of a function based on its parameters, I find myself wondering if t ...