システム2を使用して角度2でrequire（）を使用するにはどうすればよいですか？

Question

私は自分のコンポーネントのテンプレートに相対パスを使用してsystemjを使用しようとしています。 （私は相対パスを使用したい理由は、NG-xi18nは、現時点では絶対パスに対処することはできません。）私のようなこの

moduleId: __moduleName 

アプローチではなく、何かを使用したくない：

を

templateUrl: require('../templates/app.html') 

まずTSCが必要ですが、私は誰かが必要機能を使用するには、@タイプ/ノードの依存関係を含むことができることが分かった少し研究した後に定義されており、 されていないエラーをマーク。

は今、私はこれをしなかったことを、TSCは、エラーなしでコンパイルが、私は、ブラウザでアプリを開いた場合はエラーを示しています

__zone_symbol__error : Error: (SystemJS) require is not a function TypeError: require is not a function at execute

私は誰かがすることを願って、このための解決策を見つけることができませんので、この問題を解決するために、狂った角度の初心者を助けてください。

ありがとうございます！

ここに、私のアプリからのいくつかのコードスニペットがあります。

package.json：

{ 
    "name": "test", 
    "version": "0.0.1", 
    "scripts": { 
    "start": "concurrently \"npm run tsc:w\" \"gulp serve\" ", 
    "tsc": "tsc", 
    "tsc:w": "tsc -w", 
    "typings": "typings", 
    "postinstall": "typings install", 
    "i18n": "ng-xi18n -p ./tsconfig.json" 
    }, 
    "dependencies": { 
    "@angular/common": "~2.4.6", 
    "@angular/compiler": "~2.4.6", 
    "@angular/compiler-cli": "^2.4.6", 
    "@angular/core": "~2.4.6", 
    "@angular/forms": "~2.4.6", 
    "@angular/http": "~2.4.6", 
    "@angular/platform-browser": "~2.4.6", 
    "@angular/platform-browser-dynamic": "~2.4.6", 
    "@angular/platform-server": "^2.4.6", 
    "@angular/router": "~3.4.6", 
    "angular-in-memory-web-api": "~0.2.4", 
    "core-js": "^2.4.1", 
    "es6-shim": "^0.35.1", 
    "rxjs": "5.0.1", 
    "systemjs": "0.19.41", 
    "zone.js": "^0.7.4" 
    }, 
    "devDependencies": { 
    "concurrently": "^3.1.0", 
    "lite-server": "^2.2.2", 
    "typescript": "^2.0.10", 
    "typings": "^1.2.0", 
    "gulp": "3.9.1", 
    "gulp-connect": "3.2.1", 
    "http-proxy-middleware": "0.13.0", 
    "@types/node": "^7.0.0" 
    } 
} 

tsconfig.json：

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "system", 
    "moduleResolution": "node", 
    "outDir": "app/js", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false, 
    "types": ["node"] 
    }, 
    "exclude": [ 
    "node_modules", 
    "typings/main", 
    "typings/main.d.ts" 
    ] 
} 

systemjs.config.js：

(function (global) { 
    System.config({ 
     defaultJSExtension: true, 
     paths: { 
      'npm:': 'node_modules/' 
     }, 
     map: { 
      app: 'app', 

      '@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', 

      'rxjs': 'npm:rxjs', 
      'angular-in-memory-web-api':'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' 
     }, 

     packages: { 
      app: { 
       main: './main.js', 
       defaultExtension: 'js' 
      }, 
      rxjs: { 
       defaultExtension: 'js' 
      } 
     } 
    }); 
})(this); 

app.component.ts：

import {Component} from '@angular/core'; 
import { LoginService } from '../services/login.service'; 
import { UserStatus } from '../models/userStatus'; 
import {SessionService} from "../services/session.service"; 
import {UserService} from "../services/user.service"; 
import {Router} from '@angular/router'; 

@Component({ 
    selector: 'main-app', 
    template: require('../templates/app.html') 

}) 

export class AppComponent { 

} 

Answer 1

According to the SystemJS author：

A require statement is not defined to work inside ES modules, globals or System.register in SystemJS, as that is something specifically for the CommonJS module format.

代わりに、あなたはES6スタイルで任意のテキストファイルをインポートするSystemJS text pluginを使用することができます。だから、コンポーネントは次のようになります。

import { Component } from '@angular/core'; 
import template from '../templates/app.html!text'; 

@Component({ 
    selector: 'main-app', 
    template: template 
}) 
export class AppComponent {}