Angular 12 is a front-end web framework for creating apps using HTML, CSS, and TypeScript. In this tutorial, the first of a series, I look at how to set up an Angular 12 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 12 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 similar to popular JavaScript libraries such as React and Vue. Some of its important features:

  • 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

Throughout the tutorial series, you’ll learn Angular 12 fundamental concepts while building a small real-world example app.

Generating the Angular 12 example project

We’ll be using the Angular 12 CLI to generate an Angular 12 project.

The Angular CLI is a command-line interface binary used to generate Angular projects, artifacts such as components and services, configure and run tests, serve and build apps for production, and finally help with the deployment.

Before you can use Angular CLI, you need to install Node and npm on your development machine.You can simply download and install it from the official download page or use a tool like NVM.

Installing Angular CLI

You need to open a new terminal and run the following command:

npm install -g @angular/cli

After installing the CLI, you can run the ng command, which should display a list of available commands for the command-line interface with their descriptions.

We’ll start by using the command to create a new Angular 12 example project, which is ng new. You can get alist of the available options that you can use with this command by running ng new --help.

Navigate to the working folder where you want to generate your Angular 12 project and run the followng command:

ng new angular-expense-app -v=true --skipTests=true --skipGit=true --style=css --routing=true --prefix=et

This will create a new Angular 12 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 12 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 12 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 atAngular 12 components in the next tutorial.

The Angular 12 Project’s Anatomy

In the preceding part, we used the ng new command to create an Angular 12 project. That command creates an Angular 12 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 tslint.json holds the default TSLint configuration for projects in the workspace. TSLint 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 12 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 11 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 11 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 12’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 11 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 12 Application

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

The ng serve command is used to build and serve the Angular 12 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 12. You underdtood about why you will need the Angular 12 command-line interface, how to set it up and use it to generate a new Angular 12 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 12 components.

In the same series: