使用.NET Core 2开发部署Angular 5项目

目录

介绍

背景

先决条件

开发设置

Angular 5设置

调整

部署的最后步骤

---

在Visual Studio 2017中使用.NET Core 2设置Angular 5以进行开发和部署的步骤。

介绍

在使用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 Development的Visual Studio 2017（您可以使用您选择的IDE for .NET）
2. NodeJS - 从https://nodejs.org/en/download/current/安装 
3. IIS的节点 - 从https://github.com/tjanczuk/iisnode/releases安装它 

我不会给出安装部分，因为它只是下载和标准点击，下一步，下一步。

开发设置

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

在以下屏幕中选择Angular模板，然后单击Ok按钮。

这将创建使用.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库进行更新。

调整

• 现在我们需要修改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。

• 在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);

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

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

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

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

另外，在imports 部分添加 - BrowserAnimationsModule

修改后的文件的屏幕截图：

            

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

来自<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>

变为< app >正在加载... </ app >

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

 

部署的最后步骤

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

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

如果一切顺利，您应该看到您的全新Angular 5 .NET Core网站启动并运行：

 

原文地址：https://www.codeproject.com/Articles/1221503/Angular-and-NET-Core-with-Visual-Studio