A Practical Tutorial to Angular 11: Environment and Project Setup
Angular 11 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 11 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.
- 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 11 notions while creating an Expense Tracking example app. At the end of it all, you should have a working Angular 11 example app that works like what you see below.
Generating the Angular 11 example app
We will use the Angular 11 CLI to generate an Angular 11 example app. The Angular 11 CLI is a command-line interface program used to generate an Angular 11 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 11 command-line interface version is 8.2.1, which requires Node.js version 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 11 example app, which is
ng new. Before we execute that command, let’s see the choices available for it.
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 11 web app.
Go to the terminal, switch to the directory where you want to have your Angular 11 project and execute the command below:
ng new expense-tracker-angular -v=true --skipTests=true --skipGit=true --style=css --routing=true --prefix=et
This will create a new Angular 11 example app according to the choices you specified. Below is the description for those choices:
-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.
–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 11 example apps in this tutorial.
–skipGit=true: When set to true, it does not initialize a git repository for the project.
–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.
–style=css: Sets the file extension or preprocessor to use for style files.
–prefix=et: Sets the prefix to apply to generated selectors for the project. The selectors are the names you give to Angular 11 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 11 components in the next tutorial.
The Angular 11 Project’s Anatomy
In the preceding part, we used the
ng new command to create an Angular 11 project. That command creates an Angular 11 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 11 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:
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.
newProjectRoot: Specifies the path where new projects are created. Absolute or relative to the workspace directory.
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.
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.
schematics: A set of schematics that customize the
ng generatesub-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": truefor some of the schematics. This is in respect to the
--skipTests=truewhich 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.
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.
sourceRoot: The root directory for this project’s source files. For the project we’re creating, it’s
src, the root-level application.
prefix: This is the name that Angular 11 prepends to generated selectors for components. Remember the
--prefix=etoption we set for the
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.
<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.
src/environments/ directory holds build configuration choices for different target environments.
src/assets/ directory holds images, and other asset files to be copied as-is when you build the example app.
main.ts is the entry point for the example app. It builds the example app using Angular 11’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 11 Application
You have used the Angular 11 command-line interface to generate an Angular 11 app. It generates a root module and component needed to start an Angular 11 web app. To build and start the Angular 11 app, go to the terminal, switch to the directory of your Angular 11 workspace and execute
ng serve -o. This builds the application and starts a live reload development server to serve the application files.
ng serve command is used to build and serve the Angular 11 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.
We’ve seen some important notions about Angular 11. You underdtood about why you will need the Angular 11 command-line interface, how to set it up and use it to generate a new Angular 11 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
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 11 components.