CODEWITHSUNDEEP
angulargithub-pages
Sahil Kkr
Sahil Kkr

Reputation: 195

Not able to deploy Angular7 app on github pages

Github Repo:- UI-asset-Agm.

ProjectName:- UI-assets I am running the following commands to deploy angular app on github pages

ng build --prod --base-href "https://skatia.github.io/UI-asset-Agm"



   ngh or 
     npx ngh --dir=dist/UI-assets

But when I go to 

 https://skatia.github.io/UI-asset-Agm/ or 
https://skatia.github.io/UI-assets/

it says site not found

dist/UI-assets/index.html is

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>UIAssets</title>
  <base href="https://skatia.github.io/UI-asset-Agm">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://unpkg.com/tachyons@4/css/tachyons.min.css">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<link rel="stylesheet" href="styles.491137759dd7a3a3a7e2.css"></head>
<body>
  <app-root></app-root>
<script type="text/javascript" src="runtime.ec2944dd8b20ec099bf3.js"></script><script type="text/javascript" src="polyfills.1ef83d22ada557f4a131.js"></script><script type="text/javascript" src="main.ca0a7471bf0fe9d8f66d.js"></script></body>
</html>

Upvotes: 0

Views: 670

Answers (1)

Felix Lemke
Felix Lemke

Reputation: 6488

Assuming you have got an empty git repository named ui-asset-agm for your github account named skatia, and a working Angular 6+ project (ng build --prod runs without errors) the following should work for you.

Setting up Angular

In your angular.json add (or update) the following rules to your configurations/production entry

"production": {
  ...
  "baseHref": "/"
  "deployUrl": "https://skatia.github.io/ui-asset-agm"
}

also change the outputPath in the same file to docs (it is dist by default). Build with

ng build --prod

After doing so there should be a folder called /docs with your successfully built angular application. If not, there are some issues with your Angular project.

Pushing to github

Add your github repository as remote

git remote add origin https://github.com/skatia/ui-asset-agm

and push it to github with

git push -u origin master

In github go to the repos settings and select something like "use github pages with master/docs folder". Your page will then be available under

https://skatia.github.io/ui-asset-agm

It takes some time for the site to be published, in my experience approximately one or two minute(s).

Upvotes: 2

Related Questions