SystemJS를 사용하여 Angular 2의 응용 프로그램 모듈 가져 오기

Question

SystemJS를 사용하여 Typescript 프로젝트의 Angular 2에서 작업하고 있습니다. 지금 우리는 주어진 컴포넌트에 얼마나 깊이 중첩되어 있는지에 따라 다른 모듈에서 컴포넌트를로드하기 위해 '../../../'과 같은 일을해야하는 경우가 종종 있습니다. SystemJS의 맵 설정을 사용하면 응용 프로그램 수준의 모듈을 끔찍한 상대 경로 지정 방법없이 가져올 수 있지만, 그렇게 할 수있는 경우에는 결정할 수 없습니다. 나는 이것을 해결하는 다른 방법들에 대해서도 열려있다. (TS 컴파일이 실패)

import {Component} from '@angular/core'; 
import {SecureHttpClient} from 'mySecurityModule'; //No ../../../ 

@Component({ 
    moduleId: module.id, 
    selector: 'my-selector', 
    templateUrl: 'my.component.html' 
}) 
export class MyComponent { 

    constructor(private client: SecureHttpClient) { 

    } 
} 

나는 아래의 구성을 시도했지만 작동하지 않습니다

기본적으로 내가하고 싶은 것을이 같은 것입니다.

(function (global) { 
    System.config({ 
    paths: { 
     // paths serve as alias 
     'npm:': 'node_modules/' 
    }, 
    // map tells the System loader where to look for things 
    map: { 
     // our app is within the app folder 
     app: 'app', 

     // angular bundles 
     '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
     '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
     '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
     '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
     '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
     '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
     '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
     '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
     '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', 


     // other libraries 
     'rxjs':      'npm:rxjs', 
     'angular-in-memory-web-api': 'npm:angular-in-memory-web-api', 
     '@ng-bootstrap/ng-bootstrap': 'npm:@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js', 

     // Internal Modules 
     'mySecurityModule': 'app/secure/secure.module' 

    }, 
    // packages tells the System loader how to load when no filename and/or no extension 
    packages: { 
     app: { 
     main: './main.js', 
     defaultExtension: 'js' 
     }, 
     rxjs: { 
     defaultExtension: 'js' 
     }, 
     'angular-in-memory-web-api': { 
     main: './index.js', 
     defaultExtension: 'js' 
     } 
    } 
    }); 
})(this); 

나는이 작업을 수행 할 가능성이있는 다른 방법이 알고 있지만, 다시 최종 아무것도 찾을 수 있으며, 그것은 정말 해결하고 싶은 문제입니다. 다시 한 번 감사드립니다!

Answer 1

typescript 컴파일러에서 기본 URL을 사용하고 여기에서 가져 오기를 설정할 수 있습니다. tsconfig.json에 추가 :

"compilerOptions": { 
    "baseUrl": "./", 
    ... 
    } 

다음으로 앱 루트를 절대 경로로 사용할 수 있습니다.

import {SecureHttpClient} from 'app/mySecurityModule'; 

대신 같은 뭔가 :

import {SecureHttpClient} from '../../../mySecurityModule'; 

실제 경로는 다를 수 있습니다.

그러나 일부 도구 (AoT, CLI)에이 문제가있을 수 있으므로 편집기에 가져 오기 확장 (예 : AutoImport, VSCode)을 사용하는 것이 좋습니다. 도구가 더 성숙 해짐에 따라 개선 될 수 있기를 바라지 만 (;