The resolution of Angular 8 resolver remains unresolved

I tried using console.log in both the constructor and ngOnInit() of Resolver but for some reason, they are not being logged.

resolve:{serverResolver:ServerResolverDynamicDataService}},

console.log("ServerResolverDynamicDataService constructor");

console.log('ServerResolverDynamicDataService resolve:'

const appRoutes : Routes =[
    {path:"",component:HomeComponent},
    {path:"servers",canActivateChild:[AuthGuardService],component:ServersComponent,
        children:[                
          {path:":id",component:ServerComponent,
           resolve:{serverResolver:ServerResolverDynamicDataService}},
          {path:":id/edit",component:EditServerComponent,canDeactivate:[CanDeativateGuardService]}]},

Resolver:

@Injectable()
export class ServerResolverDynamicDataService implements Resolve<ServerModel>{

    constructor(private serversService:ServersService){
        console.log("ServerResolverDynamicDataService constructor");
    }

    resolve(activatedRouteSnapshot: ActivatedRouteSnapshot, routerStateSnapshot: 
        RouterStateSnapshot): ServerModel | Observable<ServerModel> | Promise<ServerModel> {
            console.log('ServerResolverDynamicDataService resolve:'+activatedRouteSnapshot.params['id']);
        return this.serversService.getServer(+activatedRouteSnapshot.params['id']);
    }    
}

Update1: The service is properly registered in the providers array of app.module.ts

  providers: [ServersService,AuthGuardService,AuthService,CanDeativateGuardService,ServerResolverDynamicDataService],

Even though the resolver code contains log statements, they do not appear in the console when hitting a specific URL like http://localhost:4200/servers/1?allowToEdit=0&allowTest=2#loadPage. Strangely, changes made elsewhere in the application reflect successfully, indicating that the application refreshes as expected except for the resolver function.

Update2 A StackOverflow post suggests removing the parent canActivateChild service to make it work, but I am unsure about what exactly is causing the issue. Any help in understanding this discrepancy would be greatly appreciated.

Answer №1

The role of a Resolver is to act as a service, and it's important to note that OnInit does not get executed within a service. In fact, aside from OnDestroy, there are no other lifecycle hooks available in a service.

Assuming your resolver is being provided somewhere, if not, you may need to specify this in the decorator using an argument like:

@Injectable({providedIn: 'root'})
.

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

Troubleshooting a useContext error in Next.js with TypeScript

I've been working on an app using next.js for the frontend, and I encountered an issue while trying to stringify an object. Here's a snippet of the error message: Argument of type '{ auth: dataObject; }' is not assignable to parameter o ...

Utilizing event binding with ngForTemplate in Angular 2

Imagine having a straightforward list rendering component: import {Input, Component } from 'angular2/core' @Component({ selector: 'my-list', template: ` <div *ngFor='#item of items' (click)='onItemClicked(i ...

Do we require two-way binding to effectively exchange data between components in this situation?

I'm currently facing some challenges in updating data in a child component when new data is added from the parent component. Here's a snippet of my template: <ion-content> <app-feed-comments [comments]="comments" [userId]=& ...

What is the standard way to write the server-side code for HTTP request and response handling?

I stumbled upon these resources: How to send HTTP request GET/POST in Java and How to SEND HTTP request in JAVA While I understand the client-side aspect, how can this implementation be done on the server side? The goal is to utilize the link on the clie ...

What is the best way to showcase the information from this API on an HTML page using Vanilla JavaScript?

I am currently working on implementing an AJAX call to fetch data from a movie API online. Below is the HTML code I have written for this: <html> <head> <meta charset=utf-8> <title>Movie Database</title> ...

Could you please provide me with information on how to replicate the beforeModel function in EmberJS in AngularJS?

When working with emberJS, I have the ability to intercept a state/route activation process by: visiting this link and overriding the beforeModel function. Is there an equivalent to the emberJS beforeModel routing function in the ui router module of ang ...

Guide on utilizing the disable feature in SortableJS for a Vue project

I have successfully implemented the draggable effect on my el table using element-ui-el-table-draggable and it's working perfectly. Now, I am looking to incorporate the disable option from SortableJS, but I'm unsure how to integrate these two fu ...

angular-cli: Select templates based on the current environment

Currently, I am utilizing @angular/cli: 1.0.0 and aiming to utilize component templates based on the environment. The code implementation is as follows: import {Component} from '@angular/core'; import {environment} from '../environments/env ...

Trouble with HTTP.GET Request within a Previous Event Situation

Whenever I attempt to use a previous event to fetch data from my API, the information seems to disappear once outside the subscribe block. I experimented with relocating the service outside of the component, but encountered the same issue. myObject :S ...

React application not displaying element properly?

I am facing an issue with my react modal that displays a sign-in and sign-up form. The problem arises when I try to access the button on the form using its id, which is modal-sign-in-submit-button. document.getElementById('modal-sign-in-submit-button ...

Angular is experiencing difficulty locating the routing path for the auxiliary `router-outlet`

Exploring the intricacies of routing in Angular to gain a deeper understanding of the concept. Encountering an issue where I am receiving an exception NG04002: Cannot match any routes. URL Segment: 'about' when attempting to click on the About li ...

How can an Angular Component be created in the browser using the standard method?

Attempting to develop a basic Angular example using JS/ESM. It has been some time since working within the angular environment, and there appear to be two primary choices: Utilizing the UMD lib (preferably to be avoided) Using the ESM2015 folder and loadi ...

JavaScript - Marking selected text: What are the options?

I am looking to implement a feature in JavaScript (without jQuery) that will allow me to highlight selected text with control points or markers (left and right). These markers should function similar to those on mobile phones, allowing me to extend the sel ...

Stop the form submission until validation is complete

I'm currently working on a form and encountering some validation issues. HTML: <form id="regForm" class="form-group" method="POST" action="signup.php"> <div class="col-md-12"> <h2>Job Pocket</h2> </div> <di ...

Reordering items in Angular2 ngFor without having to recreate them

I am facing a unique situation where I must store state within item components (specifically, canvas elements) that are generated through an ngFor loop. Within my list component, I have an array of string ids and I must create a canvas element for each id ...

Exploring the depths of JavaScript JSON elements

After processing my PHP code, it generates a JSON output that contains multiple entries in the same structure. Here is an example with two entries: { "0": { "campaign_id": "31", "title": "new title", "description": "new descrip ...

What is the best way to halt a specific function in jQuery?

I recently developed a website for my photographer friend, and I implemented a feature where the home page is initially blurred. Visitors can click a button to unblur the content. While the functionality works smoothly, there's one issue - every time ...

What is the best way to access a custom object in JavaScript that was created in a different function?

Currently working with JavaScript and jQuery technology. In one of my functions that runs on document ready, I am creating objects with different attributes. While I can easily access these object attributes within the same function, I'm facing diff ...

Unforeseen execution issues arising from repeated Ajax calls with SetTimeout in JavaScript

I have a list of users displayed in an HTML table that is dynamically created on page load. Each row includes an inline button with onclick="functionName(userId)" that triggers the following actions: When clicked, a Bootstrap modal popup is shown and the ...

Retain the chosen values even after submitting the form

Consider the following form: <form method="get" action=""> <select name="name"> <option value="a">a</option> <option value="b">b</option> </select> <select name="location"> <opt ...