typescript 如何查找nrwl模块“找不到模块”的原因?

rkkpypqq  于 2022-11-18  发布在  TypeScript
关注(0)|答案(8)|浏览(226)

我nrwl.io在项目中使用www.example.com。
我创建了几个库:

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

所有这些库都已成功创建,但当我尝试导入我的models库时,我看到错误“Cannot find module":

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

问题是如何以及在何处检查我的'@myproj/models'是否已正确注册?
**P.S.**我可以在nx.jsonangular.jsontsconfig.json中看到“模型”模块。我可以看到与其他模块没有区别。

我用的是"@nrwl/nx": "6.1.0""@nrwl/schematics": "6.1.0"

cgfeq70w

cgfeq70w1#

在我的情况下,这是因为我是哑巴,并没有重新启动我的TypeScript服务器在VS代码:

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

4ngedf3f2#

我也遇到了同样的问题。创建了一个库,并试图在多个项目中使用它。首先确保你的库被添加到主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的应用程序。关键是删除paths属性。因为你已经在主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 {}

UI库index.ts文件

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

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

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

在进口中还

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

aiqt4smr3#

我也遇到过这个问题。
假设项目名为“project 1”,库名为“libray 1”(因此我们尝试引用模块“@project1/library 1”)。引用NRWL NX生成的库模块在非Angular(在我的特定情况下是Ionic/Angular)上下文中工作正常,但在monorepo中的Angular应用程序中导致“Cannot find module”错误。
出现该问题的原因是Angular应用程序正在“project 1/libs/library 1”位置查找桶文件(index.ts),而NX将桶文件放在“project 1/libs/library 1/src”中的下一级。
解决方案(有点麻烦)是在“project 1/libs/library 1”位置创建一个附加的index.ts文件,其中包含以下内容:

export * from './src';

这确保了代码可以在所有上下文中工作,并且是一次性修复的解决方案(对于您生成的每个新库),而不是必须添加对repo中每个Angular应用程序的package.json文件的explicit引用。

6tr1vspr

6tr1vspr4#

如果有人遇到这种情况,并提到的解决方案没有帮助,这里是我如何修复它。

  • 过了一段时间,我意识到我可以在其他地方导入罚款,只有我正在尝试的应用程序有这个问题
  • 这导致我检查应用程序的tsconfig
  • 我发现我在tsconfig中设置了baseUrl: true,这就是导入无法解析的原因。

TLDR:从tsconfig中删除baseUrl设置。

j5fpnvbx

j5fpnvbx5#

当我试图创建新的lib时也遇到了同样的问题。我删除了node_modules并重新安装了它。修复了这个问题

wf82jlnq

wf82jlnq6#

当你用@model/something导入一些东西时,编辑器会自动添加一个完整的模块路径(在我的例子中)。

  • 删除编辑器添加的完整路径导入。只保留你正在键入的-即;有@个项目/型号。
  • 请关闭服务器并重新开始服务。
o0lyfsai

o0lyfsai7#

这是任何人谁集成了nx到一个现有的monorepo和得到这个错误的答案。
您需要使用类似下面的命令将根tsconfig.base.json添加到应用程序tsconfig.json中

{
...

 "extends": "../../tsconfig.base.json",

....
}
e4yzc0pl

e4yzc0pl8#

这就是创建库时使用--parent-module=apps/myapp/src/app/app.module.ts的原因。
该标志所做的事情之一是修改tsconfig.app.json并将"../../libs/mylib/src/index.ts添加到告知TS使用该模块的包含中。

相关问题