1. Introduction

In this tutorial, we aim to guide you on how to build and deploy Angular applications using Angular CLI. Angular CLI is a command-line interface for Angular and helps us to initialize, develop, scaffold, and deploy applications efficiently.

During this tutorial, you will learn:

• How to build Angular applications with Angular CLI.
• Different build options.
• Preparing your application for deployment.

Prerequisites:

• Basic understanding of Angular.
• Node.js and Angular CLI installed on your computer.

2. Step-by-Step Guide

Building Angular Applications

1. Creating a new project: To create a new Angular project, open your terminal and type:

ng new my-app

This command creates a new directory 'my-app' and installs all the necessary Angular dependencies.

1. Running the application: To start the server and run the application, navigate into the project's directory and type:

cd my-app
ng serve

You can now open your browser and navigate to http://localhost:4200/ to see your application.

Preparing for Deployment

1. Building the application: Before deploying, we need to build our application. Angular CLI provides the ng build command which compiles the application into an output directory.

ng build --prod

The --prod flag is for a production build that enables production environment settings.

3. Code Examples

Creating a New Component

Create a new component 'hello-world' using Angular CLI:

ng generate component hello-world

This command creates a new directory 'hello-world' under 'src/app'. In this directory, four files are created: hello-world.component.html, hello-world.component.spec.ts, hello-world.component.ts, and hello-world.component.css.

4. Summary

In this tutorial, you have learned how to build and deploy an Angular application using Angular CLI. You've seen how to create a new project, how to run it locally, and how to prepare it for deployment.

For further learning, you can explore more about Angular Modules, Components, Services, and Routing.

5. Practice Exercises

1. Exercise 1: Create a new Angular application and add a component to it. Run the application and make sure your component is displayed properly.

2. Exercise 2: Add a new component and use it inside another component. Experiment with passing data between components.

3. Exercise 3: Build your application for production. Inspect the output directory and familiarize yourself with the generated files.

Remember, practice is key in mastering Angular. Keep exploring and building with Angular CLI!