Question

在我的组件中，我想使用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不是函数在eval（http://localhost:3000/app/header/header.js:29:35） at execute（http://localhost:3000/app/header/header.js:34:14）加载http://localhost:3000/app/main.js
时出错

我希望能够做到这样的事情:(我确实知道一个解决方法，但我只是想知道更多，如何使其以其他方式工作）

// Note that this is a relative path, which I will get error for now, I have to write from root path, don't like it.
styleUrls: ['./header.css']  
templateUrl: require('./hahaha.html')

这是我的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"
  ]
}

Answer 1

require('./hahaha.html')的结果将是模板字符串，但templateUrl字段需要 PATH 到.html模板。

解决方案1 ：如果您要继续template功能，请使用require字段

示例：

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

解决方案2 ：使用templateUrl但在这种情况下，您必须转到.html模板

示例：

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

更新：以防templateUrl - 模板加载应该是异步的（AMD），但template - 模板将内联到javascript中

Answer 2

而不是require只使用文档根目录中的相对路径。

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

使用require在Angular 2中设置templateUrl，同时收到错误

2 个答案: