Build angular project using AWS CodeBuild

Question

We have an Angular project and we are trying to use AWS CodePipeline to deploy the project.

We have pushed our project to a CodeCommit repository.

Now we are facing challenge to generate the build using AWS CodeBuild. In CodeBuild the build definition is

phases:
  build:
    commands:
      - npm install && ng build-prod

We get an error ng: not found

We also tried the following build definition:

phases:
      build:
        commands:
          - npm install && run build-prod

Error we get is run: not found

Also we are not sure about what we have to enter in "Output files" field.

Please Help..!!

Answer 1

The Node.js container from CodeBuild doesn't have the angular-cli installed. Just Node.js and npm. You must install angular-cli before build your project. Above there are a buildspec.yml example for a angular project to be deployed in S3 bucket:

version: 0.2
env:
    variables:
        CACHE_CONTROL: "86400"
        S3_BUCKET: {-INSERT BUCKET NAME FOR STATIC WEBSITE HERE-}
        BUILD_FOLDER: {-INSERT THE NAME OF THE BUILD FOLDER HERE-}
        BUILD_ENV: "prod"
phases:
    install:
        commands:
            - echo Installing source NPM dependencies...
            - npm install
            - npm install -g @angular/cli
    build:
        commands:
            - echo Build started on `date`
            - ng build --${BUILD_ENV}
    post_build:
         commands:
            - aws s3 cp ${BUILD_FOLDER} s3://${S3_BUCKET} --recursive --acl public-read --cache-control "max-age=${CACHE_CONTROL}"
            - echo Build completed on `date`
artifacts:
    files:
        - '**/*'
    base-directory: 'dist*'
    discard-paths: yes

Answer 2

It seems like something wrong with your npm install. Reference: https://www.npmjs.com/package/angular-cli

The output files should be, the files you want to upload to your artifact s3 bucket, like: appspec.yml, target/my-app.jar. You can check the Artifact section in our doc: https://docs.aws.amazon.com/codebuild/latest/userguide/create-project.html?icmpid=docs_acb_console#create-project-console Thanks Xin

Answer 3

In your case, I think you're using angular-cli as a devDependencies. With devDependencies, you have to use node to run it or you have to put write the script to run it inside package.json file. For examples:

node ./node_module/@angular/cli/bin/ng <rest of the params>

or inside package.json file, you have to add a command definition in scripts property and run with npm: npm run <command-name>

{
  ...
  scripts: {
    ...
    "ng": "ng"
  }
  ...
}

In your question, you already use options 2. But looks like you're missing npm at the beginning of the command. It should be like this:

phases:
  build:
    commands:
      - npm install && npm run build-prod

Hope it helps!