Exploring the Power of Ngrx and Angular Resolver

I am encountering an issue with ngrx and my resolver in Angular. I have identified the problem but cannot find a solution for it. The issue arises when I select an account from my ngrx store and end the observable with take(1). Due to take(1), it always takes the first value. As a result, when I emit a new value, the resolver does not get it. Can anyone provide assistance?

resolve(route: ActivatedRouteSnapshot): Observable<Account> {
    const id = this.getParameter(route, 'accountId');

    if (id) {
      this._store.dispatch(AccountsPageActions.loadAccountWithDetails({ accountId: id }));
      return this._store.select(getAccountDetailById(id)).pipe(
        switchMap(account => this._store.select(getAccountError).pipe(
          map(error => {
            if (error instanceof HttpErrorResponse && error.message.includes(id)) {
              this._utilService.showErrorToast('Zugang nicht gefunden');
              this._router.navigateByUrl('/');
            }
            console.log(account);
            return account
          })
        )),
        skipWhile(account => account?.id !== id),
        take(1)
      );
    }

    return null;
  }

Edit: The problem is that I trigger the resolver in the same route. Example: I open an accordion item --> redirect to /account/{accountId1} and then when I open another accordion item, I need to redirect to /account/{accountId2}. However, the resolver fails to resolve because it does not receive a new value with the new account.

Answer №1

It turned out that the resolver was not the issue for me..

I encountered difficulties with the angular material mat-tab-accordion component.

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

Is it possible to securely embed videos on external websites while also utilizing tokens to safeguard the content?

Protecting our video content on our website is a top priority, which is why we have implemented a system where a token is grabbed through AJAX and verified through PHP before allowing the download of any files. As I delve into providing an embed feature s ...

Extract data from a CSV file and convert it into JSON using Jquery AJAX

I'm currently working on retrieving JSON data from Yahoo's Finance API. $.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20%2a%20from%20yahoo.finance.quotes%20WHERE%20symbol%3D%27WRC%27&format=json&diagnostics=true&env=st ...

Using jQuery on the client-side to interact with a MongoDB database

Currently, I'm in the process of developing a basic example application to gain experience with using MongoDB. My goal is to create a single web page that can interact with a local MongoDB server by adding and removing content dynamically through jQue ...

Retrieving child class prototype from superclass

In my current project, I am working on implementing a base class method that shares the same logic across all child classes. However, I need this method to utilize specific variables from each child class. function A() {} A.prototype.foo = 'bar' ...

Update object properties in Angular controller dynamically

Take a look at my simple plunker Within the code, I am attempting to link a scope variable to an object property. $scope.name = 'World'; var obj = { "name":$scope.name } $scope.$watch('name', function(){ console.log(obj["name"]); ...

Ways to reference a variable within a listener

I want to show a new textbox with 'Step n' each time a button is clicked: https://jsfiddle.net/askhfu7m/1/ var x = 1; $("#323").val("Step 1"); $("#add").click(function (e) { x++; $("#items").append('<div><input type="text ...

What is the best method to extract values from an array?

In my array, I am storing multiple values together such as: var locations = [ 'Bhopal','Mobile',new google.maps.LatLng(18.40,78.81),'images/mobile.png', 'Bangalore','Television',new google.maps.Lat ...

Using npm to trigger the package.json file will activate both the harp and browser-sync applications

I am looking for a way to simultaneously start a harp.js server and run a browser-sync process. This setup works perfectly on Linux with the following package.json configuration: { "scripts": { "dev": "bash ./serve.sh" } } Here is the content of ...

The ID Token could not be verified due to an invalid jwt.split function

I'm currently working on validating a Google ID Token on my Node.js server. Unfortunately, I've encountered the following error: The ID Token cannot be verified: jwt.split is not a function For reference, here is the link to the code that I am ...

Generating a list of objects from MongoDB using Node.js

Hello everyone, I am currently learning about mongodb and node js for the first time, so please bear with me if my question is too basic. I am working with a schema that looks like this: var mongoose = require('mongoose'); var CatSchema = new m ...

How can we best understand the concept of custom directives using the link method?

As a beginner in AngularJS, I am looking to implement an autocomplete feature for text input. My JSON data is stored in JavaScript and I need help simplifying the process. Can you provide me with a straightforward solution? The specific requirement is to ...

AngularJS not compatible with Angular Material

Visit this link for more details Encountering an error while using angular-material: Uncaught Error: [$injector:unpr] here's the error message$injector/unpr?p0=%24%24forceReflowProvid…eQueue%20%3C-%20%24animate%20%3C-%20%24compile%20%3C-%20%24%24an ...

Troubleshooting: Issue with Angular 2 bidirectional data binding on two input fields

Hi there, I am encountering an issue with the following code snippet: <input type="radio" value="{{commencementDate.value}}" id="bankCommencementDateSelect" formControlName="bankCommencementDate"> <input #commencementDate id="bankCommencementDat ...

Subscribing to ngrx store triggers multiple emissions

Currently, I have an app with a ngrx store set up. I am experiencing an issue where, upon clicking a button, the function that fetches data from the store returns multiple copies of the data. Upon subsequent clicks, the number of returned copies grows expo ...

How to make a routerLink clickable within an anchor tag in Angular 6

I am facing a peculiar issue with a group of hyperlinks. html <div class="col-12 navlinks"> <div class="text-center"> <div class="justify-content-center"> <a class="col-auto d-inline-block whitelink" rou ...

Do using an IIFE (Immediately-Invoked Function Expression) and using curly braces provide different outcomes?

(function() { let number = 10; console.log(number); // 10 })() // executed right away console.log(number); // this will throw an error: number is not defined VS { let number = 10; console.log(number); //10 } // immediately invoked console.lo ...

Angular 7's Singleton Service Feature

My service setup looks like this: export abstract class ILoggingService { // abstract functions here } export class LoggingService implements ILoggingService { // service implementation } export class MockLoggingService implements ILoggingServic ...

Attempting to reposition a button through JavaScript functions

Need help with a school project: When the user clicks the initial login button, it should be removed and replaced by a new button that descends 100 pixels over a 2-second period. I'm looking for a more efficient way to achieve this, any assistance wou ...

Caught up: TypeScript not catching errors inside Promises

Currently, I am in the process of developing a SPFx WebPart using TypeScript. Within my code, there is a function dedicated to retrieving a team based on its name (the get() method also returns a promise): public getTeamChannelByName(teamId: string, cha ...

Remove div blocks in a Django template when scrolling

How can I dynamically remove div blocks in django templates (queryset) as soon as they are out of the browser's field of view while scrolling? For example, delete blocks from the top when scrolling down and delete blocks from the bottom when scrolling ...