如何查找 nrwl 模块的“找不到模块”的原因？答案

【问题标题】：How to find the reason of "Cannot find module" for nrwl modules?如何查找 nrwl 模块的“找不到模块”的原因？
【发布时间】：2019-02-05 03:19:20
【问题描述】：

我在我的项目中使用 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 中看到“模型”模块。而且我看不出与其他模块有什么区别。

附言我使用"@nrwl/nx": "6.1.0"和"@nrwl/schematics": "6.1.0"

【问题讨论】：

您可以尝试将--traceResolution 选项转换为tsc，尽管这不会告诉您Angular 特定的模块解析行为（如果有的话）（我不熟悉）。
你找到解决办法了吗？
@SCRATK 我现在不记得了，但我想没有。我只是从头开始重新构建项目并且它可以工作

标签： javascript angular typescript nrwl

【解决方案1】：

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

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

【讨论】：

谁知道这也需要lol。谢谢你的回答。
我觉得这个答案应该是公认的，这个答案帮我解决了问题。
谢谢，遇到同样的问题...

【解决方案2】：

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

"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 {}

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
...
],

【讨论】：

为了避免我刚刚经历的痛苦：如果一切正常，请尝试重新启动 VS Code。就我而言，这就是所有需要的。
@PatrickMichaelsen 在检查了我的所有设置并调整了所有内容之后，感谢您的评论，我不再浪费时间了。

【解决方案3】：

我也遇到过这个问题。

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

出现问题是因为 Angular 应用程序在“project1/libs/library1”位置寻找桶文件 (index.ts)，而 NX 将桶放在“project1/libs/library1/src”中.

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

export * from './src';

这可确保代码在所有上下文中都有效，并且是一次修复解决方案（对于您生成的每个新库），而不是必须在 repo 中添加对每个 Angular 应用程序的 package.json 文件的显式引用.

【讨论】：

你是奥林匹斯山的启蒙者。谢谢！

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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

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

【讨论】：