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

【问题标题】：How to set up angular-cli with Visual Studio 2015 in MVC 5?如何在 MVC 5 中使用 Visual Studio 2015 设置 angular-cli？
【发布时间】：2017-01-30 00:44:27
【问题描述】：

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

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

【问题讨论】：

标签： asp.net-mvc visual-studio-2015 angular-cli

【解决方案1】：

这是我的解决方案：

保留一个空 index.html
运行 ng build 生成 index.html 并注入脚本和样式链接
创建一个 Gulp/Grunt 任务，将所有脚本和样式链接从 index.html 提取到一个 json 文件，比如 manifest.json。（这里我使用 Cheerio 和 Gulp-asset-manifest）
编写逻辑以读取 manifest.json 并使用 Razor 语法输出到您的 MVC 视图

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

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

例如：

正确的块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 已经合并，懒加载不再是问题。

【讨论】：

所以你说它有效还是无效？建议您使用此链接进行延迟加载stackoverflow.com/questions/40643629/…
@Aravind 主题是关于 Angular 2 而不是 Angular 1
@ChangLiu 两个月后你还在使用这种方法吗？你是怎么找到它的？
@JMK 是的，我仍在使用这种方法。我自己创造的
@ChangLiu 作为 Angular 2 的新手，您能否提供一些有关此设置的附加信息。这是我见过的唯一一个看起来像我想要的那样工作的。提前致谢！

【解决方案2】：

我对Chang Liu 使用了稍微不同的方法。运行 ng build --prod 后，我将文件复制到根文件夹，并将 index.html 中的 href 属性更改为与我的 IIS 虚拟目录相对应。

【讨论】：

【解决方案3】：

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

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

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

在包配置中，我为样式创建了一个包，为脚本创建了一个包。由于产品包名称是由 CLI 使用哈希生成的，因此我使用通配符：

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")

【讨论】：