ngrx store selector failing on app import from custom library

Question

I have an angular library with store implementation and this library is packaged as a NPM and used in different angular application.

I'm trying to use a ngrx store selector which was exported in the library in my different angular project and the application throws an error.

Module not found: Error: Can't resolve '@lib/core-lib/lib/core-store/store/account/account.selector' in 'C:\workspace\Client\AngularApp\src\app\app.component'

Angular Library Implementation:

import { createSelector } from '@ngrx/store';
import { ILibState } from '../../lib.state';
import { IAccountState } from './account.state';

const selectAccounts = (state: IAppState) => state.accounts;

export const selectSelectedAccount = createSelector(
  selectAccounts,
  (state: IAccountState) => state?.selectedAccount
);

exported this selector from the public_api.ts

export * from './lib/core-store/store/account/account.selector'
// Also tried this
// export { selectSelectedAccount } from './lib/core-store/store/account/account.selector'
// Also tried the barrel approach
// export * from './lib/core-store/store/account/index'

AngularApp Usage

app.component.ts

import { ILibState } from '@lib/core-lib/lib/core-store/lib.state';
import { select, Store } from '@ngrx/store';
import { takeUntil } from 'rxjs/operators';
import { selectSelectedAccount } from '@lib/core-lib/lib/core-store/store/account/account.selector';

this._store
  .pipe(select(selectSelectedAccount), takeUntil(this.destroy$))
  .subscribe((res) => {
    if (res && this.selectedAccountCode !== res) {
      this.selectedAccountCode = res.account;
    }
  });

Angular Library works fine without any issue and getting this piece of selector into my angular application is giving me error on compilation.

I tried to provide as much detail as possible and let me know if I need to add anything else.

Any answer on this is much appreciated

Smithereens

Answer 1

Without some background on your folder structure and configuration it's going to be hard but let's stick to the error

Module not found: Error: Can't resolve '@lib/core-lib/lib/core-store/store/account/account.selector' in 'C:\workspace\Client\AngularApp\src\app\app.component'

This means that it can not find the file @lib/core-lib/lib/core-store/store/account/account.selector.ts which you intend to import

I suggest you first check the path is correct.

Besides that, there are a couple things I think you should double check:

• Why are you using the alias @lib if you said this library is in an npm package?
• Why are you doing deep imports if you exported those functionalities from public_api.ts?

Prominence

1) I'm using the alias @lib because that is how I have npm registered to download and install from my company's artifactory. 2) I tried the regular imports(using just @lib/core-lib) which didn't work and deep imports were suggested by my VS Code. – Smithereens

@Smithereens The error was saying that it couldn't find the file, yet your VS Code suggested that path? It looks like something in your configuration must be really odd. I suggest you first try to import it without the alias. To further help you could you upload the files: angular.json, tsconfig.json, and tsconfig.base.json (in case you have those)? Additionally some background on the folder structure of your project would also be helpful. – Prominence