GitLab Pages relative URL definition is wrong when resolving files import (src="scripts.js") in index.html (Angular)

I deployed my website built using Angular to GitLab pages (which work on my personal Docker deployment)

The build worked and the page was deployed, but, when going to the deployed website, I reached a blank page and the following error message in the console: The resource from “https://data2services.gitlab.io/styles.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

The problem is that GitLab is considering https://data2services.gitlab.io/ as the root URL when it it https://data2services.gitlab.io/into-the-graph

The file is not accessible at https://data2services.gitlab.io/styles.js, but at https://data2services.gitlab.io/into-the-graph/styles.js (which make sense)

Here is the .gitlab-ci.yml file I am using:

image: node:8.10.0

pages:
  cache:
    paths:
    - node_modules/
  stage: deploy
  script:
  - npm install -g @angular/cli@7.3.8
  - npm install
  - ng build
  - mv dist/into-the-graph public
  artifacts:
    paths:
    - public
  only:
  - master

This is the content of the index.html taken out from the GitLab pipeline build artifact:

<body >
  <app-root ></app-root>
<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="es2015-polyfills.js" nomodule></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="scripts.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script></body>
</html>

I set the target GitLab Page URL in Angular config: environment.prod.ts. But I don't use it anywhere, so I don't think it changes anything.

Relative paths are used by index.html, so I really don't see what I can do to resolve this issue on my side.

Do you have any idea why is the root path used by the application on GitLab server (only) is wrong? If this is the case for this simple index.html file, then no website doing relative imports should work on GitLab pages (which doesn't seems the case ;) ).

Or is there a parameter to provide when building with angular to fix the relative paths?

Solution

From #244 (comment 412452240)

We need to adjust our ng build command in out ci/cd configuration and add a parameter to set the root of our application.

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-name/
  - mkdir public
  - mv prod/my-project-name/* public/
  artifacts:
    paths:
    - public
  only:
  - master
Edited by Jaime Martinez