如何在使用systemjs的角度2中使用require（）？

Question

我正在嘗試在我的組件中使用相對路徑來使用systemjs。 （我爲什麼要使用相對路徑的原因是，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.

相反，你可以使用SystemJS text plugin導入任何文本文件在ES6風格。因此，該組件是這樣的：

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

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