前言：
在ABP官网（https://aspnetboilerplate.com）生成的.Net Core + Angular项目前后端是两个独立的项目，我们可以分开部署，也可以将前端和Web API一起集成部署，我们今天就来尝试一下集成部署。

一 前端打包
确保前端安装和运行没有问题，如何安装运行请查看博客：http://www.cnblogs.com/donaldtdz/p/7705605.html
运行命令 ng build 进行打包，在项目根目录会自动创建一个dist目录（先安装 npm install -g angular-cli）
 

二 打包集成
1. 将第一步打包好的dist目录里的文件copy到后台host项目里的wwwroot目录下面（注：打包好的静态文件都需要放到wwwroot目录，这个目录是网站静态资源根目录，以便后续做动静分离部署）


2. 然后在HomeController里创建一个新视图PhotoStory（注：这里是随便创建一个View用于集成测试，实际项目你可以按照你的需要进行创建）


3. 然后将之前打包到dist目录的index.html文件里的代码copy PhotoStory 视图
 

<!doctype html>

<html lang="en" dir="ltr">

<head>

    <meta charset="utf-8">

    <title>照片故事</title>

    <base href="/">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <meta name="author" content="">

    <meta name="description" content="">

    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

</head>

<body class="theme-red">

    <app-root></app-root>

    <script type="text/javascript" src="inline.bundle.js"></script>

    <script type="text/javascript" src="polyfills.bundle.js"></script>

    <script type="text/javascript" src="scripts.bundle.js"></script>

    <script type="text/javascript" src="styles.bundle.js"></script>

    <script type="text/javascript" src="vendor.bundle.js"></script>

    <script type="text/javascript" src="main.bundle.js"></script>

</body>

</html>

4. 然后将默认路由Index返回视图PhotoStory，集成完成

public IActionResult Index()

{

    //return Redirect("/swagger");

     return View("PhotoStory");

}

　
三 集成运行测试
 
更改URL为http://localhost:21021/swagger/会跳转的Web API页面
 

如要前后端独立部署需要注意跨域问题，可查看博客：http://www.cnblogs.com/donaldtdz/p/7882225.html

ABP .Net Core API和Angular前端APP集成部署的更多相关文章

  1. ABP .Net Core API和Angular前端APP独立部署跨域问题（No Access-Control-Allow-Origin）

    前言: 通过ABP官网(https://aspnetboilerplate.com)下载ASP.NET Core 2.x + Angular模板项目是按ReStful风格架构Web API和angul ...

  2. abp.zero 9.0框架的前端Angular使用说明

    abp.zero 9.0框架的前端Angular使用说明 目录 abp.zero 9.0框架的前端Angular使用说明 摘要 1 部署及启动 1.1 依赖包安装 1.2 使用yarn安装依赖包 1. ...

  3. abp(net core)+easyui+efcore实现仓储管理系统——EasyUI前端页面框架 (十八)

    目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+easyui+efcore实现仓储管理系统——解决方案介绍(二) ab ...

  4. 部署基于.netcore5.0的ABP框架后台Api服务端，以及使用Nginx部署Vue+Element前端应用

    前面介绍了很多关于ABP框架的后台Web API 服务端,以及基于Vue+Element前端应用,本篇针对两者的联合部署,以及对部署中遇到的问题进行处理.ABP框架的后端是基于.net core5.0 ...

  5. 创建ABP Angular客户端（二）使用模板创建Angular前端

    现在我们使用ABP CLI创建Angular客户端. 首先,进入控制台,创建一个空目录,进入这个目录,执行: abp new ZL.Test -u angular 这里我们使用与上一个系列相同的项目名 ...

  6. abp(net core)+easyui+efcore实现仓储管理系统——入库管理之五(四十一)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

  7. abp(net core)+easyui+efcore实现仓储管理系统——入库管理之六(四十二)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

  8. abp(net core)+easyui+efcore实现仓储管理系统——入库管理之九(四十五)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

  9. abp(net core)+easyui+efcore实现仓储管理系统——入库管理之十一(四十七)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

随机推荐

  1. iOS学习——如何在mac上获取开发使用的模拟器的资源以及模拟器中每个应用的应用沙盒

    如题,本文主要研究如何在mac上获取开发使用的模拟器的资源以及模拟器中每个应用的应用沙盒.做过安卓开发的小伙伴肯定很方便就能像打开资源管理器一样查看我们写到手机本地或应用中的各种资源,但是在iOS开发 ...

  2. web-iPhone X

    题目: 解题思路: 第一次看到html里只有字其他啥也没有的题,一脸懵逼,学长提示抓包改包,于是开始我的苦逼解题. 0x01 抓包 0x02 改包 由于题目说只有iphoneX才能接受这个websit ...

  3. PHP+Redis 实例【二】页面缓存 新玩法

    今天算是认识到博客园里的审查团队多内幕了,哈哈,贴个图玩下. 气死宝宝了. 进入主题! 今天就不写什么功能性的了,换下口味说下关于页面级的缓存,应该怎么做. 相信有很多小伙伴查了百度,甚至google ...

  4. LogCook 一个简单实用的Android日志管理工具

    众所周知,日志的管理是软件系统很重要的一部分,千万不可忽略其重要性.完整的日志将会在系统维护中起着异常重要的作用,就好像磨刀不误砍柴工一样,日志就像对系统进行分析的工具,工具便捷了,对系统分析起来就能 ...

  5. Rsync同步、Rsync+Lsync实时同步

    Rsync同步.Rsync+Lsync实时同步 原创博文http://www.cnblogs.com/elvi/p/7658049.html #!/bin/sh #Myde by Elven @ #c ...

  6. 拆分字符and读取properties文件

    在方法里面建立properties对象 Properties pps = new Properties(); 调用.load()方法 pps.load(new FileInputStream(&quo ...

  7. mysql建表测试

    drop table if exists news; --如果存在表则删除create table news  --创建表(        id int unsigned not null auto_ ...

  8. 音频传输之Jitter Buffer设计与实现

    在语音通信中Jitter Buffer(下面简称JB)是接收侧一个非常重要的模块,它是决定音质的重要因素之一.一方面它会把收到的乱序的语音包排好序放在buffer里正确的位置上,另一方面它把接收到的语 ...

  9. SSM框架开发web项目系列（三） MyBatis之resultMap及关联映射

    前言 在上篇MyBatis基础篇中我们独立使用MyBatis构建了一个简单的数据库访问程序,可以实现单表的基本增删改查等操作,通过该实例我们可以初步了解MyBatis操作数据库需要的一些组成部分(配置 ...

  10. svn服务器的搭建与使用二

    转载出处 上一篇介绍了VisualSVN Server和TortoiseSVN的下载,安装,汉化.这篇介绍一下如何使用VisualSVN Server建立版本库,以及TortoiseSVN的使用. 首 ...