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

Stop allowing special characters in Ajax requests (HTTP)

$.ajax({ url: '/pos/' + myVar type: 'GET', success: function(data) {} .. I have a variable called myVar with a value of "a-b". However, the value may sometimes be represented as "a->b", causin ...

Utilizing the multer Express middleware in a standalone file

I successfully moved a basic middleware (isAuthenticated) to an external file, but I'm facing challenges transferring my multer upload. Although I recently learned how to separate them into different files, this task seems more complex. routes/index. ...

WebpackError: The global object "document" could not be found

I am encountering an issue with my website build using gatsby.js and bulma. While building the site, I receive the following error message: WebpackError: document is not defined The only instance where I use document is for the navbar-burger toggle code ...

Show the Form Data in a Stylish Bootstrap Popup

Our website's homepage features a basic form that sends its results to a page named Results.aspx. Instead of displaying the form results on the same page, I want them to appear in a new modal window. How can this be done? Just to summarize, the form ...

I am currently having issues with the mustache syntax in vuejs, as it is not functioning properly

Having an issue with Vue.js where the mustache syntax isn't working properly. <!DOCTYPE html> <html> <head> <title>index</title> <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cg ...

Cancellation of event by keypress handler

I found this code snippet: jQuery('#parent').on('keypress', '.textbox', function(e) { var btn = jQuery(this).closest('tr').find('.btn'); if (btn.length) { btn.triggerHandler('click&apo ...

JavaScript library designed for efficient asynchronous communication with servers

Looking for a lightweight JS library to handle AJAX cleanly and simplify basic DOM selections on our website (www.rosasecta.com). Currently, we're manually coding a lot of Ajax functionality which is not only ugly but also difficult to manage. We&apos ...

How you can fix the issue of the "Element not visible" error occurring specifically for one element within the popup

Error Message: "Element Not Visible" when Script Reaches Last Element Despite all attributes being in the same form, an error occurs when the script reaches the last element and displays "element not visible." All elements are enclosed in div tags on the ...

Node.js is known for automatically adding double quotes to strings. However, is there a way to eliminate them?

After creating a unit test, I noticed that both logics I used led to the same issue. Logic 1: describe('aresFileCopier', () => { test('log error', async () => { await registerDB('ares-test', { client: ' ...

Is there a way to simulate pressing a keyboard button using jQuery?

Below is the code snippet: $("input").on({ keydown: function(ev) { if (ev.which === 27){ // esc button backspace_emolator(); } else if (ev.which === 8){ // backspace button console.log('backspace button ...

Transmitting Filter Choices as an Object for Retrieving Multiple Values within an Angular Application

In my Angular application, I have a function that takes user selections for various filter types and sends a request to the API to retrieve filtered data based on those selections. Each filter type returns values in an array format, allowing users to selec ...

Oops! There seems to be an issue: "ERROR TypeError: Unable to access the 'getMonth' property of

I have integrated a date-timepicker into my reactive form on Angular 6/7 without applying a form-control to it. I am using an angular2 datetimepicker - import { AngularDateTimePickerModule } from 'angular2-datetimepicker'. However, I'm enco ...

Unable to locate module '.next/server/font-manifest.json'

I'm encountering a frustrating issue while attempting to deploy my nextjs app with server rendering. The app was created using Azure Pipelines and then uploaded to a production server that runs on a Linux operating system. Below is the configuration ...

Issue: app.database function is not recognized with Firebase

I'm attempting to integrate Firebase realtime database into my Vue application, but I keep encountering the following error: TypeError: app.database is not a function This is what my code looks like: File: Firebase.js var firebase = require(' ...

A guide to extracting attribute values from HTML using Angular 4

I am currently working on an Angular 4 project where I needed to implement drag and drop functionality. To achieve this, I utilized the ng2-dragula plugin. Now, I have a new requirement which involves extracting the data-id attribute from each row after it ...

Guide to modifying the column color in Chart.js

Link to my codepen project: Check it out here let ctx = document.getElementById('myChart').getContext('2d'); let chart = new Chart(ctx, { // Type of chart being created type: 'bar', // Data for the dataset data: { ...

Selectize Fails to Populate Options Using Ajax

ExpressJS is the platform I am using to develop a management dashboard for a community project. Right now, my main concern is integrating a modal that allows users to add new games to a database. Although I am able to fetch data remotely, I am facing diffi ...

Using XMLHttpRequest with gzip compression

Utilizing the request module in node.js makes it simple to create a request that can retrieve and correctly decompress compressed data from the source: var request = require('request'); var requestOptions = { url: 'http://whatever.com/g ...

Issues with NgRx testing - NullInjectorError: Service provider not found

When attempting to write unit tests for effects, I encountered the error NullInjectorError: No provider for StationsListService!. The code in my stations.effects.ts file looks like this: @Injectable() export class StationsListEffects { constructor(priva ...

Is there a way to eliminate the static keyword from a URL?

I am currently working on a flask(backend)-angular(frontend) application. To compile the angular application, I use the following command: ng build --configuration production --base-href "" The compiled files are stored in the "static" directory ...