user1807337
user1807337

Reputation: 1050

Angular 4 app works on local but does not load in Github

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.

Upvotes: 3

Views: 1104

Answers (1)

Rahul Singh
Rahul Singh

Reputation: 19622

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

ng build --prod

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

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 -- 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 -- 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 .

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

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 Repository - https://github.com/rahulrsingh09/Deployment

Upvotes: 3

Related Questions