Angular 14 tutorial: beginner's series
As Angular 14 has just been released, this tutorial is updated to show you how to create an Angular 14 project and the new features of v14.
Throughout this beginner's series, you'll learn how you can use Angular 14 to build client side web applications for mobile and desktop with a backend.
Angular 14, was just released and has a lot of changes and new features under the hood particularly standalone components and typed forms. In this tutorial we’ll also see what’s new with the new Angular 14 version and also learn how to upgrade our an existing Angular project.
This Angular 14 tutorial is a part of a tutorial series that contains the following tutorials:
- Getting Started with The Angular CLI (this one)
- Updating Angular CLI and Upgrading Existing Projects: In this short guide we'll see how to update Angular CLI to the latest version and upgrading existing projects.
- Angular Components Explained: In this tutorial we will learn the basics of components in Angular and the new additions in Angular 14.
- The Angular 14 Router: Component Routing: The router module is one of the most important blocks of the Angular framework because it allows you to build apps with multiple pages and add routing between them. So in this part we will cover the Angular router in depth and by examples.
- Getting Started with The Angular HTTP Client: In this tutorial we'll learn how to use the new **HttpClient** API, available only for Angular 4+ to make HTTP requests in Angular 4+ web applications instead of the old, now removed on Angular 7, **HTTP** API.
- Angular 2+ by Example: Making HTTP GET Requests Using HttpClient: In this tutorial we'll learn how to use **HttpClient** to make HTTP GET requests in Angular 2+.
- Building Modern Web Apps with Python, Django Rest Framework and Angular 2+
- Django REST framework (DRF) with Angular 2+ tutorial
- Getting started with Material Design 2 in Angular 2+: In this tutorial we will see how to get started with **Material Design 2** in Angular 2+.
- How to Deploy Angular 2+ Web Apps to Github: In this guide we'll see how to deploy Angular 2+ apps to Github pages.
If you want to get started developing Angular 14 web applications, you have multiple options:
- Install Angular by hand,
- Install and use Angular CLI v14,
- Upgrade from an existing Angular 2+ project.
Before you can install Angular you need to have Node.js and NPM installed on your development machine.
So go ahead and open your terminal and type the following
If you get the version of an installed Node.js then you already have the platform installed. If the command is unknown by your terminal then you need to install Node.js.
Installing Node.js is easy and straightforward, you just need to visit their official website then grab the installer for your operating system and follow the instructions.
Now if you open your terminal under Linux/MAC or command prompt under Windows and execute
You should get an output displaying your Node.js installed version.
Updating to Angular 14 from previous version
If you have already an Angular project and want to update it to Angular 14, you can do that by taking one of the following steps:
- Update your project using the
ng updatecommand of Angular CLI.
- Update your project using the Nx CLI.
Fortunately for you, if you already have a previous working experience with Angular 2+ starting a new Angular 14 project is very much the same process.
In case you don't have any previous experience with Angular framework just follow the instructions below to install Angular 14 from scratch.
Installing the Angular CLI 14
The Angular CLI is a handy command line utility built by the Angular team to easily and quickly generate new Angular applications and serve them locally. It can also be used to generate different Angular constructs such as components, services and pipes etc.
Before you can use the Angular CLI, you need to install it via npm, so go ahead and open your terminal or your command prompt then simply enter:
npm install -g @angular/cli
To check the version of your installed Angular CLI, type:
Note: You can also run
ng -vfrom inside an Angular project to get the version of the locally installed Angular.
Generating an Angular 14 Project with Angular CLI
Using the Angular CLI, you can generate an Angular 14 project with a few commands, the CLI will take care of generating the project files and install all the required dependencies.
Open your terminal or your command prompt then run:
ng new angular14project
After finishing the installation enter:
cd angular14project --style=scss --routing
You can notice the two flags at the end, --style=scss which instructs the Angular CLI to use SCSS for styling and --routing for adding basic routing support to the new Angular project.
Your project will be served locally from
Using Angular CLI, you can get started with Angular 14 by generating a new project quickly with a variety of flags to customize and control the generation process.
As a recap, we have seen how to create a new Angular 14 project.
Now that we have created a new project.
In the next angular tutorial, we're going to start learning about the fundamentals of Angular 14 starting with standalone and module-based components.
Hands-on Angular eBook
Subscribe to our Angular newsletter and get our hands-on Angular book for free!