SystemJS 및 ES 모듈 가져 오기의 상대 경로

Question

SystemJS 및 ES 가져 오기 구문을 사용할 때 Angular2 구성 요소를 가져 오는 데 문제가 있습니다.

프로젝트 구조 : ROOT/src/client/app/frameworks/il8n/language-service.ts 및 다른 파일 : ROOT/src/client/app/main/pages/login/login.ts

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

이이 전 파일이 있다고 가정 해 봅시다. 내가 language.ts을 가져올 login.ts, 그래서 작업을 수행하는 하나의 방법과 같이이다 :

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

배럴을 사용하여, 같은이며, 그렇게하는 또 다른 방법 :

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

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

을하고있다

나는 ../../../ 등 뭔가를 가져와야 할 때마다 싶지 않아; 난 그냥 할 수 있다면 좋을 것이다 import { LanguageService } from 'frameworks';

지금까지, 나는 SystemJS의 "map" option과 같이 사용하여 작업 내 빌드 프로세스를 얻을 수있었습니다 그러나

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

, 내 IDE가 불평 (모든 인텔리을

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

: 여기

`import { LanguageService } from 'frameworks';` 

내 tsconfig.json 파일입니다 기능이 완전히 언제 내가 그런 짓을) 고장

"간단한"가져 오기를 수행 할 수 있도록 내 IDE와 SystemJS 빌드 구성을 모두 만족시키는 방법이 있습니까?

Answer 1

따라서이 질문은 Angular2 Seed (Advanced) 레고 주위에있는 here을 기반으로합니다. 나는 issue도 거기에 올렸다. (여기서 정확한 픽스를 볼 수있다.) 길게 짧음 :

tsconfig 파일에 paths 및 baseUrl 옵션을 사용하려면 TypeScript 2.0이 필요합니다. 그런 다음 SystemJS config 파일에서, 당신은 다음과 같이 paths 및 packages 옵션 몇 가지 설정을 추가해야합니다

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

index.ts 그 디렉토리에 모듈을 수출하여 frameworks 폴더 안에있는 파일입니다. 예를 들어, 프레임 워크 디렉토리에 language.component.ts 파일이 있고 frameworks/index.ts 파일에있는 경우

export * from 'path/to/language.component';을 입력하면됩니다.

frameworks 디렉토리 밖에있는 경우 프로젝트에서 import {LanguageComponent} from 'frameworks';을 수행 할 수 있습니다.

희망이 도움이됩니다.