如何使用 systemjs 在 angular 2 中使用 require()？

Question

我正在尝试在我的组件中使用模板的相对路径来使用 systemjs。（我之所以要用相对路径是因为ng-xi18n目前不能处理绝对路径。）我不想用这个

moduleId: __moduleName

方法而是类似于：

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

首先 tsc 标记了一个 require is not defined 错误并且经过一些研究后，我发现有人可以包含 @types/node 的依赖项以使用 require 函数。

现在我这样做了，tsc 编译没有错误，但是如果我在浏览器中打开应用程序，它会显示错误：

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

由于我找不到解决办法，所以希望有人能帮助疯狂的angular2新手解决这个问题。

提前致谢！！

以下是我的应用程序中的一些代码片段。

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

如何使用 systemjs 在 angular 2 中使用 require()？

How can I use require() in angular 2 using systemjs?

systemjs

angular