I’m trying to set some state in our NgRx Store for specific pages (I’ll cause these POI – “page of interest”). If not one of those pages, I would like to set the Store to a default value. We have many pages, so I would prefer to have a default route resolver for the root page and have the specialized route resolver for the child POIs. Is this possible?

The problem I’m running into is switching from a POI to a non-POI page should revert the state back to the default.

Here’s a modification of my test case that reproduces the issue:

const ROOT_PATH = 'root';
const PAGE_PATH = `${ROOT_PATH}/page`;

function valueFromStore(): boolean {
  return getFromPage(Store).selectSignal(myValueSelector)();
}

function verifiedNavigate(url: string) {
  get(Router).navigateByUrl(url);
  flush();
}

describe('PermissionsResolver', () => {
  beforeEach(() => {
    bootstrapPageTest({
      routes: [
        {
          path: ROOT_PATH,
          component: PageComponent,
          resolve: {
            'my_resolver': defaultResolver, // sets the store value to false
          },
          children: [
            {
              path: 'page',
              component: PageComponent,
              resolve: {
                'my_resolver': overrideResolver, // sets the store value to true
              },
            },
          ],
        },
      ],
      // omitted extra stuff
    });
  });

  it('sets the store to false when switching to an unsupported page', () => {
    verifiedNavigate(PAGE_PATH);
    expect(valueFromStore()).toBeTrue();

    verifiedNavigate(ROOT_PATH);

    // This expect fails
    expect(valueFromStore()).toBeFalse();
  });
});

When I run the app locally, both resolvers run on the first page load, and then subsequent navigations only trigger the overrideResolver (when navigating to that page). defaultResolver is only run the one time.