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. 【魅族Pro7】——BootStrap/JQuery/Canvas/PHP/MySQL/Ajax爬坑之项目总结(一)

    前言:这个项目是我们小组团体合作完成的学习项目,项目使用魅族GUI设计和图片素材,响应式重构Pro7官网的首页.子页.商城及购物车,并加入一些创新.我主要负责的是[画屏子页]的项目,这里作为温故知新, ...

  2. 迷宫问题-POJ 3984

    迷宫问题 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 24348   Accepted: 14206 Descriptio ...

  3. 自动化运维工具——ansible详解(一)

    ansible 简介 ansible 是什么? ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.chef.func.fabric)的优点,实现了批量系统 ...

  4. Linux 链接详解(2)

    可执行文件加载执行过程: 上一节我们说到ELF文件格式,静态库的符号解析和重定位的内容.这一节我们来分析一下可执行文件. 由上一节我们知道可执行文件也是ELF文件,当程序被加载器加载到内存时是按照EL ...

  5. RHCE之配置autofs远程挂载远程服务器的家目录

    [root@server0 ~]# yum -y install autofs              安装包 [root@server0 ~]# vim /etc/auto.master      ...

  6. unity中调用其他脚本函数的方法(小白之路)

    第一种,被调用脚本函数为static类型,调用时直接用  脚本名.函数名().很不实用-- 第二种,GameObject.Find("脚本所在物体名").SendMessage(& ...

  7. 用shell制作IP脚本

    vim  ip.sh #!/bin/bashread -p "eth:" eread -p "ip:" ip1read -p "netmask:&qu ...

  8. 是否是有效的dom节点--轮子代码

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...

  9. Material使用01 侧边栏MdSidenavModule、工具栏MdTollbarModule

    前提准备: 构建好一个Angular2应用 熟悉CSS的flex布局风格 1 利用flex进行布局 1.1 创建三个组件 app-header app-main app-footer 1.2 在主组件 ...

  10. Effective Java 第三版——1. 考虑使用静态工厂方法替代构造方法

    Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...