首先在全球范围内安装angular-cli-ghpages

Question

我已经通过角度CLI将我的angular 2项目部署到我的github用户页面。我尝试了official angular 2 cli page的步骤。但是当我尝试访问github url时，它会显示自述文件的内容。用户页面和user-page / baseUrl都是一样的。

我使用过在本地环境中工作的路由。我不确定是否应该修改生产环境变量或baseUrl。

Answer 1

你应该在你的仓库的主分支中提交由ng build生成的dist /文件夹。我可以看到你在那里提交了你的角度源代码。不幸的是，您无法将源代码保存在主分支中。

使用ngh的完整提交命令将是ng build --prod --base-href="YOUR_GITHUB_USER_NAME.github.io"
然后是ngh --message="MESSAGE" --branch="master"

我已在我的回购中发布了相同内容，您可以查看my website

此外，源代码仓库为this

Answer 2

步骤1：

首先在全局范围内安装angular-cli-ghpages

$ npm install -g angular-cli-ghpages

构建您的项目并设置正确的基本href位置：

ng build --prod --base-href="https://user-name.github.io/repo/"

然后：

$ ngh

第2步：在github.com中->转到您的repp->设置->选择gh-pages分支发布==>保存

第3步：您需要在终端中运行 ng服务器才能启动本地项目。

Answer 3

因为您正在使用 username.github.io 格式的用户/组织存储库，所以github会自动发布您的主分支，也使用自述文件文件作为索引。

如果您要发布 gh-pages 分支，则需要进入存储库设置并更改github中的源分支页面标签为 gh-pages

Answer 4

使用GitHub页面部署Angular

npm install -g angular-cli-ghpages

带有--base-href的Angular CLI

ng build --prod --base-href="https://<user-name>.github.io/<repo>/"

ngh

试试git 你会满意的

Answer 5

当您安装npm install -g angular-cli-ghpages时github在存储库中创建了gh-pages分支时，您只需选择该gh-pages分支选项

转到您的repp→设置→GitHub Pages＆rarrl选择gh-pages分支

Answer 6

1。创建Github存储库

如果您之前未创建过Github存储库，请继续在您的Github帐户中创建一个仓库。创建存储库后，提交所有更改并将其推送到您创建的存储库中。

如果您在此之前创建了您的存储库，请同时提交所有更改并将其推送到Github存储库中。

2。安装angular-cli-ghpages

运行：

$ npm i angular-cli-ghpages --save-dev

如果您尚未安装angular-cli-ghpages。

3。运行构建

运行：

$ ng build --prod --base-href "https://GithubUserName.github.io/GithubRepoName/"

4。部署到gh页

运行：

$ npx angular-cli-ghpages --dir=dist/Project-name

确保将项目名称放在Project-name的位置。可以在 defaultProject 下的 angular.json 文件中找到它。文件的底部。

现在，如果您访问 https://GithubUserName.github.io/GithubRepoName/ ，您应该会看到您的应用程序正在远程运行，这意味着它已成功在gh页上发布。

Answer 7

4年后，我现在使用的是角度11，但遇到了同样的问题。要解决它：

运行ng build --prod --output-path docs --base-href /<project_name>/ 执行此代码后，应存在“ docs”文件夹。
您应提交并将此文件夹推送到github存储库。
在github repo页面上，转到设置并向下滚动到Github页面，然后选择您按下/ docs文件夹的分支，然后选择文件夹/ docs并单击“保存”按钮。
要进行检查，请单击Github Pages部分的URL。

我做了同样的事情，但是当我单击URL时，我以一种有趣的方式看到了空白页，并且打开了开发人员工具，并且发现CSS和JS的请求地址是错误的。

就像https：//.github.io/ [项目名称] /scripts.7d5 ... 00b7.js 由于URL中的项目名称，这是错误的。应该是回购名称，而不是项目名称（我的回购和项目名称不相同）

因此，我更改了ng build --prod --output-path docs --base-href /<repo_name>/这样的构建代码，然后再次执行上述步骤。

最后它有效。