javascriptangulargitlabgitlab-pages

path problems when deploying angular app in Gitlab pages


I am currently testing an angular app/java microservices backend, and I deployed the front on Gitlab Pages.

The gitlab-ci.yml is pretty simple so far, as I'm just testing the architecture :

cache:
  paths:
    - node_modules/

stages:
  - staging
  
pages:
  image: node:latest
  stage: staging
  script:
    - npm install -g @angular/cli@11.0.1
    - npm install
    - ng build --prod
  artifacts:
    paths:
    - public

I changed the angular.json to output public/ instead of dist/. The site deploys well on the adress https://myaccount.gitlab.io/repository-name but only the index.html works.

The reason being, all the href inside are somehow wrong :

<script src="runtime.0e49e2b53282f40c8925.js" defer></script>
<script src="polyfills.e6e62ba5ee83d54cee93.js" defer></script>
<script src="main.26f4db6ed1e6241cbf51.js" defer></script>

The href point to https://myaccount.gitlab.io/runtime.0e49e2b53282f40c8925.js instead of https://myaccount.gitlab.io/repository-name/runtime.0e49e2b53282f40c8925.js, so all my refs throw 404 errors

Does anyone know why it's that way, and how to fix it ? thanks a lot !


Solution

  • Well sorry for the inconvenience, I found a very simple answer to my own problem, so I'll post it here in case someone needs it.

    it's possible to simply change the base-href of an angular build with

    --base-href /your-path/
    

    So I just changed my ng build like this :

    - ng build --prod --base-href /croquis-time-client/