Typescript + Angular 2 + ASP.Net Core 1.0 的 .html、.css 等文件应该放在哪里？答案

【问题标题】：Where should .html, .css, etc. files for Typescript + Angular 2 + ASP.Net Core 1.0 be located?Typescript + Angular 2 + ASP.Net Core 1.0 的 .html、.css 等文件应该放在哪里？
【发布时间】：2017-02-23 19:41:42
【问题描述】：

创建 ASP.Net Core 应用程序（有或没有 Angular 2）的 Typescript 教程建议我们创建一个文件夹 Scripts 并使用 gulp 任务仅将 .js 文件复制到 wwwroot 文件夹，例如在构建期间。

现在说得有道理，但是我们如何处理 Angular 2 可以使用的所有 .html、.css 等文件。看来一般有两种方法：

将它们添加到wwwroot 文件夹。
- 好处：无需为这些静态文件添加 gulp 任务
- 缺点：我们必须复制文件夹结构并进行两次复制/重命名/等操作
将它们保存在wwwroot 之外的Scripts 文件夹中（然后我们最好将其重命名为Source 或类似名称。
- 好处：没有重复，都在一个地方
- 缺点：我们必须在 gulp 任务中将它们复制到 wwwroot

如果 2 wwwroot 变成普通应用程序的 bin 文件夹。

是否有任何关于该主题的官方指南/建议（我找不到任何）可以用作参考？

【问题讨论】：

标签： angular typescript asp.net-core project-structure

【解决方案1】：

通常人们使用方法 2，尽管大多数人（包括我）将文件夹称为“app”而不是“source”或“scripts”并通过 gulp 复制它们。

这样做的一个原因是我们可以从源代码控制管理中排除wwwroot 文件夹。另一个是在生产环境中，您希望捆绑文件（html、css 和生成的 *.js 文件），因此您的 wwwroot 文件夹将包含不同的数据集，具体取决于您是在开发还是部署它。

而且由于它的内容会经常变化（每次构建/捆绑）并且它可能会生成相当大和缩小的苍蝇，因此它不太适合源代码控制（缩小/丑化/合并文件很难/难以/不可能创建差异为了）。

对于特定的角度，您希望将 *.html、*.ts、*.js 和 *.css（仅与组件相关的）保留在同一位置/子文件夹中。 Visual Studio 会自动将它们组合在一起（即sample.component.html、sample.component.ts、sample.component.css 和 sample.component.js 将组合在一起，您可以通过按组合名称旁边的小三角形来展开它们），它非常适合捆绑因为 angular2 css/template 可以使用component relative path，如果你使用模块加载器（推荐！）。

【讨论】：

感谢您的全面回答。我也是这么想的，然后我们的wwwroot 就变成了真正类似于bin 的文件夹，这是我们在源代码控制中永远不需要的。正如您提到的捆绑是一个好主意，我想知道您是否可以帮助捆绑 css。它描述了如何捆绑html，但是我根本找不到捆绑css（我们不能使用普通的css文件捆绑，因为angular需要处理它们）。提出了一个单独的问题stackoverflow.com/questions/40283535/…，但在那里没有得到答案。

【解决方案2】：

我不觉得 gulp 是一个有用的工具，所以不要在我的模板中使用它（ng2+material+asp.net core）。但需要记住在运行“dotnet run”之前运行“npm start”以编译任何 ng2 更改。

这是我的解决方案模板，你可以试试：https://github.com/Longfld/ASPNETCoreAngular2

【讨论】：