我正在尝试使用我的组件中的模板的相对路径来使用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 {}
