SystemJSを使用してAngular 2のアプリケーションモジュールをインポートする

Question

私はSystemJSを使用して、TypescriptのAngular 2プロジェクトで作業しています。今私は多くの場合、特定のコンポーネントにどの程度深くネストされているかに応じて、他のモジュールからコンポーネントをロードするために、「../../../」のようなことをしなければならないことがよくあります。 SystemJSのマップ設定を使用すると、その恐ろしい相対的なアプローチなしにアプリケーション全体のモジュールをインポートできるようになりますが、私がそれを行うことができるかどうかは決して判断できません。私はこれを解決するための他の方法も開いています。

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) { 

    } 
} 

私は、以下の設定を試してみましたが、それは動作しません（TSのコンパイルが失敗した）：

基本的に私が何をしたいのですが、何がこのようなものです。

(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コンパイラを設定できます。 tsconfig.jsonに追加：

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

次に、絶対パスとしてapp rootを使用できます。

import {SecureHttpClient} from 'app/mySecurityModule'; 

代わりのような何か：

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

実際のパスはあなたのために異なる場合があります。

ただし、いくつかのツール（AoT、CLI）でこれに問題が発生する可能性があるため、エディタのインポート拡張機能（たとえば、VSCodeの場合はAutoImport）を使用することをお勧めします。うまくいけば、ツールがより成熟するにつれて改善されることを望みます（;