如何用Angular搭建githubPages或码云page

[deepthan]

1. 管理github仓库

在github上建立一个仓库，并且在本地新建一个ng的项目并关联起来。

2. 设置静态资源路径

下载angular-cli-ghpages用于提交Angular包

 npm i -g angular-cli-ghpages

在本地项目

ng build --prod --base-href “ https://USERNAME.github.io/REPOSITORY/ ”
或
ng build --prod --base-href 

3. 提交

ngh

4. github/码云配置

github：

graph LR
进入仓库 --> setting
setting--> GitHub&nbspPages
GitHub&nbspPages-->Source
Source-->gh-page&nbspbranch

gitee(码云):

graph LR
进入仓库 --> 管理
管理--> 默认分支
默认分支-->gn-pages

graph LR
进入仓库 --> 服务
服务--> Pages
Pages-->部署

访问地址

https://用户名.github.io/仓库名/
https://用户名.gitee.io/仓库名/

码云

https://deepthan.gitee.io/poetry/
https://deepthan.gitee.io/angular-demo/home

github仓库

https://github.com/deepthan/poetry/tree/gh-pages

githubpage 和 码云page区别

githubpage build的时候需要设置basehref

ng build --prod --aot --base-href “ https://USERNAME.github.io/REPOSITORY/ ” 

而后者默认是以仓库为基础路径不需要设置basehref.

参考地址

// 提交Angular应用到github page
https://github.com/angular-schule/angular-cli-ghpages

// 建立教程
https://jeneser.github.io/blog/2017/08/08/angular-deploying-app-github-pages/

遇到的问题

1. EPERM: operation not permitted, unlink ....

C:\Program Files\nodejs\node_global\node_modules\angular-cli-ghpages\node_modules\rimraf\rimraf.js:196
      throw er
      ^

Error: EPERM: operation not permitted, unlink 'C:\Program Files\nodejs\node_global\node_modules\angular-cli-ghpages\node_modules\gh-pages\.cache\.git\COMMIT_EDITMSG'
    at Object.fs.unlinkSync (fs.js:1080:18)
    at rimrafSync (C:\Program Files\nodejs\node_global\node_modules\angular-cli-ghpages\node_modules\rimraf\rimraf.js:306:17)
    at C:\Program Files\nodejs\node_global\node_modules\angular-cli-ghpages\node_modules\rimraf\rimraf.js:342:5
    at Array.forEach (native)
    at rmkidsSync (C:\Program Files\nodejs\node_global\node_modules\angular-cli-ghpages\node_modules\rimraf\rimraf.js:341:26)
    at rmdirSync (C:\Program Files\nodejs\node_global\node_modules\angular-cli-ghpages\node_modules\rimraf\rimraf.js:334:7)
    at rimrafSync (C:\Program Files\nodejs\node_global\node_modules\angular-cli-ghpages\node_modules\rimraf\rimraf.js:304:9)
    at C:\Program Files\nodejs\node_global\node_modules\angular-cli-ghpages\node_modules\rimraf\rimraf.js:342:5
    at Array.forEach (native)
    at rmkidsSync (C:\Program Files\nodejs\node_global\node_modules\angular-cli-ghpages\node_modules\rimraf\rimraf.js:341:26)

重新build或者全部打开的编辑器关了再开重新ngh即可.