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

Gustavo Tavares · Accepted Answer · 2018-08-16 23:19:47Z

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, 2018 at 23:19

Gustavo Tavares

2,81517 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Mena Over a year ago

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

Gustavo Tavares Over a year ago

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

Mena Over a year ago

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 stackoverflow.com/questions/55630610/…

Gustavo Tavares Over a year ago

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.. ;-)

Abhishek Over a year ago

@GustavoTavares how and where to get {-INSERT THE NAME OF THE BUILD FOLDER HERE-}

|

Xin Wang · Accepted Answer · 2018-04-03 22:30:33Z

0

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

answered Apr 3, 2018 at 22:30

Xin Wang

311 bronze badge

Comments

Toan Quoc Ho · Accepted Answer · 2019-01-28 06:43:22Z

0

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!

answered Jan 28, 2019 at 6:43

Toan Quoc Ho

3,3761 gold badge17 silver badges23 bronze badges

Collectives™ on Stack Overflow

Build angular project using AWS CodeBuild

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related