angular2-template-loader 无法内联组件模板答案

【问题标题】：angular2-template-loader fails to inline component templateangular2-template-loader 无法内联组件模板
【发布时间】：2016-10-06 15:01:39
【问题描述】：

我正在关注 Webpack for Angular 2 的入门教程：https://angular.io/docs/ts/latest/guide/webpack.html

完成所有步骤后，我在尝试加载应用组件的模板时遇到 404 错误。

教程明确指出 app.component.html 和 app.component.css 应该由 angular2-template-loader 即时捆绑，但它们不是，因为浏览器试图通过 XHR 请求它们。

教程中 app.compnent.ts 的代码：

import { Component } from '@angular/core';
import '../../public/css/styles.css';
@Component({
    selector: 'my-app',
    templateUrl: 'app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent { }

如果我指定相对于基本路径的模板路径，它会起作用，但这不是正确的方法。

import { Component } from '@angular/core';
import '../../public/css/styles.css';
@Component({
    selector: 'my-app',
    templateUrl: './src/app/app.component.html',
    styleUrls: ['./src/app/app.component.css']
})
export class AppComponent { }

有没有人知道为什么会发生这种情况，是否有任何人能够使用可行的解决方案完成本教程？

【问题讨论】：

另见stackoverflow.com/questions/39503805/…
谢谢，我尝试添加 moduleId: module.id 但没有成功，模板仍然找不到，我还需要调用 module.id.toString() 以避免错误拆分方法未定义。但是我最大的问题是教程中没有提到，而且还增加了额外的复杂度和代码。
我遇到了同样的错误。对我来说，问题是我的 IDE 自动将我的 typescript 转换为 JS 文件，这干扰了我的 webpack 构建。我删除了JS文件，它工作正常。
我遇到了完全相同的问题。运气好能解决吗？

标签： angular webpack

【解决方案1】：

确保 webpack 执行 typescript 编译过程。我有同样的问题，问题是 Visual Studio 在保存时编译我的 ts 文件，并且由于 WebPack 被配置为解析 .js 文件和 .ts 文件，加载程序试图应用到已经编译的 js 文件上的源 ts 文件。

总结一下：

确保您的 ts 文件没有在您的目录。
在项目的本地 node_modules 中安装 typescript。
按照 Angular 教程配置 webpack。
从命令行运行 webpack webpack.config.js 文件存在。这确保了 webpack 是唯一的进行打字稿编译，因此 ts 文件进入管道。

它现在应该适合你了。

【讨论】：

就是这样 - WebStorm 正在为我进行 .ts 转换，因此它干预了 WebPack 构建。谢谢！
这也吸引了我。几天前，我在 VS2015 中打开了我的项目，并且正在加载它编译的 .js 文件，而不是新的 .ts 编译。感谢您的解决方案。
救命稻草，我在这个上浪费了很多时间