Javascript 获取错误时使用require在Angular 2中设置templateUrl

在我的组件中，我想使用require设置templateUrl，如下所示：

import {Component} from 'angular2/core';


@Component({
    selector: 'header',
    styleUrls: ['app/header/header.css'],
    templateUrl: require('./hahaha.html')
})
export class HeaderComponent {

  logoUrl: string = '/resources/img/branding.png';


  constructor () {

  }

}

在我的控制台中，我出错了

angular2 polyfills.js:332错误：TypeError:require不是函数 评估时（） 在执行时（）加载错误

我希望能够做到这一点：（我确实知道一个解决办法，但我只想知道更多，如何以其他方式使其工作）

这是我的tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

---

不要使用

require

而是使用文档根目录的相对路径

@Component({
    selector: 'header',
    styleUrls: ['app/header/header.css'],
    templateUrl: 'app/header/hahaha.html'
})

---

不要使用

require

而是使用文档根目录的相对路径

@Component({
    selector: 'header',
    styleUrls: ['app/header/header.css'],
    templateUrl: 'app/header/hahaha.html'
})

---

require（'./hahaha.html'）

的结果将是模板字符串，但

templateUrl

字段需要指向.html模板的路径

解决方案1：如果要继续执行

要求

功能，请使用

模板

字段

示例：

@Component({
  selector: 'header',
  styleUrls: ['app/header/header.css'],
  template: require('./hahaha.html')
})

@Component({
  selector: 'header',
  styleUrls: ['app/header/header.css'],
  templateUrl: './hahaha.html'
})

解决方案2：使用

templateUrl

，但在这种情况下，您必须找到.html模板的路径

示例：

@Component({
  selector: 'header',
  styleUrls: ['app/header/header.css'],
  template: require('./hahaha.html')
})

@Component({
  selector: 'header',
  styleUrls: ['app/header/header.css'],
  templateUrl: './hahaha.html'
})

---

更新：如果使用

templateUrl

，模板加载应该是异步的（AMD），但是如果使用

template

，模板将被内联到javascript

中，

require（'./hahaha.html'）

的结果将是模板字符串，但是

templateUrl

字段需要.html模板的路径

解决方案1：如果要继续执行

要求

功能，请使用

模板

字段

示例：

@Component({
  selector: 'header',
  styleUrls: ['app/header/header.css'],
  template: require('./hahaha.html')
})

@Component({
  selector: 'header',
  styleUrls: ['app/header/header.css'],
  templateUrl: './hahaha.html'
})

解决方案2：使用

templateUrl

，但在这种情况下，您必须找到.html模板的路径

示例：

@Component({
  selector: 'header',
  styleUrls: ['app/header/header.css'],
  template: require('./hahaha.html')
})

@Component({
  selector: 'header',
  styleUrls: ['app/header/header.css'],
  templateUrl: './hahaha.html'
})

---

更新：如果使用

模板URL

-模板加载应该是异步的（AMD），但是使用

模板

-模板将内联到javascript中

为什么要使用require？只需使用路径？@LukaJacobowitz我想知道如何才能使require工作，尽管我知道一个解决方法，但我只是好奇。你认为

templateUrl:require（'./hahaha.html'）

和普通

templateUrl:'haha.html'

之间有什么区别吗？@LukaJacobowitz我不希望有任何区别，我只是想知道为什么require在这种情况下不起作用，因为我认为它应该起作用。但是您已经在其他代码中使用了

import from

语法。你不能同时拥有它。你为什么要使用require？只需使用路径？@LukaJacobowitz我想知道如何才能使require工作，尽管我知道一个解决方法，但我只是好奇。你认为

templateUrl:require（'./hahaha.html'）

和普通

templateUrl:'haha.html'

之间有什么区别吗？@LukaJacobowitz我不希望有任何区别，我只是想知道为什么require在这种情况下不起作用，因为我认为它应该起作用。但是您已经在其他代码中使用了

import from

语法。你不能两全其美。为什么我不能写这个：styleURL:['./header.css']，header.ts文件与header.css文件在同一个文件夹中，因为你的模块加载器将所有js代码加载到一个位置。：）为什么我不能写这个：styleUrls:['./header.css']，header.ts文件与header.css文件在同一个文件夹中，因为您的模块加载器将所有js代码加载到一个位置。：）在解决方案1中，您说的是template，但您放的是templateUrl。在解决方案1中，您说的是template，但您放的是templateUrl