Importieren von Modulen aus tief verschachtelten Verzeichnisstrukturen

Question

Importieren eines Moduls, das sich nicht in oder um den gleichen Ordner befindet, ist ziemlich ärgerlich. Sie müssen weiterhin die '../' zählen. Wie im Beispiel unten:

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

Durch meine system.config zum Beispiel unten ändern, kann ich um all diese ‚../‘ mit und der Code funktioniert perfekt in Ihrem Browser.

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

Es reduziert die Import-Anweisung auf den verwaltbaren Befehl unten.

Aber das Problem mit diesem Ansatz ist, dass ich Intellisense in Visual Studio Code verliere. Ich bin mir nicht sicher, ob dies ein Schreibmaschinenproblem, ein visuelles Studiocode-Problem oder etwas anderes ist.

Weiß jemand, wie man das funktioniert, ohne Intellisense zu verlieren?

Answer 1

Visual Studio kann nur relative Pfade und Module auflösen, die sich in node_module wie angular2/* oder rxjs/* befinden.

Es ist die TypeScript-Standard moduleResolution (node) .. Sie können es in tsconfig.json mit 'classic' ändern .. aber VS-Code wird nicht mehr Knotenmodule erkennen.

Das Problem wird in diesem Ticket diskutiert https://github.com/Microsoft/TypeScript/issues/5039

Es gibt viele Vorschläge .. aber ist noch nichts umgesetzt.

Answer 2

Sie können relative Pfade verwenden. Werfen Sie einen Blick auf das Beispiel: https://github.com/angular/angular/tree/master/modules/playground/src/relative_assets

Answer 3

Sie können ein Muster kopieren, die von der angular-cli durch den Export jede Komponente implementiert wird Sie an anderer Stelle durch eine index.ts auf Verzeichnisebene verfügbar sein soll. Auf diese Weise können Sie verschachtelte Komponenten auf einer höheren Ebene verfügbar machen.

Hier ist ein Beispiel:

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

Innen child/index.ts einfach relevante Komponenten exportieren.

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

Dann kann parent/index.ts die Exportkette fortsetzen.

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

Hinweis: Beachten Sie, wie die oben nicht statt child.component Datei, aber das childVerzeichnis verweist!

Die child Verzeichnis index.ts Oberflächen diese Komponenten über die Exporte in index.ts. Dies kann für wie tief verschachtelt Ihre Komponenten sind.

Schließlich, wenn eine andere Komponente außerhalb von parent/ wollte etwas innerhalb von parent/ verbrauchen, könnte es leicht auf der obersten Ebene verwiesen werden.

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