Hosting my static Angular site on Gitlab Pages isn't working

GitLab CI/CD
1

I’m trying to host my static Angular site on Gitlab Pages, but when I try to navigate to the site, it loads a blank page, which does not happen when I serve it locally. I’m following the instructions on the Angular docs here https://angular.io/start/start-deployment, which says that the static files are located here: dist/my-project-name.

Here is my Gitlab CI (which passes):

image: node:latest

pages:
  cache:
    paths:
    - node_modules/

  stage: deploy
  script:
  - npm install -g @angular/cli@9.1.8
  - npm install
  - ng build --prod
  - mkdir public
  - mv dist/my-website/* public/
  artifacts:
    paths:
    - public
  only:
  - master

Does anyone happen to know why my Angular site isn’t appearing as intended?

1 Like
2

Hi @PhantomTriforce, welcome to the forum!

Have you tried downloading the artifacts from the job? That should have just 1 folder named public in it. I’m wondering if your mv command is causing a directory structure that is like public/public whereas GitLab pages is expecting just public

1 Like
3

Hi @olearycrew, thanks for the welcome.

I downloaded the artifacts like you suggested, but the structure looks as intended (artifacts -> public -> assets and rest of my files).

Also just to see if I was doing anything wrong, I tested hosting a simple HTML file (not Angular) which worked fine, indicating my process was right and the bug I’m running into is Angular specific.

Any additional thoughts are welcome!

1 Like
4

Hi! Same exact problem here, if you’ve found a solution I’d be glad to know it :blush:
In case not, I’ll answer when I know it.

1 Like
5

Hey, I have not been able to solve this yet. Let me know if you do!

1 Like
6

Gitlab pages deploys your application to your-username.gitlab.io/your-project/. Angular expects the application to be deployed at root level, which would be your-username.gitlab.io/ and since that’s not where your files would go, we have a problem. We need to adjust our ng build command in out the ci/cd configuration and add a parameter to set the root level of our application.
Here’s a sample yaml file to check out. I think it should work for you. Things to look for:

  • Replace my-project with your project name.
  • Adjust node version (e.g. image: node:13.0.1 and @angular/cli version accordingly if needed.
image: node:latest

pages:
  cache:
    paths:
    - node_modules/

  stage: deploy
  script:
  - npm install -g @angular/cli@10.1.1
  - npm install
  - ng build --prod --base-href /my-project/
  - mkdir public
  - mv prod/my-project/* public/
  artifacts:
    paths:
    - public
  only:
  - master

For further reading on why and how this works, I suggest checking out Deployment page on Angular docs.

7

Hi,
If you create an application with : ng new app
This gitlab-ci.yml works :

image: node:12.18.4
pages:
  cache:
    paths:
      - node_modules/
  script:
    - npm install -g @angular/cli@10.2.0
    - npm install
    - ng build --prod --base-href /app/
    - mkdir -p public
    - mv dist/app/* public/
  artifacts:
    paths:
      - public
1 Like