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'是否已正确注册？

PS 。我可以在nx.json，angular.json和tsconfig.json中看到“模型”模块。我看不出其他模块有什么区别。

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

Answer 1

在我的情况下，这是因为我很笨并且没有在VS Code中重新启动TypeScript服务器：

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

Answer 2

我也遇到了这个问题。

假定项目名为“ 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';

这可确保代码可在所有上下文中使用，并且是一次修复的解决方案（针对您生成的每个新库），而不必在仓库中为每个Angular应用的package.json文件添加明示引用

Answer 3

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

该标志要做的一件事是修改tsconfig.app.json并将"../../libs/mylib/src/index.ts添加到包含内容中，以告知TS使用该模块。

Answer 4

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

<input aria-invalid="true" class="MuiInputBase-input MuiInput-input"
id="bankAccount.iban" name="bankAccount.iban" required="" type="text"
value="FI2112345600000788" aria-describedby="bankAccount.iban-helper-text">

然后，您必须将项目添加到主angular.json文件中。

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

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

现在，您应该可以像这样引用任何lib项目：

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

别忘了使用index.ts导出类（假设您有模型库）：

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

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

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

UI库的index.ts文件

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

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

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

在进口方面

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

Answer 5

当您使用@ model / something导入某些内容时，编辑器将自动为模块添加完整路径（在我的情况下）。因此，这就是我要执行导入'@'的工作。

删除编辑器，添加完整路径导入。仅保留您要键入的内容-即； @ project / models。
关闭服务器，然后再次提供服务。

如何为nrwl模块找到“找不到模块”的原因？

5 个答案: