Question

我正在寻找一些关于如何在 MVC 5 （非Core）中使用Visual Studio 2015设置和集成angular-cli（webpack）的最佳实践和说明。

我意识到这里有一个类似的问题（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
运行构建以生成index.html，并注入脚本和样式链接
创建一个Gulp / Grunt任务，从index.html提取所有脚本和样式链接到一个json文件，例如manifest.json。（这里我使用Cheerio和Gulp-asset-manifest）
编写逻辑以读取manifest.json并使用Razor语法输出到MVC视图

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

然而，在支持publicPath之前，它无法使用路由延迟加载，因为chunk js文件的url是从根文件夹而不是dist文件夹加载的。

例如：

正确的chunk 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已经合并，延迟加载不再是一个问题。

Answer 2

我整合Angular / CLI和MVC的方法：这里的想法是将前端开发体验与MVC部分分开，因此您不必处理任何Visual Studio BS，并享受Angular CLI和VS Code的好处。

我的应用程序是一个混合应用程序 - 大多数页面和主导航都是经典的MVC，但有些视图实际上是单页面应用程序，其中NG应用程序嵌入到现有视图中。

我在解决方案中创建了一个新项目来存储SPA。（您可以从解决方案构建中排除此项目）
在新项目中，我为每个SPA创建了一个目录。这些文件夹中的每一个都是标准CLI项目（使用ng new创建）
使用 VS代码开发ng内容，使用ng serve为应用程序提供服务。 VS Code的开发经验非常棒！
当我们想要将应用程序嵌入到MVC视图中时，我们首先使用ng build --prod为prod构建它。这会在 dist 文件夹中创建捆绑包。
在MVC应用程序中，我为每个SPA Scripts \ Frontend 准备了一个文件夹
MVC项目中的 gulp任务负责将捆绑包从SPA的 dist 文件夹复制到 Scripts \ Frontend下的相应文件夹中。使用Task Runner，任务被绑定到Before Build，因此无论何时构建应用程序，它都会自动执行。重要的gulp命令是：
```
gulp.src('../FrontEndProj/spa1/dist/*bundle.*')
    .pipe(gulp.dest('Scripts/Frontend/spa1'));
```
当然，您需要删除现有文件等。

在bundle config中，我为样式创建了一个包，为脚本创建了一个包。由于CLI通过哈希生成prod包名称，因此我使用通配符：

bundles.add(new script("~/Scripts/spa1/js")
  .IncludeDirectory("~/Scripts/Frontend/spa1", inline.*")
  .IncludeDirectory("~/Scripts/Frontend/spa1", "polyfills.*")
  .IncludeDirectory("~/Scripts/Frontend/spa1", "vendor.*")
  .IncludeDirectory("~/Scripts/Frontend/spa1", "main.*"));

（请注意，将文件添加到捆绑包的顺序非常重要！）

bundles.add(
  new StyleBundle("/Scripts/spa1.css")
    .IncludeDirectory("~/Scripts/Frontend/spa1", "*.css")

在您的视图中，添加ng app指令并使用捆绑包：

@section head {
  @Styles.Render("~Scripts/spa1/css")
}

<app-root>Loading...</app-root>

@Scripts.Render("~/Scripts/spa1/js")

Answer 3

我对张畅使用的方法略有不同。在运行build-prod之后，我将文件复制到根文件夹，并将index.html中的href属性更改为与我的IIS虚拟目录对应。

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

3 个答案: