Búsqueda de sitios web

javascript - ¿Cómo encontrar la razón de "Cannot find module" para los módulos nrwl?

Uso nrwl.io en mi proyecto.

Creé varias bibliotecas:

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

Todas estas bibliotecas se crearon correctamente, pero cuando intento importar mi biblioteca models veo el error "No se puede encontrar el módulo":

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

La pregunta es: ¿Cómo y dónde puedo verificar si mi '@myproj/models' fue registrado correctamente?

P.D. Puedo ver el módulo "models" en nx.json, angular.json y tsconfig.json. Y no puedo ver ninguna diferencia con otros módulos.

P.D.P.S. Uso "@nrwl/nx": "6.1.0" y "@nrwl/schematics": "6.1.0"

Respuesta #1

En mi caso fue porque era tonto y no reinicié mi servidor de TypeScript en VS Code:

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

Respuesta #2

También tuve el mismo problema. Creé una biblioteca y traté de usarla en varios proyectos. Primero asegúrate de que tu biblioteca esté añadida en el tsconfig.json principal -> propiedad paths.

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

Entonces debes tener tu proyecto agregado en tu archivo angular.json principal.

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

Luego, obviamente, verifica el archivo tsconfig.json de esa aplicación en la que vas a usar la biblioteca. La clave es eliminar la propiedad paths. Porque ya la agregaste en el tsconfig.json principal (en mi caso, usé nrwl (una técnica para gestionar múltiples aplicaciones)).

Ahora deberías poder referenciar cualquiera de tus proyectos de biblioteca así:

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

No olvides exportar tus clases (suponiendo que tengas una biblioteca de modelos) usando index.ts de la siguiente manera:

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

O si tienes alguna biblioteca de IU que tenga componentes. Deberías crear un módulo, agregar esos componentes en él y luego exportarlo usando index.ts. El archivo del módulo debería estar en la carpeta lib. p.ej.

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

archivo index.ts para la biblioteca de UI

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

Agrega la referencia del módulo de UI en tu proyecto app.module.ts

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

también en importaciones

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

Artículos relacionados