独家*记录一次ionic在线编译的坑

初衷

做ionic时非常大的问题， 那就是准备将app发布到app store时， app store/google play store对app的审查非常严格，像我这样设计根本不注意的开发，只有被劝退的份。 那么如果要测试的时候，如果能够把app编译到web上，测试起来既方便， 最早的版本还可以在线传播出去，一举两得~

缺陷

这样的做法并非是完美的替代方案。因为在线编译的app， 没有办法调用Cordova，所以一切原生接口都会失效。我这次在线编译的目的是测试，因此没有关系。

方案1（失败）

国内的论坛基本上没有在线编译ionic的例子， 毕竟本身就是小众的框架。
那么我想到的第一个方案是用heroku打包编译， 因为heroku支持angular

首先要安装heroku toolbelt命令行工具(Heroku CLI)，安装完成后在cmd测试heroku， 出现：

usage：heroku COMMAND

成功。

然后，我们把app传到git上

git init

git add .

git commit -am "Initial commit"

然后连接heroku：

heroku login
heroku create
heroku git:remote -a guarded-basin-65910
git push heroku master

然后打开发现报错：

ng not found

ng 应该是包含在ionic和angular的开发环境里的， 这里报错说明heroku并没有帮我们准备好angular/ionic的环境

这里搜索到的大多数方法，都是说，要在build前，安装好一些特定的包，比如typescript 和 ionic/app-script，
但是尝试了之后，本地运行也会报错， 尝试解决很长时间以后，放弃方案。希望解决了问题的小伙伴可以联系我，+weixin: xxxx123147

方案2（成功）

方案2是把app上传到github的pages上面
首先上传好app，在settings中启用github page
到这里，github page就会准备好链接， 可以把app publish上去

这里需要踩几个坑
首先检测一下是否已经连接到项目：(以下名字都会用app代替)

git remote -v

然后这里注意， 先设置好credential ，否则会无法识别用户

git config --global credential.helper wincred

然后安装angular-cli-ghpages

npm i --save angular-cli-pages

到angular.json里确认defaultproject name是不是和github一致：

“defaultProject”：“app”

然后确认，src/index.html中 base href是不是指向 /app/

然后编译到git page

npm run ng build --prod --output-path app --base-href "https://.github.io/app/"

然后最后用angular graph发布app，这里需要注意，angular graph dir默认地址是angular的dist
ionic需要改成www

npx ngh --dir=www

编译成功， 发布成功

后记

注意的点是， 测试过程中， 后端要部署到https的服务器上， 否则会被GitHub page 拦截
我的微信：xxxx123147, 欢迎小伙伴们来一起交流