在Angular2 + Webpack中使用templateUrl的相对路径

Question

import {Component} from 'angular2/core';

@Component({
  selector: 'app',
  styleUrls: ['./app.component.less'],
  templateUrl: './app.component.html'
})
export class AppComponent {
  name:string = 'Demo'
}

当使用templateUrl和styleUrls的相对路径时,我得到:错误404,找不到文件:

zone.js:101 GET http://localhost/app.component.html 404(未找到)

代码:https://github.com/Dreampie/angular2-demo

我认为这不是好设计,因为在不同的情况下可能会建立目录不一样,我可以将它改为相对当前路径吗？

raw-loader可以解决这个问题,但是html-loader,less-loader不是为了工作template,styles,它只是在工作string,为什么不能支持他们呢？

import {Component} from 'angular2/core';

@Component({
  selector: 'app',
  styles: [require('./app.component.less')],
  template: require('./app.component.html')
})
export class AppComponent {
  name:string = 'Demo'
}

得到其他错误:

browser_adapter.js:77 EXCEPTION: Error during instantiation of Token Promise<ComponentRef>!.BrowserDomAdapter.logError
browser_adapter.js:77 ORIGINAL EXCEPTION: Expected 'styles' to be an array of strings.

Answer 1

让我添加一些更多信息。

为什么 Angular 无法根据组件文件的位置计算 HTML 和 CSS URL？

不幸的是，这个位置并不容易知道。Angular 应用程序可以通过多种方式加载：从单个文件、从 SystemJS 捆绑包或从 CommonJS 捆绑包等等。由于加载策略的多样性，在运行时判断这些文件的实际位置并不容易。

Angular 唯一可以确定的位置是index.html 主页的URL。因此默认情况下它会解析相对于index.html URL 的模板和样式路径。这就是为什么我们之前使用 app/ 基本路径前缀编写 CSS 文件 URL。

官方 Angular 文档