前言：
在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. 《java.util.concurrent 包源码阅读》17 信号量 Semaphore

    学过操作系统的朋友都知道信号量,在java.util.concurrent包中也有一个关于信号量的实现:Semaphore. 从代码实现的角度来说,信号量与锁很类似,可以看成是一个有限的共享锁,即只能 ...

  2. 计算生日是星期几-soj

    编写一个程序,只要输入年月日,就能回答那天是星期几. 输入一个日期,包括年.月.日.(一组测试数据) 输出这个日期是星期几. 输入: 1 1 1 2 1 1 2006 7 10 输出: Monday ...

  3. Java开发步骤

    3.编辑Java源程序 使用纯文本编辑器,比如记事本notpad.exe:EditPlus.UltraEdit等专业的纯文本编辑器. Word不是纯文本编辑器. 需求:写一个Java程序,在控制台打印 ...

  4. 巧-微信公众号-操作返回键问题-angularjs开发 SPA

    在解决这个问题之前,一直处在很苦逼的状态,因为 现在绝大多数 前端模块都是 SPA 模式:所以由此而来出了许多的问题,当然我现在提的这个只是其中一个: 说一下解决方案: 1.技术栈 angularjs ...

  5. pymysql 模块介绍

    pymysql模块是python与mysql进行交互的一个模块. pymysql模块的安装: pymysql模块的用法: import pymysql user=input('user>> ...

  6. WCF、WebAPI、WCFREST、WebService之间的区别和选择

    转载翻译,原文:http://www.dotnet-tricks.com/Tutorial/webapi/JI2X050413-Difference-between-WCF-and-Web-API-a ...

  7. .net程序员做的第一个安卓APP

    我从毕业之后一直做的是ASP.NET,从毕业到现在都已经五六个年头了.一个事物接触久了就会慢慢没有了新鲜感热情也褪去的差不多了,我又是对新事物比较感兴趣的,虽说Android早就不算什么新事物,当对于 ...

  8. codeforces #447 894A QAQ 894B Ralph And His Magic Field 894C Marco and GCD Sequence

    A.QAQ 题目大意:从给定的字符串中找出QAQ的个数,三个字母的位置可以不连续 思路:暴力求解,先找到A的位置,往前扫,往后扫寻找Q的个数q1,q2,然 后相乘得到q1*q2,这就是这个A能够找到的 ...

  9. CCF-201604-1-折点计数

    问题描述 试题编号: 201604-1 试题名称: 折点计数 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 给定n个整数表示一个商店连续n天的销售量.如果某天之前销售量在增长 ...

  10. CCF-201509-3-生成模板系统

    问题描述 试题编号: 201509-3 试题名称: 模板生成系统 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 成成最近在搭建一个网站,其中一些页面的部分内容来自数据库中不同 ...