Relative Pfade für SystemJS- und ES-Modulimporte

Question

Ich habe ein Problem beim Importieren von Angular2-Komponenten, wenn Sie die SystemJS- und ES-Import-Syntax verwenden.

Projektstruktur:

ROOT 
|_src 
    |_client 
    |_app 
     |_frameworks 
     |_il8n 
     |_analytics 
     |_main 
     |_components 
     |_pages 
     |_utility 

Sagen wir, ich habe eine Datei: ROOT/src/client/app/frameworks/il8n/language-service.ts und eine andere Datei: ROOT/src/client/app/main/pages/login/login.ts. In login.ts Ich möchte language.ts importieren, so eine Art und Weise zu tun, ist in etwa so:

//login.ts import { LanguageService } from '../../../../frameworks/il8n/language-service';

Eine andere Möglichkeit, das zu tun, mit Fässern, ist etwa so:

//login.ts import { LanguageService } from '../../../../frameworks/index';

wo frameworks/index.ts ist export * from './il8n/language-service';

tun will ich nicht ../../../ etc jedes Mal, wenn ich etwas importieren müssen tun; es wäre schön, wenn ich nur tun konnte import { LanguageService } from 'frameworks';

Bisher habe ich meine Build-Prozess erhalten konnten zu arbeiten SystemJS des "map" option wie so mit:

map: { 
     frameworks: 'src/client/app/frameworks/index', 
     components: 'src/client/app/main/components/index', 
     pages: 'src/client/app/main/pages/index' 
    } 

jedoch meine IDE beschwert (alle IntelliSense Funktionalität ist komplett gebrochen) jederzeit ich so etwas wie:

`import { LanguageService } from 'frameworks';` 

Hier ist meine tsconfig.json Datei:

{ 
    "compilerOptions": { 
     "target": "es5", 
     "module": "commonjs", 
     "declaration": false, 
     "removeComments": true, 
     "noLib": false, 
     "emitDecoratorMetadata": true, 
     "experimentalDecorators": true, 
     "sourceMap": true, 
     "pretty": true, 
     "allowUnreachableCode": false, 
     "allowUnusedLabels": false, 
     "noImplicitAny": true, 
     "noImplicitReturns": true, 
     "noImplicitUseStrict": false, 
     "noFallthroughCasesInSwitch": true, 
     "baseUrl": "./src", 
     "paths": { 
      "frameworks": ["client/app/frameworks"], 
      "components": ["client/app/main/components"], 
      "pages": ["client/app/main/pages"], 
      "utility": ["client/app/main/utility"] 
     } 
    }, 
    "compileOnSave": false 
} 

Gibt es eine Möglichkeit, sowohl meine IDE und die SystemJS Build-Konfiguration zu erfüllen, so dass ich "einfache" Importe durchführen kann?

Answer 1

Also, diese Frage basiert auf der Angular2 Seed (Advanced) Repo gefunden here. Ich habe dort auch eine issue gepostet (wo Sie die genaue Lösung sehen können). Lange Geschichte kurz:

Sie benötigen TypScript 2.0, um die paths und baseUrl Optionen in Ihrer tsconfig-Datei zu verwenden. Dann in Ihrem SystemJS Config-Datei, müssen Sie einige Konfiguration auf die paths und packages Optionen wie folgt hinzuzufügen:

packages: { 
    ... 
    frameworks: { defaultExtension: js, main: index.js } 
    ... 
}, 
paths: { 
    ... 
    frameworks: 'relative/path/to/frameworks/folder' 
    ... 
} 

index.ts eine Datei in Ihrem frameworks Ordner, die die Module in das Verzeichnis exportiert. Zum Beispiel, wenn Sie eine language.component.ts Datei irgendwo in Ihrem Frameworks-Verzeichnis hätten, würden Sie in der frameworks/index.ts Datei folgendes tun:

export * from 'path/to/language.component';.

Dies ermöglicht es Ihnen, import {LanguageComponent} from 'frameworks'; in Ihrem Projekt zu tun (solange Sie außerhalb des Verzeichnisses frameworks sind).

Hoffe, das hilft!