angular - 如何使用 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);

应用程序组件.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 {}