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:

Angular 14 is a powerful front-end Javascript/TypeScript framework developed by Google. It allows you to build structured client side applications and PWAs (Progressive Web Apps).

Getting Started with Angular 14

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

node -v

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

node -v 

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 update command 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:

ng -v

Note: You can also run ng -v from 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
ng serve 

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 http://localhost:4200.

Conclusion

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.

• Date: 01 Jul 2022