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..!!

score 26 · Answer 1 · answered Aug 16 '18 at 23:19

26

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

answered Aug 16 '18 at 23:19

Gustavo Tavares

2,579
15
29

Hi, I tried using a similar buildspec file and everything work until the post_build phase when the copy is suppose to start. I get this error for all my file `delete failed: s3://trips9ja-admin/index.html An error occurred (AccessDenied) when calling the DeleteObject operation: Access Denied` – Mena Apr 11 '19 at 15:48
Check your S3 bucket permissions.... As my knowledge the DeleteObject operation would not be needed... Probably you gonna need to deep dive to understand what he is trying to delete... – Gustavo Tavares Apr 11 '19 at 16:27
I actually want the previous app files in the s3 bucket deleted then copy the newer version into the bucket from the dist folder. Please have a look here https://stackoverflow.com/questions/55630610/automating-angular-7-app-deployment-with-aws-s3-and-codepipeline – Mena Apr 11 '19 at 16:52
1

So.. Just remove everything after the first three dots in my response... or in other words "Check your S3 bucket permissions...." They are just telling that you do not have rights to delete the object... also give an up in my response to help me a little bit.. ;-) – Gustavo Tavares Apr 11 '19 at 17:34
1

@GustavoTavares how and where to get `{-INSERT THE NAME OF THE BUILD FOLDER HERE-}` – Abhishek May 11 '19 at 06:42
It is the folder name of where your transpiler code is. Normally is dist or build.... you need to check inside your webpack script... – Gustavo Tavares May 11 '19 at 21:04
"discard-paths: yes" is not what you usually want. – OZ_ Sep 05 '20 at 17:15

score 0 · Answer 2 · answered Apr 03 '18 at 22:30

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

score 0 · Answer 3 · answered Jan 28 '19 at 06:43

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!

Build angular project using AWS CodeBuild

3 Answers3