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

发布时间：2020-12-17 17:09:03 所属栏目：安全来源：网络整理

导读：我正在尝试使用我的组件中的模板的相对路径来使用systemjs. (我想使用相对路径的原因是,ng-xi18n目前无法处理绝对路径.)我不想用这个 moduleId: __moduleName 方法,但更像是： templateUrl: require('../templates/app.html') 首先,tsc标记了一个不需要定义

我正在尝试使用我的组件中的模板的相对路径来使用systemjs. (我想使用相对路径的原因是,ng-xi18n目前无法处理绝对路径.)我不想用这个

moduleId: __moduleName

方法,但更像是：

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

首先,tsc标记了一个不需要定义的错误
经过一些研究后,我发现有人可以在@ types / node中包含依赖项来使用require函数.

现在我这样做了,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 {

}

解决方法

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!