Building and Deploying an Angular App

1 hour
  • 5 Learning Objectives

About this Hands-on Lab

We have been tasked with creating a new serverless Angular application that will be used by our team. Our job is to create a simple Angular application using the Angular CLI and deploy it to S3. This simple Angular application will be the starting point for more advanced features in the future. To initialize the Angular application, we will create some simple components, build a simple navigation element, and ensure multiple pages and routing are working. Finally, we will need to deploy our Angular application to S3 where it can be accessed by our team and other users. At the end of this lab we will have a live Angular application deployed to the Internet.

Learning Objectives

Successfully complete this lab by achieving the following learning objectives:

Install the Angular CLI

Using the built-in terminal in Cloud9, install the latest Angular CLI.

Create a New Angular Application

Using the built-in terminal and the Angular CLI, generate a new Angular application.

Create an Angular Component

Using the built-in terminal and the Angular CLI, genereate a new Angular component that is part of the root AppModule.

Add Component Routing

Modify the AppRouterModule to include routing to the newly-created Angular components.

Deploy an Angular Application

Using the terminal and the Anuglar CLI, deploy the Angular CLI to the provided Amazon S3 bucket.

Additional Resources

Lab Scenario

Your team has several private applications that require manual configurations to allow beta testers access to these applications over the internet. It's your job to create a publicly-accessible Angular application that applies these configuration changes when beta testers register themselves. This newly-created Angular application is going to lighten the load for the developers.

In this lab, we will create a simple Angular application and deploy it live so the beta testers can start using it. This application will be very simple and can be used as a starting point. More features can be added in the future.

Code for the tsconfig.json File?

You can find the code here.

Looking for Some Helpful Links?

  1. Installing the Angular CLI
  2. Creating a new Angular application
  3. Genereating an Angular Component
  4. Running an Angular application in Cloud9
  5. Deploying an Angular Application
  6. Creating Angular Application in S3

What are Hands-on Labs

Hands-on Labs are real environments created by industry experts to help you learn. These environments help you gain knowledge and experience, practice without compromising your system, test without risk, destroy without fear, and let you learn from your mistakes. Hands-on Labs: practice your skills before delivering in the real world.

Sign In
Welcome Back!

Psst…this one if you’ve been moved to ACG!

Get Started
Who’s going to be learning?