如何找到 nrwl 模块 "Cannot find module" 的原因？

Question

我在我的项目中使用 nrwl.io。

我创建了几个库：

ng g lib rest //ok
ng g lib services //ok
ng g lib models //created ok, but "Cannot find module " later on!

所有这些库都已成功创建，但是当我尝试导入我的 models 库时，我看到错误“找不到模块”：

import { ModelA, ModelB } from '@myproj/models'; //Cannot find module '@myproj/models'

问题是：如何以及在哪里可以检查我的 '@myproj/models' 是否已正确注册？

P.S. 我可以在 nx.json、angular.json 和 tsconfig.json 中看到 "models" 模块。而且我看不出和其他模块有什么区别。

P.P.S. 我用 "@nrwl/nx": "6.1.0" 和 "@nrwl/schematics": "6.1.0"

Answer 1

这是创建库时使用 --parent-module=apps/myapp/src/app/app.module.ts 的地方。

flag 所做的一件事是修改 tsconfig.app.json 并将 "../../libs/mylib/src/index.ts 添加到 include 中，告诉 TS 使用该模块。

Answer 2

当您使用@model/something 导入某些内容时，编辑器会自动添加模块的完整路径（在我的例子中）。所以这就是我必须做的才能让导入“@”工作。

删除编辑器添加全路径导入。只保留你正在输入的那个——即；用@project/models.
关闭服务器并再次运行。

Answer 3

我也遇到了同样的问题。创建了一个库并尝试在多个项目中使用它。首先确保您的库已添加到 main tsconfig.json -> paths 属性.

"paths": {
  "@projectName/LibraryName1": ["libs/LibraryName1/src/index.ts"],
  "@projectName/LibraryName2": ["libs/LibraryName2/src/index.ts"],
  ....
}

那么您必须将您的项目添加到主 angular.json 文件中。

"projects": {
   "LibraryName1": {
   "root": "libs/LibraryName1",
   "sourceRoot": "libs/LibraryName1/src",
   "projectType": "library",
   "prefix": "projectName",
   "projectType": "library"
   ...
  }
}

然后显然检查 tsconfig.json 文件以查找您要在其中使用 lib 的应用程序。关键是删除路径属性。因为您已经在 main tsconfig.json 中添加了（在我的例子中，我使用了 nrwl（一种管理多个应用程序的技术））。

现在您应该能够像这样引用您的任何 lib 项目：

import { class1,class2 } from '@projectName/libraryName1';

不要忘记像这样使用 index.ts 导出您的类（假设您有模型库）：

export * from './lib/class1';
export * from './lib/class2';

或者如果您有任何包含组件的 UI 库。您应该创建一个模块，在其中添加这些组件，然后使用 index.ts 导出它模块文件应该在 lib 文件夹中。例如

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NumberOnlyDirective } from './directives/number-only.directive';

@NgModule({
imports: [CommonModule],
declarations: [NumberOnlyDirective],
exports: [NumberOnlyDirective]
})
export class UiModule {}

index.ts UI 库的文件

export * from './lib/ui.module';

在您的项目中添加 UI 模块的引用 app.module.ts

import { UiModule } from '@projectName/LibraryName1';

也在进口中

 imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
NgxPaginationModule,
Ng2OrderModule,
Ng2SearchPipeModule,
AngularEditorModule,
RichTextEditorAllModule,
NgxPrintModule,
DevExpressModule,
UiModule
...
],

Answer 4

我也遇到了这个问题

假设项目名为 "project1"，库名为 "libray1"（因此我们尝试引用模块“@project1/library1”）。引用 NRWL NX 生成的库模块在非 Angular（在我的特定情况下 Ionic/Angular）上下文中工作正常，但导致来自 monorepo 中的 Angular 应用程序的 "Cannot find module" 错误。

出现问题是因为 Angular 应用程序正在寻找位置 "project1/libs/library1" 中的桶文件 (index.ts)，而 NX 将桶向下一层放置在 [=25] =].

（有点烦人的）解决方案是在 "project1/libs/library1" 位置创建一个额外的 index.ts 文件，内容如下：

export * from './src';

这确保了代码适用于所有上下文，并且是一个一次性解决方案（对于您生成的每个新库），而不是必须添加对每个 package.json 文件的明确引用 Angular repo 中的应用程序。

Answer 5

就我而言，这是因为我很笨，没有在 VS Code 中重启我的 TypeScript 服务器：

CMD / CTRL + SHIFT + P
>TypeScript: Restart TS Server

Answer 6

我在尝试创建新库时遇到了同样的问题。我删除了 node_modules 并重新安装了它。修复了问题

Answer 7

如果有人遇到此问题并且提到的解决方案没有帮助，请按以下方式解决。

一段时间后我意识到我可以在其他地方正常导入，只有我尝试的应用程序有问题
这让我检查 tsconfig 应用
发现我在tsconfig中设置了baseUrl: true，导致导入无法解析的原因

TLDR：从 tsconfig 中删除 baseUrl 设置。

如何找到 nrwl 模块 "Cannot find module" 的原因？

How to find the reason of "Cannot find module" for nrwl modules?

javascript

angular

typescript

nrwl