本文共 2284 字,大约阅读时间需要 7 分钟。
目录
在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的步骤。所以让我们开始吧。
我不会给出安装部分,因为它只是下载和标准点击,下一步,下一步。
打开Visual Studio 2017(最好是Admin访问权限)以创建新的.NET Core Web应用程序。单击“ 创建新项目”,选择“ASP.NET Core Web Application”,选择相关项目名称和位置,然后单击“确定”按钮。
在以下屏幕中选择Angular模板,然后单击Ok按钮。
这将创建使用.NET Core开发Angular应用程序所需的外观。
这是我们利用Angular平台的基础/外观。
打开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:
您会注意到您的package.json文件现在已使用Angular 5库进行更新。
在Visual Studio中打开webpack.config.js并将所有出现的AotPlugin替换为AngularCompilerPlugin
保存并关闭webpack.config.js。
你会在25行看到错误(zone.onError.subscribe((errorInfo: any) => reject(errorInfo));)
在第22行更改声明
将这里 - const zone = moduleRef.injector.get(NgZone);
改为 - const zone: NgZone = moduleRef.injector.get(NgZone);
错误现在将消失。保存并关闭此文件。
并在最后一个import语句后添加以下内容:
import { BrowserAnimationsModule } from '@angular/platform-browser/animations;
另外,在imports 部分添加 - BrowserAnimationsModule
修改后的文件的屏幕截图:
来自<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>
变为< app >正在加载... </ app >
我们现在完成了开发设置。在Visual Studio中按F5以查看您的应用程序是否正在运行
点击发布以部署应用程序。然后打开您喜欢的浏览器并浏览到http:// localhost:160
如果一切顺利,您应该看到您的全新Angular 5 .NET Core网站启动并运行:
原文地址:
转载地址:http://mwzhj.baihongyu.com/