Importazione di moduli da strutture di directory profondamente annidate

Question

L'importazione di un modulo che non si trova all'interno o intorno alla stessa cartella è piuttosto fastidioso. Devi continuare a contare il '../'. Come nell'esempio seguente:

import {AnswersService, AddAnswerModel, Answer} from '../../../../../../../BackendServices/AnswersService'; 

Modificando il mio System.config al seguente esempio, posso andare in giro con tutti questi '../' e il codice funziona perfettamente sul browser.

System.config({ 
     packages: { 
      'app': { defaultExtension: 'js' }, 
      'rxjs': { defaultExtension: 'js' } 
     }, 
     paths: { 
      'rxjs/*': 'node_modules/rxjs/*', 
      'BackendServices/*': 'app/BackendServices/*' 
     } 
    }); 

Riduce la dichiarazione di importazione al comando gestibile di seguito.

import {AnswersService, AddAnswerModel, Answer} from 'BackendServices/AnswersService'; 

Ma il problema con questo approccio è che perdo Intellisense in Visual Studio Code. Non sono sicuro che si tratti di un problema di dattiloscritto, di un problema di codice dello studio visivo o di qualcos'altro.

Qualcuno sa come farlo funzionare senza perdere intellisense?

Answer 1

Visual Studio è in grado di risolvere solo percorsi e moduli relativi situati in node_modules come angular2/* o rxjs/*.

È il modulo predefinito TypeResolution (nodo) .. è possibile modificarlo in tsconfig.json con 'classic' .. ma VS Code non riconoscerà più i moduli nodo.

Il problema è discusso in questo biglietto https://github.com/Microsoft/TypeScript/issues/5039

Ci sono molte proposte .. ma nulla è stato ancora implementato.

Answer 2

È possibile utilizzare percorsi relativi. Date un'occhiata a l'esempio: https://github.com/angular/angular/tree/master/modules/playground/src/relative_assets

Answer 3

È possibile copiare un modello che viene implementato dal angular-cli esportando tutti i componenti che si desidera disponibili altrove attraverso un index.ts a livello di directory. In questo modo puoi esporre componenti nidificati a un livello superiore.

Ecco un esempio:

parent 
├── child 
│   ├── child.component.ts 
│   └── index.ts 
├── parent.component.ts 
└── index.ts 

All'interno child/index.ts semplicemente esportare componenti rilevanti.

export { ChildComponent } from './child.component'; 

Quindi parent/index.ts può continuare la catena di esportazione.

export { ParentComponent } from './parent.component'; 
export { ChildComponent } from './child'; 

NOTA: Si noti come quanto sopra non fa riferimento a file child.component, ma il childdirectory invece!

child l'indice index.ts visualizza queste componenti tramite le esportazioni in index.ts. Questo può essere fatto per quanto profondamente nidificati sono i tuoi componenti.

Infine, se un altro componente esterno a parent/ volesse consumare qualcosa all'interno di parent/, è possibile fare riferimento facilmente al livello più alto.

import { ParentComponent, ChildComponent } from './parent';