1. 前言 

最近学习ABP架构 搭建ASP.NET Core with Angular遇到了些问题,折腾了一个礼拜最终在今天解决了,想想这个过程的痛苦就想利用博客记录下来。其实一直想写博客,但因为  时间忙和惰性一直没有写。之前也遇到些问题,费了很大劲最后解决了,但过了好久又遇到类似问题,但想不起来之前怎么解决了,又一阵各种百度尝试解决了,所以写博客的好处就是记录下来。

2. 下载ASP.NET Core 2.x + Angular代码

先在ABP官网(https://aspnetboilerplate.com)下载了ASP.NET Core 2.x + Angular最新版

3. 后台编译运行

下载后按官方说明后台编译运行一切正常 

Introduction

The easiest way of starting a new project using ABP with ASP.NET Core with Angular is to create a template on templates page. Remember to check "Include module zero". After creating and downloading your project, follow below steps to run your application.

ASP.NET Core Application

    • Open your solution on Visual Studio 2017+ and build the solution.
    • Select the 'Web.Host' project as startup project.
    • Open Package Manager Console and run Update-Database command to create your database (ensure that Default project is selected as .EntityFrameworkCore in the Package Manager Console window).
    • Run the application. It will show swagger-ui if it is successfull:

4. angular项目运行 遇到错误

当跑angular项目的时候,一直跑不起来报错,开始以为是我电脑环境安装问题,一直卸载重装,什么node、typescript、angular/cli 重装了个遍,npm install安装是成功的,主要卡在npm start,到最后 一直报Error webpack的错,查找了很多资料,我想应该还是安装包的版本不对的问题。最后又找到官方文档,又按官方文档做了一遍还是不行,并对环境安装包的版本都核对了一遍是对的,但在文档里看到yarn的说明,于是点进去了解了一下

5. 问题诊断与解决

在错误信息里也出现yarn的不支持说明(中文官网:https://yarnpkg.com/zh-Hans/),肯定给这个yarn有关,于是就下载安装,但安装后命令一直无效,最后干脆重启电脑,电脑重启后命令可以用了,窃喜,于是又删除包进行npm install,再进行npm start,还是报错。于是又详细了解了一下yarn的说明和使用,找到了一篇说yarn和npm的区别的文章(http://web.jobbole.com/88459/)

安装的时候无法保证速度/一致性

安全问题,因为 npm 安装时允许运行代码

这是给npm对比重要的两点,这个一致性很重要,我怀疑就是我的环境安装包和作者的环境安装包不一致导致的,于是我查看了yarn的相关使用和语法,我先尝试了npm install,然后再yarn install,npm start发现还是报错,错误信息不一样了,最后又删除了node_modules目录,重新yarn install,npm start,运行成功了!!

6. 总结

通过这个问题解决的过程,让我了解到了yarn,就是如官网(https://yarnpkg.com/zh-Hans/)上说明的一样 快速、可靠、安全的依赖管理。可靠使你在不同的电脑安装依赖包的环境一致,我正是因为和作者安装包的依赖项环境不一致导致一直运行不成功,环境不一致往往是因为一些包的升级后npm安装包不精准导致的问题。

同时,遇到问题要坚持去解决、遇到新技术要先去了解,还要养成写博客的习惯,遇到问题记录下来。

学习ABP ASP.NET Core with Angular 环境问题的更多相关文章

  1. 从零开始一个个人博客 by asp.net core and angular(一)

    这是一个个人叙述自己建设博客的帖子,既然是第一篇那肯定是不牵扯代码了,主要讲一下大体的东西,微软最新的web框架应该就数asp.net core 3.1了这是一个长期支持版,而且是跨平台又开源版本,所 ...

  2. 52ABP模板 ASP.Net Core 与 Angular的开源实例项目

    阅读文本大概需要 5 分钟. 开始之前 自从上一篇文章".NET:持续进化的统一开发平台"发布后,已经有三个月的时间没有写过文章了. 这段时间,做了两场线下活动,一场在上海,一场在 ...

  3. 运行ABP(asp.net core 3.X+Vue)提示'OFFSET' 附近有语法错误。 在 FETCH 语句中选项 NEXT 的用法无效。

    创建ASP.NET Boilerplate,还原数据库和启动客户端 这里就略过,具体参考 ABP框架(asp.net core 2.X+Vue)模板项目学习之路(一) ASP.NET Boilerpl ...

  4. 主厨(第4部分)- ASP. netNET Core和Angular 2 CRUD SPA

    下载source - 79.7 KB 介绍 在Master Chef(第1部分)和Master Chef(第2部分)中,我介绍了如何使用ASP.Net Core和Angular JS.在Master ...

  5. ASP.NET Core和Angular 2双剑合璧

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:两个还没有正式发布的东西一起用,是什么效果? 效果当然会很好了(我猜的),那么如何在A ...

  6. 从零开始一个个人博客 by asp.net core and angular(三)

    这是第三篇了,第一篇只是介绍,第二篇介绍了api项目的运行和启动,如果api项目没什么问题了,调试都正常了,那基本上就没什么事了,由于这一篇是讲前端项目的,所以需要运行angular项目了,由于前端项 ...

  7. .Net Core 学习 (1) - ASP.NET Core 总览

    什么是ASP.NET 1.0 开源 - GitHub 跨平台 - 支持Windows, Mac, Linux 从底层进行了优化 - 使用最小开销的模块化组件 - 给与了开发人员很大的灵活性 为什么要使 ...

  8. 酷学习笔记——ASP.NET Core 简介

    ASP.NET Core 简介 其实就是说酷好,不好好学,不学好,没饭吃. 新词汇:IoT,Internet of Things,网联网,微软物联网英文网站.微软物联网中文网站

  9. (入门整理学习一)Asp.net core

    1.安装.net code SDK,vs Code;vs code c#插件可在软件扩展 (我网盘有)  vs2015上安装教程:http://www.cnblogs.com/wangrudong00 ...

随机推荐

  1. 快速拥有各种数据访问SqlHelper

    常加班食不按时,偶得清闲嘴溃疡. 美食一顿成泡汤,自此自认忙命人. 这就是此情此景的我,回来聊代码. 列举ADO.NET中的五个主要对象,并简单描述? 答:Connection连接对象,Command ...

  2. java八大基本数据类型

    java中八大数据类型的储存空间以及使用场景表示如下 )1.int:4字节,可以表示的数为-2^31 - 2^31-1.整数的默认类型.封装类也如此 .整数相除的时候,会舍弃小数部分.结果也是整数,例 ...

  3. markdown 字体颜色

     Markdown是一种可以使用普通文本编辑器编写的标记语言,通过类似HTML的标记语法,它可以使普通文本内容具有一定的格式.但是它本身是不支持修改字体.字号与颜色等功能的!   CSDN-markd ...

  4. 使用sklearn进行数据挖掘-房价预测(3)—绘制数据的分布

    使用sklearn进行数据挖掘系列文章: 1.使用sklearn进行数据挖掘-房价预测(1) 2.使用sklearn进行数据挖掘-房价预测(2)-划分测试集 3.使用sklearn进行数据挖掘-房价预 ...

  5. Http简单思维导图

  6. 如何清除PHP中不需要的Layout模板

    最简单的办法就是在需要清除的静态页的最前端加上   {__NOLAYOUT__}  就可以清除所有的layout效果, 继而设置自己的css.js效果.

  7. iscroll遇到的两个坑

    最近移动端闪付遇到的两个坑做下总结: 1.使用iscroll后,滑动并没有生效 解决方案: 首先要查看:结构是否正确: <div id="wrapper">   //w ...

  8. Axios 执行post发送两次请求的小坑

    vue-resource2.0已经不再更新,所以vue2.0官方推荐使用axios来代替.实际项目也是应用上了vue+axios,然后就有了这么一段填坑的经历. 问题:axios使用post请求时,发 ...

  9. H5页面项目的思路整理

    这是H5项目完成后的一些整理,有些理解不能非常准确,希望大家能帮忙指出. 移动端的适配 一些名词解释 visual viewport 可视视图 layout viewport 布局视图 vm 可视视图 ...

  10. linux内核模块编程实例

    linux内核模块编程实例 学号:201400814125 班级:计科141 姓名:刘建伟 1.确定本机虚拟机中的Ubuntu下Linux的版本 通过使用命令uname -a/uname -r/una ...