【问题标题】:ngrx store selector failing on app import from custom library从自定义库导入应用程序时,ngrx 商店选择器失败
【发布时间】:2021-01-30 18:56:23
【问题描述】:

我有一个带有商店实现的角度库,这个库被打包为 NPM 并用于不同的角度应用程序。

我正在尝试使用在我的不同 Angular 项目的库中导出的 ngrx 存储选择器,并且应用程序抛出错误。

找不到模块:错误:无法解决 '@lib/core-lib/lib/core-store/store/account/account.selector' 在 'C:\workspace\Client\AngularApp\src\app\app.component'

Angular 库实现:

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
);

从 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 用法

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 库可以正常工作,没有任何问题,将这块选择器放入我的 Angular 应用程序会导致编译出错。

我尝试提供尽可能多的细节,如果我需要添加任何其他内容,请告诉我。

非常感谢您对此的任何回答

【问题讨论】:

    标签: angular ngrx ngrx-store angular-library ng-packagr


    【解决方案1】:

    如果你的文件夹结构和配置没有一些背景知识,这会很困难,但让我们坚持错误

    找不到模块:错误:无法解析 'C:\workspace\Client\AngularApp\src\app\ 中的 '@lib/core-lib/lib/core-store/store/account/account.selector' app.component'

    这意味着它找不到您要导入的文件@lib/core-lib/lib/core-store/store/account/account.selector.ts

    建议你先检查路径是否正确。

    除此之外,我认为您应该仔细检查几件事:

    • 如果你说这个库在 npm 包中,为什么还要使用别名 @lib?
    • 如果您从 public_api.ts 导出这些功能,为什么还要进行深度导入?

    【讨论】:

    • 1) 我使用别名 @lib,因为这就是我注册 npm 以从我公司的工件下载和安装的方式。 2)我尝试了常规导入(仅使用 @lib/core-lib),但我的 VS Code 建议使用深度导入。
    • @imPK 错误是说找不到文件,但是您的 VS Code 建议了该路径?看起来您的配置中的某些东西一定很奇怪。我建议您首先尝试在没有别名的情况下导入它。为了进一步帮助您上传文件:angular.json、tsconfig.json 和 tsconfig.base.json(如果您有这些文件)?此外,您的项目文件夹结构的一些背景知识也会有所帮助。
    猜你喜欢
    • 2018-03-25
    • 2013-11-14
    • 2014-07-08
    • 1970-01-01
    • 1970-01-01
    • 2019-08-18
    • 2018-04-19
    • 2020-02-17
    • 2021-01-20
    相关资源
    最近更新 更多