CODEWITHSUNDEEP
angulardeploymentgitlabgitlab-ciangular9
ferran
ferran

Reputation: 108

Angular deployment on Gitlab CI not working properly

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

Upvotes: 2

Views: 1752

Answers (1)

Dragomir
Dragomir

Reputation: 23

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

Upvotes: 1

Related Questions