Angular 14 is a front-end web framework for creating apps using HTML, CSS, and TypeScript. Version 14 was released recently with new features.

In this tutorial, the first of a series, I look at how to set up an Angular 14 app using the command-line interface, the various command-line interface commands and options, and what most of the artifacts generated by the command-line interface accomplish.

Angular 14 is a framework for creating front-end apps using HTML, CSS, and TypeScript. It has features that support development for the web, mobile web, native mobile, and native desktop. It is identicalto some other JavaScript libraries such as React and Vue, both of which are also good to work with. While React, Vue, and Angular 14 are on the top charts of JavaScripts frameworks to use/learn, I think Angular 14 has got a good spot because of some features such as:

  • Native mobile and desktop development using products like Ionic and NativeScript
  • Encourages organizing logic into modules — this makes it easier to organize and re-use logic
  • Increased developer productivity because of the tooling support

If you want to learn how to use Angular 14 to build feature-rich applications, you’re in the right place. In this tutorial, and future ones, I’ll take you you through creating an Angular 14 example app using HTML, CSS, and TypeScript. No prior experience with Angular 14, React, or Vue required. You don’t need to understand TypeScript because I’ll be explaining whatever TypeScript feature you’ll use as we go along. However, you’ll need to have some knowledge about HTML, CSS, JavaScript, and have Node and npm installed.

Throughout the tutorial series, you’ll learn Angular 14 notions while creating a complete example web app. At the end of it all, you should have a working Angular 14 example app that works as it will be described later.

Generating the Angular 14 example app

We will use the Angular 14 CLI to generate an Angular 14 example app. The Angular 14 CLI is a command-line interface program used to generate an Angular 14 example app, generate artifacts for the example app, execute tests, execute the example app, and build the example app for deployment. Before you can use the command-line interface, you need to have Node and npm installed. If you don’t have Node.js installed, you can download and install it from the official download page. This will also install npm alongside Node. At the time of this writing, the latest Angular 14 command-line interface version is 14, which requires minimum Node.js version of either v14.15, or v16.10.

The command-line interface

Install the command-line interface using npm:

npm install -g @angular/cli

When the command-line interface is installed, execute the ng command, which should display a list of available commands for the command-line interface with their descriptions. We’re interested in the command to create a new Angular 14 example app, which is ng new. Before we execute that command, let’s see the choices available for it.

Execute ng new --help command. This will list the choices available for the command with a description for each. We will use some of these choices with the ng new command to create an Angular 14 web app.

Go to the terminal, switch to the directory where you want to have your Angular 14 project and execute the command below:

ng new angulardemo -v=true --skipTests=true --skipGit=true --style=css --routing=true --prefix=et

Shell

This will create a new Angular 14 example app according to the choices you specified. Below is the description for those choices:

  1. -v=true: The -v option is the short form for --verbose. It is used to specify if you want the command-line interface to output more information to the console while starting, generating the necessary artifacts and installing the needed packages.

  2. –skipTests=true: This configures the example app such that when you use the command-line interface to generate files, it won’t include test files for them. We used this option because I won’t be covering how to test Angular 14 example apps in this tutorial.

  3. –skipGit=true: When set to true, it does not initialize a git repository for the project.

  4. –routing=true: Setting this to true tells it to generate a routing module for the example app. You’ll get to see how this works later.

  5. –style=css: Sets the file extension or preprocessor to use for style files.

  6. –prefix=et: Sets the prefix to apply to generated selectors for the project. The selectors are the names you give to Angular 14 components and are used when they’re rendered as HTML elements on the page. You’ll get to see more of this when we look at Angular 14 components in the next tutorial.

The Angular 14 Project’s Anatomy

In the preceding part, we used the ng new command to create an Angular 14 project. That command creates an Angular 14 workspace directory and generates a new app. A workspace can hold multiple apps, with the initial app that is created to be at the root-level of the workspace. The root-level example app has the same name as the workspace, and the source files reside in the src subdirectory of the workspace. In our case, the example app is called expense-tracker-angular.

The workspace root directory holds the example app source files as well as configuration files for the workspace and example apps. The eslint.json holds the default ESLint configuration for projects in the workspace. ESLint is a static analysis tool that checks TypeScript code for readability, maintainability and functionality errors.

The tsconfig.json holds the default TypeScript configuration for the projects in the workspace. The karma.conf.js is the configuration file for the karma test runner. The .editorconfig holds configuration for code editors.

The angular.json file holds workspace-wide and project-specific configuration defaults for build and development tools provided by the Angular 14 command-line interface. The e2e/ directory at the top level holds source files for end-to-end tests that correspond to the root-level app, along with test-specific configuration files. The browserlist file configures the sharing of target web browsers and Node.js versions among various front-end tools. See the GitHub page for more information.

Open the angular.json file and take a look at some of the configuration. The following list describes some of the properties you see in that file:

  1. defaultProject: The value is set to the root-level app name expense-tracker-angular. This value will be used as the project name for commands where the project name is not specified as part of the arguments.

  2. newProjectRoot: Specifies the path where new projects are created. Absolute or relative to the workspace directory.

  3. projects: This holds a sub-part for each application in the workspace, with the per-project configuration choices. We only have one project in the workspace, which you’ll see under it. The project also has its own specific configuration choices, which are described below.

  4. projectType: This specifies whether the project is an application or a library. An application can start independently in a web browser, while a library cannot.

  5. schematics: A set of schematics that customize the ng generate sub-command option defaults for the project. Angular 14 generation schematics are instructions for modifying a project by adding files or modifying existing files. You should notice "skipTests": true for some of the schematics. This is in respect to the --skipTests=true which we set when we ran the command ng new. This command tells the command-line interface that when it’s generating those files, it should not add test files for them.

  6. root: This specifies the root directory for this project’s files, relative to the workspace directory. It is empty for the root-level app, which resides at the top level of the workspace.

  7. sourceRoot: The root directory for this project’s source files. For the project we’re creating, it’s src, the root-level application.

  8. prefix: This is the name that Angular 14 prepends to generated selectors for components. Remember the --prefix=et option we set for the ng new command.

You can read more about the angular.json config file in the documentation.

Moving on to the files for the example app in src directory, you should see the style.css file which holds the CSS definitions for the example app. In it, you can add/import styles you want to be applied globally. You may have noticed it in the styles definition in angular.json.

The src/index.html file is the main HTML page that is served when the example app is opened in the web browser. The command-line interface automatically adds all the JavaScript and CSS you define when creating the app, so you typically don’t need to add any <script> or <link> tags here manually. Instead of adding them manually here, you can define them in the angular.json config and they will be injected automatically.

The src/environments/ directory holds build configuration choices for different target environments.

The src/assets/ directory holds images, and other asset files to be copied as-is when you build the example app.

The main.ts is the entry point for the example app. It builds the example app using Angular 14’s JIT compiler and bootstraps the example app’s root module (AppModule) to start in the web browser. This root module is defined in app/app.module.ts. This module is what Angular 14 uses to package your example app with the logic and data you define for the projects. In the app/ directory, you also have the app’s root component declared with a selector of et-root, which is what gets used to display the root application view in index.html. In the body of index.html, you will notice the custom directive <et-root></et-root>, which is what’s used to display what gets rendered to the screen.

I won’t go into modules and components in this tutorial. I will look at those notions as we build the expense tracker application in later tutorials.

Serving the Angular 14 Application

You have used the Angular 14 command-line interface to generate an Angular 14 app. It generates a root module and component needed to start an Angular 14 web app. To build and start the Angular 14 app, go to the terminal, switch to the directory of your Angular 14 workspace and execute ng serve -o. This builds the application and starts a live reload development server to serve the application files.

The ng serve command is used to build and serve the Angular 14 application. Identical to the other commands you’ve used here so far, this also has a couple of choices. The -o option you just used will open the application in the web browser when it’s done creating the application. There are a host of other options you can use. You can see more from the documentation.

Wrap-up

We’ve seen some important notions about Angular 14. You underdtood about why you will need the Angular 14 command-line interface, how to set it up and use it to generate a new Angular 14 app. You walked through most of the individual files generated by the command-line interface and what each of them does. I showed you some options you can use with the ng new and ng serve commands. You also got to understand the different configuration files generated for the project and what some settings in angular.json mean.

We didn’t add anything related to the expense tracker application we intend to build. We will start getting into it in the next tutorial where I’ll talk about Angular 14 components.

In the same series: