1

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 !

FloranePlo
  • 59
  • 8

1 Answers1

0

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/
FloranePlo
  • 59
  • 8
  • If this is the solution please mark it as such with the greyed out check mark. To be sure that it is selected, click it once and it should be green. –  Sep 14 '21 at 23:47
  • thank you, but I need to wait two days for that apparently =) – FloranePlo Sep 15 '21 at 00:32
  • I've tried this, and got the base href correctly in the main html file, but still the code is trying to access assets from the root path. For example, the base href is defined as "/myfolder/" (and so it the html tag, but the code is trying to access the assets like "/assets/...", and obviously they are not found like that... what am I missing?? – TheCuBeMan Sep 11 '22 at 17:18
  • that could be a problem in the configuration of your ng build. Are the assets also in your output file when you make a build ? are they in the same configuration ? To be clearer, if you try your build command locally, are your assets in your output file in the same relative path as they are in your src ? if not, check your angular.json config file, you can specify "assets":["all/your/*/**", "assets/here.png"] for example – FloranePlo Sep 12 '22 at 20:16