公司要求用Angular+Sequelize, 周末趁着一波有空, 竟然两天搞到半夜都还没搞定最简单的从一张数据库表里取几条数据, 展示成一个table. 吐血写一篇踩过的坑, 以及最后卡住的坑.
上来安装nodejs和angular, 没啥问题, 下载最新版安装一顿操作, 环境变量搞定. 然后ng new 命令建立了项目, 启动VS Code, 开搞!
写了个*ngFor循环输出了个table, ts代码写一个对象数组(hard code), 展示table无问题.
hard code的数组
ngFor循环输出一个table
table展示的样子
到目前为止, 信心满满.
然后加入sequelize, 这个带着光环, 哦不, github star最高的nodejs orm. 为了消除数据库各种配置的问题, 我先尝试了sqlite这个内存数据库. 然后new一个Sequelize连接看看? 随后就开始报一堆乱七八糟的错.
一. 第一个是编译错误: Can't resolve 各种各样的是什么鬼, 谷歌百度疯狂搜索, 哦哦原来这些各式各样的都是浏览器的东东... hm... 怎么解释呢, 就是这些对象是浏览器自带的, 不需要编译. (我是这么理解的.. 请大神补充).
编译错误, 一头雾水
那怎么解决呢, 就是往package.json里塞这么一堆东东. 也就是告诉angular (其实是webpack), 这些鬼东西是浏览器自带的, 别折腾!
二. 这回编译是没问题了, 咦? 怎么浏览器里啥也没了? 打开F12一看, 报错:
Buffer not defined?
这又是什么丧心病狂的错误? 特么一个Hello World级别的小网页, 我哪里用到Buffer了... 又是一顿疯狂搜索, 某大神说如下可以解决:
不知所云的fix ~~~
至此, 我已经totally lost, 这代码到底是干嘛? 幸运的是原来的错误是解决了. 到这里已经花了我1天多时间了...
三. 迫不及待, ng serve, 刷新页面, 怎么还是一片空白? F12里错误信息变了.
纳尼? 我明明安了sqlite3的lib啊, 搞妹啊. 大家懂得, 先是npm uninstall / npm install 来回折腾. 无果! 随即求助谷歌百度大神, 竟然发现NN多人碰到这类问题, 并在sequelize的support论坛上提交了问题. 每个帖子都是一番激烈讨论, 然后没一个简单高雅的解决方案.
看了差不多两小时的帖子, 尝试了npm rebuild无果, 把sqlites安装到global, 无果!
其实这问题的原因是因为sequelize的依赖项由于和webpack和angular的版本冲突, 反正就是没打包进去. 有人通过webpack的pkg解决了这问题. 写了一堆我不知道该放哪的代码.... 反正我到目前还没解决.
最后发个牢骚, angular的语法功能是挺好的, 但它的依赖项真的真的太多了... 新建一个angular网站项目, 完全是新建的哦, 居然有900多项依赖项. 900多项!!! 以前做java, maven里从来没超过100个依赖项吧.
最后想说, 经过2天折腾, 瞬间不爱了.... 哦不, 本来就没爱过.
