javascript - Deploying Angular App using the Gitlab CI causes an error in the tmp directory

Question

Good Evening, I am trying to deploy my Angular app to Heroku via the Gitlab CI. I have an API key saved in the environment file that is in Angular. I am creating the folder and file in my Gitlab CI, but I am getting the below errors:

src/main.ts:5:29 - error TS2307: Cannot find module './environments/environment' or its corresponding type declarations. 5 import { environment } from './environments/environment';

Error: "An unhandled exception occurred: The /tmp/build_eef7fc3b/src/environments/environment.prod.ts path in file replacements does not exist. See "/tmp/ng-V6VwXu/angular-errors.log" for further details."

From the Gitlab output: "$ ls -ld "$TP/"* -rw-r--r--. 1 root root 103 Jan 15 00:38 ./src/environments/environment.prod.ts -rw-r--r--. 1 root root 104 Jan 15 00:38 ./src/environments/environment.ts"

It seems as though that Gitlab went from the directory that I want to a tmp folder. I am not sure how to access that particular folder or why its changing. I have my .yml file below as well. Thank you for your time and help.

# For the testing stage you must include all those lines so the tests run and finish. If  ng test doesnt have the flags that come after it, it will hang on that stage.

image: node:latest

before_script:
    - apt-get update -qy
    - apt-get install -y ruby-dev
    - gem install dpl

stages:
    - production




production:
    type: deploy
    stage: production
    image: ruby:latest
    script:
        - pwd
        - (which ifconfig) || apt install net-tools
        - ifconfig
        - (which dig) || apt install dnsutils
        - dig +short myip.opendns.com @resolver1.opendns.com
        - TP=./src/environments
        - TF="$TP/environment.ts"
        - PE="$TP/environment.prod.ts"
        - echo "$PE"
        - mkdir -p "$TP"
        - realpath "$PE"
        - echo "$TF"
        - printf "export const environment = { 
 production:false,
 youtube:'%s' 
};
" "$youtube" > "$TF"
        - printf "export const environment = { 
 production:true,
 youtube:'%s' 
};
" "$youtube" > "$PE"
        - cat "$TF"
        - cat "$PE"
        - ls -ld "$TP/"*
        - ls -ld /tmp/*
        - dpl --provider=heroku --app=$HEROKU_APP_PRODUCTION --api-key=$HEROKU_API_KEY
    only:
        - master

        #- pwd  
        #- find .
        #- TP=./src/environments
        #- TF="$TP/environment"
        #- PE="$TP/environment.prod.ts"
       # - mkdir -p "$TP"
        #- printf "export const environment = { 
 production:false,
 youtube:'%s' 
};
" "$youtube" > "$TF"
        #- printf "export const environment = { 
 production:true,
 youtube:'%s' 
};
" "$youtube" > "$PE"
        #- cat "$TF"
       # - cat "$PE"
       # - cp "$TF" "$TF".ts
       # - echo "youtube=$youtube" > .env
       # - echo "youtube=$youtube" > .env

question from:https://stackoverflow.com/questions/65713928/deploying-angular-app-using-the-gitlab-ci-causes-an-error-in-the-tmp-directory

Answer 1

The problem was the I was not building a docker image and then deploying that docker image. I created the Dockerfile and followed step 2 from this link: https://medium.com/@nieldw/use-gitlab-ci-to-deploy-docker-images-to-heroku-4e544a3a3c38 I then added the below .yml file. I have added both the Dockerfile and the .yml file used to deploy my Angular app to Heroku using a Gitlab Pipeline

image: docker:latest
services:
  - docker:dind

variables:
  DOCKER_DRIVER: overlay

stages:
  - build
  
docker-build:
  stage: build
  script:
  - TP=./src/environments
  - TF="$TP/environment.prod.ts"
  - PE="$TP/environment.ts"
  - mkdir -p "$TP"
  - printf "export const environment = { 
 production:true,
 youtube:'%s' 
};
" "$youtube" > "$TF"
  - printf "export const environment = { 
 production:false,
 youtube:'%s' 
};
" "$youtube" > "$PE"
  - docker build -f Dockerfile --iidfile imageid.txt -t registry.heroku.com/youtube-search-angular/my-app .
  - docker login -u _ -p $HEROKU_TOKEN registry.heroku.com
  - docker push registry.heroku.com/youtube-search-angular/my-app
  - apk add --no-cache curl
  - echo "Docker Image ID is $(cat imageid.txt)"
  - |-
    curl -X PATCH https://api.heroku.com/apps/youtube-search-angular/formation --header "Content-Type: application/json" --header "Accept: application/vnd.heroku+json; version=3.docker-releases" --header "Authorization: Bearer ${HEROKU_TOKEN}" --data '{ "updates": [ { "type": "web", "docker_image": "'$(cat imageid.txt)'" } ] }'

# base image
FROM node:12.2.0

# install chrome for protractor tests
RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
RUN sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
RUN apt-get update && apt-get install -yq google-chrome-stable

# set working directory
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install and cache app dependencies
COPY package.json /app/package.json
RUN npm install
RUN npm install -g @angular/[email protected]

# add app
COPY . /app

RUN ng build --prod
# start app
CMD ["node", "server.js"]