使用.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的步骤。所以让我们开始吧。
先决条件
- 安装了.NET Core和Node Development的Visual Studio 2017(您可以使用您选择的IDE for .NET)
- NodeJS - 从https://nodejs.org/en/download/current/安装
- 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:
- 确保安装了最新的npm。因此,执行命令npm install -g npm
- 然后使用命令更新Angular包:
- npm install -g npm-check-updates
- 然后是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以查看您的应用程序是否正在运行
部署的最后步骤
- 打开IIS(如果可能,以管理员身份运行)。右键单击“站点”并选择“添加网站”。输入站点名称,部署的文件夹路径和端口以完成添加网站设置并点击确定按钮。
- 现在我们需要配置应用程序池。单击IIS中的“应用程序池”,然后双击TestAngular5应用程序池进行编辑。将.NET CLR版本更改为“ 无管理代码”,然后单击“确定”按钮。
- 回到Visual Studio并将网站发布到IIS中的设置文件夹中(在步骤1中)。
点击发布以部署应用程序。然后打开您喜欢的浏览器并浏览到http:// localhost:160
如果一切顺利,您应该看到您的全新Angular 5 .NET Core网站启动并运行:
原文地址:https://www.codeproject.com/Articles/1221503/Angular-and-NET-Core-with-Visual-Studio
使用.NET Core 2开发部署Angular 5项目相关推荐
- 使用Web API ASP.NET Core 2.2部署Angular 8应用程序
目录 情境化部署方案 从理论到实践 后端和CORS,单独的章节 情境化部署方案 当我开始这个部署过程时,一个带有Angular应用程序的ASP.NET核心web应用程序,我花了几天时间尝试和错误方法, ...
- Nginx+Tomcat部署Angular+javaweb项目(解决刷新404)
2019独角兽企业重金招聘Python工程师标准>>> 最近项目进入了即将验收阶段,项目部署是必不可少的.由于某些原因,我们把前端项目(Angular4)和后端项目(JavaWeb) ...
- jboss-as-7.1.1 开发部署spring springmvc项目
一.snowdrop Snowdrop 是 JBoss 提供的针对 JBoss AS 特有的 Spring 扩展和工具包.本示例JBoss AS 7.1 http://jbossas.jboss. ...
- ASP.NET Core MVC+EF Core从开发到部署
笔记本电脑装了双系统(Windows 10和Ubuntu16.04)快半年了,平时有时间就喜欢切换到Ubuntu系统下耍耍Linux,熟悉熟悉Linux命令.Shell脚本以及Linux下的各种应用的 ...
- 使用VS Code 开发.NET Core 应用程序 部署到Linux 跨平台
前面讲解了VSCode开发调试 .NET Core.都只是在windows下运行. .NET Core真正的核心是跨平台,我们现在来了解学习 .NET Core 跨平台. 在windows 下开发.N ...
- 使用.NET Core 2.1,RabbitMQ,SignalR,EF Core 2.1和Angular 6开发微服务
目录 介绍 单一软件 微服务架构 微服务设计与规划 示例应用程序 示例应用程序的微服务 微服务进程间通信 微服务与消息队列之间的消息传递 RabbitMQ消息代理 消息队列体系结构目标和决策 帐户管理 ...
- .net core 2.0 部署到centos 7生产环境
.netcore的跨平台如此之火,忍不住想试试 在linux下部署 .net 程序. 借鉴此篇博文:将ASP.NET Core应用程序部署至生产环境中(CentOS7) 虽然是借鉴,但过程坎坷.对从未 ...
- Asp.Net Core 发布和部署(Linux + Jexus )
前言 在上篇文章中,主要介绍了 Dotnet Core Run 命令,这篇文章主要是讲解如何在 asp.net core 中对我们的已经完成的程序进行发布和部署. 有关如何使用 Nginx 进行部署, ...
- Asp.Net Core 发布和部署( MacOS + Linux + Nginx )
前言 在上篇文章中,主要介绍了 Dotnet Core Run 命令,这篇文章主要是讲解如何在Linux中,对 Asp.Net Core 的程序进行发布和部署. 有关如何在 Jexus 中进行部署,请 ...
最新文章
- node 升级_技术周刊( Node.js 12 性能大提升 2019-04-30)
- html li去掉黑点_10分钟教你Python爬虫(上) HTML和爬虫基础
- java中this关键字的基本使用
- 基本数据类型参数传递 与 引用数据类型参数传递区别
- SharePoint 2013 Deploy Master Page And Page Layout
- 【知识图谱系列】PairNorm、DropEdge、DAGNN、Grand和GCNII五篇2020 Over-Smoothing论文综述
- eclipse部署Javaweb项目
- Rational rose 安装教程
- PHP在线预览word文档的功能
- 计算机功率在线测试,电脑功耗计算在线测试
- 程序员的奋斗史(三十二)——人在囧途之应聘篇(二)
- ADB识别失败,驱动显示感叹号解决方案——记录一次驱动重装导致的不识别手机问题
- 利用新浪API实现短网址生成,长网址缩短!
- 推荐一款低代码报表开发工具,操作类似Excel
- 4. 上新了Spring,全新一代类型转换机制
- 第一模块-开发基础-第一章python语法
- 中超比赛小观-长沙金德对上海申花(图,视频)_原水_新浪博客
- proc near/far
- 树莓派CM4查看系统版本命令
- [全流程案例]壮汉:3.头部雕刻(ZBrush)
热门文章
- 单纯形表的matlab输出,自编MATLAB版单纯性算法 可以列出单纯形表以及其他相关数据...
- 优秀案例|想学排版?布局清晰明了的海报给你参考
- UI素材模板|app ui界面的导航设计都有哪些?
- 高品质UI设计模板|PSD下载,设计师的最佳临摹素材
- php array_search多条件,php使用array_search与array_column函数实现二维数组内元素查找...
- Linux文件系统:Linux 内核文件描述符表的演变
- C语言curl实现FTP上传、下载、获取文件信息
- cygwin不支持__malloc_hook
- 聊城初中计算机考试分数线,2021年聊城中考最低录取线是多少,聊城历年中考分数线统计...
- 3d旋转相册代码源码_用代码制作3d相册签到墙(附源码)