文件分离后如何检测角度2中的模板？答案

【问题标题】：How to detect templates in angular 2 after file separation?文件分离后如何检测角度2中的模板？
【发布时间】：2017-05-27 08:12:15
【问题描述】：

到目前为止，我正在尝试 learn how to start Angular 2 中的项目到第二个问题：在关注this article 之后，我将 .ts 与 .js 分开：

app: 'temp'  - in systemjs.config.js
"outDir": "temp"  -  in tsconfig.json

当然我遇到了这个问题，如果我为模板或样式创建文件（在 app 文件夹中），它们是不可见的，因为它们与 .js 文件不在同一个文件夹中。

例如：

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
})
export class AppComponent  { name = 'World'; }

我收到错误消息：Unhandled Promise rejection: Failed to load app.component.html

如果我添加 moduleId: module.id 我会得到 Unhandled Promise rejection: Failed to load http://localhost:3000/temp/app.component.html

我看到如果我将.replace 添加到module.id 可以实现，但这不是我想要的（如果可能的话，我想根本不使用moduleId）。如果可能的话，我也不想使用grunt（至少现在）（尝试了它的copy 功能，但在npm start 运行时它不会捕获更新）

我觉得很奇怪，只是想将 .ts 从编译文件中分离出来，对于任何不是 .ts 文件的东西都会带来很多麻烦。

如果存储在不同的目录中（与编译的 .js 所在的位置不同），是否有一种简单的方法可以使用.html（或.css/.scss，如果是样式）？

【问题讨论】：

你也用webpack吗？
我是超级新手，谈论 Angular 和 npm 的东西，所以......对不起，我可能根本不明白我们在说什么。什么是 webpack？
Webpack 是一个类似 Gulp 的工具 .. 在你的 Angular 2 组件中试试这个 .. 而不是 templateUrl: './app.component.html', ..TRY template: require('./app .component.html')
@OlegsJasjko Webpack 是一个类似于 angularcli 的工具，可以帮助您构建应用程序。对于小型应用程序，使用 webpack 增量构建的重新加载时间约为 1 秒，而 angularcli 需要的时间太长。你应该检查一下，虽然对于新手来说 webpack 配置可能很难掌握，但是嘿 - 我做到了，这意味着你也可以做到 :)
hm...有没有简单的配置和使用示例？

【解决方案1】：

而不是templateUrl: './app.component.html'

试试template: require('./app.component.html')

在 Angular2 中，如果您使用 Webpack，则无需处理 js 文件。如果您想创建一个快速的项目来了解它，请尝试AngularCLI。

【讨论】：