Deploying on AWS Amplify

Question

I have a web application which I want to deploy on AWS amplify. I am very new to this, following the procedure, I always get a build error (command ng build not found)

My app builds perfectly on local machine, and all the files are transferred to GIT repository.

The app uses AppSync and Aurora as well.

Any help would be much appreciated.

{
  "name": "new-impact",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "[ -f src/aws-exports.js ] && mv src/aws-exports.js src/aws-exports.ts || ng serve; ng serve",
    "build": "[ -f src/aws-exports.js ] && mv src/aws-exports.js src/aws-exports.ts || node ./node_modules/@angular/cli/bin/ng build --prod; node ./node_modules/@angular/cli/bin/ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.0.3",
    "@angular/common": "~9.0.3",
    "@angular/compiler": "~9.0.3",
    "@angular/core": "~9.0.3",
    "@angular/forms": "~9.0.3",
    "@angular/localize": "^9.1.0",
    "@angular/platform-browser": "~9.0.3",
    "@angular/platform-browser-dynamic": "~9.0.3",
    "@angular/router": "~9.0.3",
    "@ng-bootstrap/ng-bootstrap": "^6.0.2",
    "apollo-angular": "^1.8.0",
    "apollo-angular-link-http": "^1.9.0",
    "apollo-boost": "^0.4.7",
    "apollo-cache-inmemory": "^1.6.0",
    "apollo-client": "^2.6.8",
    "apollo-env": "^0.6.2",
    "apollo-link": "^1.2.13",
    "aws-amplify": "^2.3.0",
    "aws-appsync": "^3.0.2",
    "d3-scale": "^3.2.1",
    "d3plus": "^2.0.0-alpha.25",
    "graphql": "^14.6.0",
    "graphql-tag": "^2.10.3",
    "ngx-chips": "^2.1.0",
    "ngx-pagination": "^5.0.0",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.4",
    "@angular/cli": "~9.0.4",
    "@angular/compiler-cli": "~9.0.3",
    "@angular/language-service": "~9.0.3",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~5.18.0",
    "typescript": "~3.7.5"
  }
}

// Build error
                                 13 verbose stack     at ChildProcess.emit (events.js:198:13)
                                 13 verbose stack     at maybeClose (internal/child_process.js:982:16)
                                 13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
                                 14 verbose pkgid [email protected]
                                 15 verbose cwd /codebuild/output/src651454953/src/test
                                 16 verbose Linux 4.14.165-103.209.amzn1.x86_64
                                 17 verbose argv "/root/.nvm/versions/node/v10.16.0/bin/node" "/root/.nvm/versions/node/v10.16.0/bin/npm" "run" "build"
                                 18 verbose node v10.16.0
                                 19 verbose npm  v6.9.0
                                 20 error code ELIFECYCLE
                                 21 error errno 1
                                 22 error [email protected] build: `[ -f src/aws-exports.js ] && mv src/aws-exports.js src/aws-exports.ts || node ./node_modules/@angular/cli/bin/ng build --prod; node ./node_modules/@angular/cli/bin/ng build --prod`
                                 22 error Exit status 1
                                 23 error Failed at the [email protected] build script.
                                 23 error This is probably not a problem with npm. There is likely additional logging output above.
                                 24 verbose exit [ 1, true ]
2020-05-04T21:58:06.455Z [ERROR]: !!! Build failed
2020-05-04T21:58:06.507Z [ERROR]: !!! Non-Zero Exit Code detected
2020-05-04T21:58:06.507Z [INFO]: # Starting environment caching...
2020-05-04T21:58:06.507Z [INFO]: # Environment caching completed
Terminating logging...

Answer 1

There can be a number of reasons, but it might be this one: (if not, could you update your question with your package.json file and the build error from the amplify console?)

The amplify console will run node run build when it starts the build and not the angular cli, ng build.

You need to update the build script in your package.json file so that node run build will run ng build:

...
"scripts" : {
   ...
   "start": "[ -f src/aws-exports.js ] && mv src/aws-exports.js src/aws-exports.ts || ng serve; ng serve",
   "build": "[ -f src/aws-exports.js ] && mv src/aws-exports.js src/aws-exports.ts || node ./node_modules/@angular/cli/bin/ng build --prod; node ./node_modules/@angular/cli/bin/ng build --prod",
   ...
}

This include automatic renaming of your aws-exports file from aws-exports.js to aws-exports.ts if you have forgotten to rename it manually.

The line node ./node_modules/@angular/cli/bin/ng build --prod; is the line needed to make aws amplify console to build your angular app correctly.

Answer 2

I came across the same problem of having build issues on AWS Amplify. I found out I had dependencies with different versions in package-lock-json. I tried running npm ci and it fixed the problem.