How do I deploy Angular application on Heroku using ng cli? - heroku

Question

I have the following package.json :
{
"name": "app",
"version": "1.0.0",
"engines": {
"node": "11.13.0",
"npm": "6.9.0"
},
"scripts": {
"ng": "ng",
"start": "ng serve",
"build:prod": "npm run build -- --prod --aot",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
},
"devDependencies": {
"#angular/cli": "^8.0.2",
"typescript": "3.4.5",
...
}
...
}
and the following .gitlab-ci.yml:
before_script:
- echo "Execute scripts which are required to bootstrap the application. !"
after_script:
- echo "Clean up activity can be done here !."
# Cache modules in between jobs
cache:
key: ${CI_COMMIT_REF_SLUG}
paths:
- node_modules/
stages:
- deploy
deploy_staging:
stage: deploy
image: ruby:2.3
script:
- apt-get update -qy
- apt-get install -y ruby-dev
- gem install dpl
- dpl --provider=heroku --app=$HEROKU_APP_STAGING --api-key=$HEROKU_API_KEY
environment:
name: staging
url: https://$HEROKU_APP_STAGING.herokuapp.com
only:
- master
When I try to deploy my app on Heroku I got a success deployment but it fails when it launches the app :
sh: 1: ng: not found.
Is it possible/good to use ng on heroku ? What am i missing ?

Answer 1

In deploy_staging part of the .gitlab-ci.yml file, the image ruby:2.3 will be pulled which does not contain installed npm or angular-cli (So it can cause ng: not found error). It seems, you need to add a build stage to the .gitlab-ci.yml which is assigned for building Angular app and produce bundle files (The dist folder in home directory of the Angular app).For example, .gitlab-ci.yml file might look like this:
⋮
stages:
- build
- deploy
# New stage for building your Angular app
build_staging:
stage: build
image: trion/ng-cli
allow_failure: false
script:
- npm install
- ng build --prod
deploy_staging:
stage: deploy
image: ruby:2.3
when: on_success
dependencies:
- build
script:
- apt-get update -qy
- apt-get install -y ruby-dev
- gem install dpl
- dpl --provider=heroku --app=$HEROKU_APP_STAGING --api-key=$HEROKU_API_KEY
environment:
name: staging
url: https://$HEROKU_APP_STAGING.herokuapp.com
only:
- master
⋮