node.js - 在 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 的原因。

Official Angular Docu