Angular 4应用程序可在本地运行，但无法在Github中加载 [英] Angular 4 app works on local but does not load in Github

问题描述

这是我首次尝试创建angular 4应用程序.我创建了一个非常简单的angular 4应用程序.它在我的本地上正确加载，但是当我部署到github时，只有index.html加载.组件文件没有绑定.我尝试过的事情-确保已将docs文件夹映射到github.我尝试部署dist文件夹而不是源代码.我尝试将base-href值更改为."，"/"，".这是我页面的链接: https://itsy-bitsy.github.io/adventures/，我的仓库是 https://github.com/itsy-bitsy/adventures .我一直在努力将它发布几天，并且没有任何想法.我将非常感谢任何对我可能做错事的见解.

This my first attempt at creating an angular 4 application. I have created a very simple angular 4 app. It loads correctly on my local but when I deploy to github, only the index.html loads. The component files are not binding. Things that I have tried - Ensured I have mapped the docs folder to github. I have tried deploying the dist folder instead of source. I have tried changed the base-href value to ".", "/", " ". This is the link to my page: https://itsy-bitsy.github.io/adventures/ and my repo is https://github.com/itsy-bitsy/adventures. I have been trying to get it published for a few days now and out of ideas. I will really appreciate any insight on what I could be doing wrong.

推荐答案

请确保进行构建以将必要的文件保存到dist中.

Make sure to do a build to get the necessary files into dist .

ng build --prod

首先从应用程序的Dist文件夹中获取所有相关文件

First get all relevant the files from the Dist Folder of your application

对我来说，这是资产文件夹main.bundle.js polyfills.bundle.js vendor.bundle.js中的css文件

for me it was the css files in the assets folder main.bundle.js polyfills.bundle.js vendor.bundle.js

然后将此文件推送到您创建的存储库中.

Then push this files in the repo which you have created.

1-如果希望应用程序在根目录上运行，请创建一个名称为[yourgithubusername] .github.io的特殊存储库，并将这些文件推送到master分支中

1 -- If you want the application to run on the root directory - create a special repo with the name [yourgithubusername].github.io and opush these files in the master branch

2-好像您要在除根目录以外的其他分支的子目录中创建这些页面一样，创建一个分支gh-pages并将这些文件推送到该分支中.

2 -- Where as if you want to create these page in the sub directory of in a different brach other than than the root , create a branch gh-pages and push these files in that branch.

在两种情况下，我们访问这些已部署页面的方式都会有所不同.

In both the cases the way we access these deployed pages will be different .

对于第一种情况，它将为 https://[yourgithubusername] .github.io 和对于第二种情况，它将是[yourgithubusername] .github.io/[Repo name].

For the First Case it will be https://[yourgithubusername].github.io and for the second case it will be [yourgithubusername].github.io/[Repo name].

如果假设要使用第二种情况进行部署，请确保更改dist中index.html文件的基本URL，因为所有路由映射都取决于您提供的路径，并且应将其设置为[/branchname ].

If Suppose you want to deploy it using the second case make sure to change the base url pf the index.html file in the dist as all the route mappings depend on the path you give and it should be set to [/branchname].

Github存储库- https://github.com/rahulrsingh09/Deployment

Github Repository - https://github.com/rahulrsingh09/Deployment

这篇关于Angular 4应用程序可在本地运行，但无法在Github中加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！