使用 Visual Studio 2017 的 Angular 5 和 .NET Core 2

引言

在 Visual Studio 2017 中创建和部署 .NET Core 2 和 Angular 5 应用程序时，我遇到了一些困难。因此，我想把我的所有步骤放在一个地方，这可能会帮助其他人设置和部署使用 .NET Core 2 和 Angular 5 构建的应用程序。

背景

本文的目的是提供创建全新应用程序（使用 Visual Studio 2017、.NET Core 2 和 Angular 5）并将其部署到 IIS 的步骤。让我们开始吧。

先决条件

1. 已安装 .NET Core 和 Node 开发的 Visual Studio 2017（您可以选择自己喜欢的 .NET IDE）
2. NodeJS - 从 https://node.org.cn/en/download/current/安装
3. Node for IIS - 从 https://github.com/tjanczuk/iisnode/releases安装

我不会深入研究安装部分，因为它只是下载，然后进行标准的点击、点击、点击。

开发设置

打开 Visual Studio 2017（最好使用管理员访问权限）以创建新的 .NET Core Web 应用程序。单击创建新项目，选择 ASP.NET Core Web 应用程序，选择相关的项目名称和位置，然后单击“确定”按钮。

在以下屏幕中选择 Angular 模板并单击“确定”按钮。

这将创建开发带有 .NET Core 的 Angular 应用程序所需的外观。

这是我们利用 Angular 平台的基础/外观。

Angular 5 设置

打开 Node.js 命令提示符（使用“以管理员身份运行”访问权限）。

并浏览到我们上面创建的项目的所在位置（从上面的屏幕截图 - C:\Users\amitk\Documents\Visual Studio 2017\Projects\WebApplication1\WebApplication1）。因此，在命令提示符下键入 cd C:\Users\amitk\Documents\Visual Studio 2017\Projects\WebApplication1\WebApplication1

使用 dir 命令，您应该在列表中看到 package.json。

现在我们准备执行一些命令来设置 Angular 5

1. 确保安装了最新的 npm。因此，执行命令npm install -g npm
2. 然后使用命令更新 Angular 包
   1. npm install -g npm-check-updates
   2. 然后 ncu -u

您会注意到您的 package.json 文件现在已更新为 Angular 5 库。

调整

1. 现在我们需要修改 webpack.config.js 为什么？因为 Angular 4 及以下版本支持 AOT 编译器，但 Angular 5 及以上版本在部署时不支持 AOT 编译。参考 - https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack

在 Visual Studio 中打开 webpack.config.js，并将所有出现的 AotPlugin 替换为 AngularCompilerPlugin

保存并关闭 webpack.config.js。

1. 在 Visual Studio 中打开文件 ClientApp/boot.server.ts

您将在第 25 行看到错误 (zone.onError.subscribe((errorInfo: any) => reject(errorInfo));)

更改第 22 行的声明

从这里 - const zone = moduleRef.injector.get(NgZone);

到这里 - const zone: NgZone = moduleRef.injector.get(NgZone);

错误现在将消失。保存并关闭此文件。

1. 在 Visual Studio 中打开文件 ClientApp/app/app.browser.module.ts

并在最后一个 import 语句之后添加以下内容

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

另外，在 import 部分添加 – BrowserAnimationsModule

修改后的文件截图

            

       4. 在 Visual Studio 中打开文件 Views/Home/Index.cshtml 并更改该行

从 <app asp-prerender-module="ClientApp/dist/main-server">正在加载...</app>

到 <app>正在加载...</app>

我们现在已经完成了开发设置。在 Visual Studio 中按 F5 以查看您的应用程序运行情况。

 

最终的部署步骤

1. 打开 IIS（如果可能，使用“以管理员身份运行”访问权限）。右键单击“站点”并选择“添加网站”。输入站点名称、已部署的文件夹路径和端口，以完成添加网站设置，然后单击“确定”按钮。
   
2. 现在我们需要配置应用程序池。单击 IIS 中的“应用程序池”并双击 TestAngular5 应用程序池进行编辑。将 .NET CLR 版本更改为 无托管代码，然后单击“确定”按钮。
   
3. 返回 Visual Studio 并将网站发布到 IIS 中设置的文件夹（在步骤 1 中）。

单击发布以部署应用程序。然后打开您喜欢的浏览器并浏览到 https://:160

如果一切都设置正确，您应该看到您全新的 Angular 5 .NET Core 网站启动并运行

 

结论

希望本教程能帮助初学者或希望设置 Angular 5 的人。我通过反复试验和研究各种博客学到了这一切。享受吧！！！