Angular deployment on Gitlab CI not working properly

Question

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/[email protected]
    - npm install
    - ng build --prod
    - mkdir public
    - mv dist/neural-fuse/* public
  artifacts:
    paths:
      - public

  only:
  - develop

I might just not be getting how Angular Builds work. Or gitlab artifacts — ferran
– ferran, Commented Aug 7, 2020 at 12:10
I cloned your project and launched it on local machine. It was working well. But when I checked browser console of your page, I saw some error which may have been the cause of page loading failure. But since you mentioned that deployment on Netlify was successful, there may be a problem with GitLab Pages. I found some issues: 1 and 2 — Amir Dadkhah
– Amir Dadkhah, Commented Aug 7, 2020 at 19:21
@AmirMohammadDadkhah I didn't thing about checking the console errors on the website 😅, I'll be checking that links, thanks for your help. — ferran
– ferran, Commented Aug 8, 2020 at 11:36

Dragomir · Accepted Answer · 2020-09-14 19:11:02Z

1

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/[email protected]
    - npm install
    - ng build --prod --base-href /neural-fuse/
    - mkdir public
    - mv dist/neural-fuse/* public
  artifacts:
    paths:
      - public

  only:
  - develop

answered Sep 14, 2020 at 19:11

Dragomir

238 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

edjm Over a year ago

How does GitLab know the command 'ng'? All attempts that I have tried for the past 2 days it will not execute and I am using exactly what you have posted up to the 'ng build ...'

ferran Over a year ago

@edjm it is suposed to work because you installed angular cli before. It's a problem I've not tried to solve this problem. I only know how to deploy plain html at the moment.

Collectives™ on Stack Overflow

Angular deployment on Gitlab CI not working properly

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related