asp.net-mvc - 如何在 MVC 5 中使用 Visual Studio 2015 设置 angular-cli？

Question

我在 中寻找一些关于如何设置 angular-cli (webpack) 并将其与 Visual Studio 2015 集成的最佳实践和说明。 MVC 5 (不是核心)。

我意识到这里有一个类似的问题( how to set up asp.net angular 2 project using Angular-Cli with ASP.NET Core in Visual Studio 2015? )，但这仅适用于 Asp.net Core。由于服务器技术问题，我的项目还不能转移到 Core。

Answer 1

这是我的解决方案:

保留一个空的 index.html

运行 ng build 生成 index.html 并注入(inject)脚本和样式链接

创建一个 Gulp/Grunt 任务以将所有脚本和样式链接从 index.html 提取到一个 json 文件，比如 manifest.json。(这里我使用 Cheerio 和 Gulp-asset-manifest)

编写逻辑以读取 manifest.json 并使用 Razor 语法输出到您的 MVC View

它非常适合我的 ASP.net MVC 5 项目。

但是，在支持 publicPath 之前，它不能与路由延迟加载一起使用，因为 block js 文件的 url 是从根文件夹而不是 dist 文件夹加载的。

例如:

正确的 block js 文件应该是:

www.example.com/MyApp/dist/[id].chunk.js

但它将从以下位置加载:

www.example.com/MyApp/[id].chunk.js

我已经创建了一个 PR 来为 angular-cli 添加 pulishPath 来解决这个问题。

https://github.com/angular/angular-cli/pull/3285

更新:

publicPath 的 PR 已经合并，懒加载不再是问题。