0

Helle there,

To contextualize, I am working on an web application using Google App Engine (GAE). In fact, I use three different GAE services. For the backend, analysis and the frontend with Angular.

In GIT my architecture is the following:

Screen capture showing the GIT folder architecture

Indeed, I wrote a global cloudbuild.yaml file on root as the following to call all of others specific cloudbuild.yaml files in each services directories ("/api", "/analyse", "/frontend"):

steps:
- name: 'gcr.io/cloud-builders/gcloud'
  entrypoint: 'bash'
  args:
  - '-c'
  - |
    for d in */; do
      config="${d}cloudbuild.yaml"
      if [[ ! -f "${config}" ]]; then
        continue
      fi

      echo "Building $d ... "
      (
        gcloud builds submit $d --config=${config}
      ) &
    done
    wait

During the deployment, an error occurs in the "frontend" service steps let see his cloudbuild.yaml file:

steps:

  # Install Angular
  - name: 'gcr.io/cloud-builders/npm'
    args: ['install','-g','@angular/cli' ]

  # Install node packages
  - name: 'gcr.io/cloud-builders/npm'
    args: [ 'install' ]

  # Build productive files
  - name: 'node:12'
    entrypoint: npm
    args: [ 'run', 'build', '--prod', '--aot' ]

  # Deploy to google cloud app egnine
  - name: 'gcr.io/cloud-builders/gcloud'
    args: ['app', 'deploy', 'client.yaml']

The error occurs for the third step (in log step 2 because of starting at 0):

Screen capture showing error logs

I am really confused with this error because I do not understand why the build method not working well. In fact, when I am running npm run build --prod locally there is no problem.

I hope you could help me to solve this problem.

Thanks to spend time on my issue. I love you community ❤️

[EDIT]

A little update to add the package.json dependencies.

{
  "name": "frontend",
  "version": "0.0.0",
  "description": "The frontend part for the 4th year project",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.0.0",
    "@angular/common": "~11.0.0",
    "@angular/compiler": "~11.0.0",
    "@angular/core": "~11.0.0",
    "@angular/forms": "~11.0.0",
    "@angular/platform-browser": "~11.0.0",
    "@angular/platform-browser-dynamic": "~11.0.0",
    "@angular/router": "~11.0.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.1",
    "@angular/cli": "~11.0.1",
    "@angular/compiler-cli": "~11.0.0",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }
}

I suspect that the problem comes from the <base href=""> or from paths in the client.yaml inside the frontend folder

The client.yaml file:

service: default
runtime: python27
api_version: 1
threadsafe: true

handlers:
- url: /
  static_files: dist/index.html
  upload: frontend/index.html
- url: /
  static_dir: dist

And the .gcloudignore

e2e/
node_modules/
src/
coverage
^(.*/)?\..*$
^(.*/)?.*\.json$
^(.*/)?.*\.md$
^(.*/)?.*\.yaml$
^LICENSE
Helloïs
  • 154
  • 2
  • 9
  • 1
    Try not to post images and instead post the actual code or content of your .yaml files for easier reproduction of the issue. Have you tried exploring any of the options mentioned [here](https://stackoverflow.com/questions/61222467/angular-9-ngcc-fails-with-an-unhandled-exception) as additional steps to solve the issue. – Daniel Ocando Nov 19 '20 at 13:08
  • 1
    I've been trying to reproduce the issue unsuccessfully so it could be the case that a dependency is not being installed as the step runs and therefore the `ENOENT: no such file or directory` pops up. – Daniel Ocando Nov 19 '20 at 13:09
  • @DanielOcando No, I do not try those options because I do not have this issue in local build using ```npm run build --prod``` It is only deploying with cloudbuild. Sorry for images, I will upload my post thanks. – Helloïs Nov 19 '20 at 17:41
  • @DanielOcando I am really confused because during deployment, before ```npm run build --prod``` I ran ```npm install -g @angular/cli```, so my new environment is containing the latest version of @angular/cli for now. Then, I install all necessary dependency using ```npm install```. So, I do not understand why dependencies were not installed. Thanks for you time. – Helloïs Nov 19 '20 at 17:49
  • 1
    Could you post the dependencies being used in order to attempt a better reproduction? – Daniel Ocando Nov 20 '20 at 14:45
  • Yes I could but I think I only created a new Angular empty project from scratch with the latest version of the @Angular/cli (actually the 11.0.1 version). @Daniel Ocando – Helloïs Nov 21 '20 at 09:34

1 Answers1

0

I found a solution.

In fact, this error occurs because the "./src" folder does not exist after deploying. My mistake, in my .cloudignore file I include the src folder so it is impossible for my application to build the src folder because it never imported.

The error sended was not really clear but I can go ahead now.

Thanks @DanielOcando for your time.

Helloïs
  • 154
  • 2
  • 9