Angular deployment on Gitlab CI not working properly

user_11730005 0
Viewed 1017

I'm developing a webpage on Angular 9.1.9 and deploying on Gitlab Pages. I've managed to deploy it but the Angular Build seems not to show on the page but the build code is uploaded.

We just gave up and deployed it on netlify, and it works, but we want to learn to make it work on Gitlab

Here is the repository with all the code: https://gitlab.com/neural-fuse/neural-fuse/-/tree/develop

Here is the deployment and the Angular Build (in the browse button); and the .gitlab-ci.yml code:

image: node:13.0.1 

pages:
  cache:
    paths:
    - node_modules/
  stage: deploy
  script:
    - npm install -g @angular/cli@9.1.9
    - npm install
    - ng build --prod
    - mkdir public
    - mv dist/neural-fuse/* public
  artifacts:
    paths:
      - public

  only:
  - develop
angular9 gitlab angular gitlab-ci deployment
1 Answers

What you missed here is - ng build --prod --base-href /neural-fuse/ instead of - ng build --prod

In gitlab, your project goes to gitlab pages on yourusername.gitlab.io/yourprojectname/. Angular expects to be deployed (learn more in the docs) at root level (i.e. without the 'yourprojectname/' at the back). So we need to set it to work on 'yourprojectname/' base.

Finally, keeping the node version, the @angular/cli version and the branch you stated in the OP, the yml should look like this:

image: node:13.0.1 

pages:
  cache:
    paths:
    - node_modules/
  stage: deploy
  script:
    - npm install -g @angular/cli@9.1.9
    - npm install
    - ng build --prod --base-href /neural-fuse/
    - mkdir public
    - mv dist/neural-fuse/* public
  artifacts:
    paths:
      - public

  only:
  - develop
user_116550540
Related