将 Angular 5 与 ASP.NET MVC 5 集成答案

【问题标题】：Integrate Angular 5 with ASP.NET MVC 5将 Angular 5 与 ASP.NET MVC 5 集成
【发布时间】：2018-05-29 03:38:45
【问题描述】：

我正在尝试将使用 CLI 项目生成的 Angular 5 应用程序集成到现有的 ASP.NET MVC 5 应用程序中。我在 ASP.NET MVC 项目中使用 CLI 创建了 Angular 项目，我想在 razor 视图中使用 Angular 5 组件；这些将是简单的剃刀视图，在其中，我将展示一些 Angular 5 组件。我已经使用 ASP.NET Core 2 完成了此操作，我将文件 .angular-cli.json 中的 Outdir 属性更改为 wwwroot，并且它有效，但我无法使用 ASP.NET MVC 5 完成此操作。任何人都可以帮忙?谢谢你

PS：许多教程使用的是旧版本的 Angular，他们使用了一个名为 system.js 的文件，但这个文件在新版本的 Angular 中不再存在。

【问题讨论】：

同样的成功吗？？？？请更新。
youtube.com/watch?v=rbHSTJBhJ44

标签： angular asp.net-mvc-5

【解决方案1】：

我刚刚使用 Angular 5 和 MVC 5 完成了这项工作。我建议您先让“Hello World”工作，然后将其移植到您现有的 MVC 问题中。

先决条件 - 确保您安装了最新的 Node、NPM、AngularCLI...

在 VS2017 中，使用 MVC 和 WebAPI 1.1 创建一个新的 ASP.NET Web 应用程序、SPA。显示所有文件（在解决方案资源管理器中 - 这让事情变得更简单！）

从包管理器控制台卸载不需要的包：

UnInstall-Package Sammy.js
UnInstall-Package Bootstrap
UnInstall-Package JQuery
UnInstall-Package Knockout.validation
UnInstall-Package Knockoutjs
UnInstall-Package modernizr
UnInstall-Package Microsoft.ApplicationInsights.Web -RemoveDependencies

删除BundleConfig.cs 中的所有捆绑包（我们稍后会将它们拉入！）
删除脚本文件夹（它将使用 AngularCLI 重新创建）
使用 CLI 添加 Angular（进入项目根文件夹）

运行：ng new Scripts --skip-tests --style scss

在项目中，包括除 node_modules 之外的所有文件夹！
更新angular.json 以输出到Bundles 文件夹 -> "outputPath": "../Bundles"

添加捆绑包：

bundles.Add(new ScriptBundle("~/Script/Bundles") 
       .Include("~/bundles/inline.*", "~/bundles/polyfills.*", 
                "~/bundles/scripts.*", "~/bundles/vendor.*", "~/bundles/runtime.*", 
                "~/bundles/main.*"));

bundles.Add(new StyleBundle("~/Content/Styles") .Include("~/bundles/styles.*"));

（可选）通过 NPM 重新添加库（来自 Scripts 文件夹的命令提示符）：

npm install jquery --save   
npm install popper.js --save    
npm install bootstrap --save

（可选）在 angular.json 中引用它们，以便 AngularCLI 将它们拉入 webpack 包中：

"styles": [
      "src/styles.scss",
      "./node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],
"scripts": [
      "./node_modules/jquery/dist/jquery.min.js",
      "./node_modules/popper.js/dist/umd/popper.min.js",
      "./node_modules/bootstrap/dist/js/bootstrap.min.js"
    ]

从脚本文件夹构建：ng build --extractCss

在_Layout.cshtml，添加：

  @Styles.Render("~/Content/Styles")    <!-- In the "head" element -->

和

  @Scripts.Render("~/Script/Bundles")   <!-- At the end of the "body" element -->

删除旧的捆绑包导入！

在Home/Index.cshtml中，添加Angular元素：
```
<app-root>test</app-root>
```
13.1 删除旧的包导入！
运行 Web 应用程序 - 它应该会打开。注册一个新用户，然后登录。与 Angular 一起显示 MVC5 演示页面
要“观看”网页 - 从命令行：
```
ng build --extractCss --watch
```

这将重建捆绑包。不幸的是，您需要刷新浏览器，但这比停止/启动要好！

如果您需要更多详细信息，请大声喊叫 - 我已经完成了两次以熟悉它，并且效果很好！

【讨论】：

嗨，James，U 解决方案效果非常好，但是我在部署到 Azure 应用服务时遇到了问题，请您帮我了解如何将上述解决方案部署到 azure
嗨，Mawy，这是一个很大的话题。我不使用 Azure，但在 AWS 上我更喜欢“老派”的部署方法。我运行一个 MSBuild 脚本来“ng build --prod”创建 Angular 等的产品包，然后运行一个 MSBuild 来构建 MVC5 网站项目。然后我将它复制到目标服务器上的共享文件夹中。目标服务器正在运行 IIS7，并且共享位于 inetpub/wwwroot 中。在 IIS 中，我通常会创建一个新的虚拟目录，而我的共享文件夹就在那儿……希望对您有所帮助？否则提出问题，我会尝试给出更大的答案......
@JamesJoyce，按照上述步骤，我收到错误 错误：选择器“app-root”不匹配任何元素
@Kng-web - 您还没有将 html 元素放入您的 MVC 视图中。这是 Angular 注入它的输出 HTML 的地方，您将其定义为 app.component.ts 中的元素选择器...将一个放入您呈现 Angular 脚本的 MVC 视图中...
谢谢，@JamesJoyce。很好的答案。刚刚使用它并取得了巨大的成功。一个小修正：第 5 步：ng new Scripts --skip-tests --style=scss

【解决方案2】：

您是否看过新的 Microsoft Core Angular 模板的候选发布版本。他们更改了模板，以便它使用 angular-cli。效果很好。您可能会遵循相同的构建配置模式。请注意，您必须通过

安装最新版本的模板

dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0-rc1-final.

https://docs.microsoft.com/en-us/aspnet/core/spa/angular?tabs=visual-studio#tabpanel_IjUmMTId-R_visual-studio

【讨论】：

【解决方案3】：

解决方案以及如何使用 Angular 4.3 here：

【讨论】：

对于后代，您能否在您的答案中包含您认为有用的链接的相关部分？这样，如果链接断开、更改等，您的答案不会变得无用。非常感谢。
为方便起见：了解 MVC 的人可以跳过所有解释，直接进入“如何包含 Angular”youtu.be/-2tpXcor6wU?t=4703

【解决方案4】：

对于其他在 2021 年努力寻找工作/简单说明的人来说，这里是我最终将 Angular 10.x 应用程序添加到 ASP.NET (CORE) 3.x MVC Web 应用程序的步骤： https://gist.github.com/cemerson/1af0befa4edc959a02ba1a34784c6d55

【讨论】：