Fullstack Angular 14: Install the CLI

For now, let’s proceed to install Angular CLI v14 and create the frontend app that will be powered by Angular 14.

Adding the frontend with Angular CLI

In this part, we'll install the Angular CLI, which powers developers to rapidly jump to developing their Angular apps without the hassle of configuring webpack or similar build systems.

The Angular CLI is the official tool for generating Angular apps. It makes the process of developing fully working Angular applications much easier.

The Angular CLI is capable of doing tasks beyond creating project files and installing dependencies. Additionally, it assists you all across the development process, from serving your app locally to testing, building final production packages, and sending them to your preferred web host.

Let’s see how to create the Angular frontend of our monorepo project. Go back to the terminal and run the following commands:

npm install -g @angular/cli

This will install Angular CLI globally on our development machine. At the time of this writing angular/cli v14.0.0 is installed.

Next, create the frontend package inside the monorepo’s packages/ sub-folder:

cd ..
ng new frontend --skip-git

Since we’ve previously navigated to the backend/ folder, we needed to go back to the packages/ folder of our monorepo project.

We used the —skip-git option to instruct Angular CLI to skip creating a Git repository of the frontend app since we are setting up a monorepo project which implies that we only use a single repository for the entire project including the backend and frontend.

The previous command will prompt you for a couple of questions as follows:

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS

We’ve chosen to set up routing in our Angular frontend application by answering Yes to the first question and SCSS as the stylesheet format.

Upon validation, the CLI will quickly generate the basic directory structure and source files, install the appropriate npm dependencies, and, since you opted for Angular routing, it will set up routing in your project.

The preceding command will also make an Angular workspace in the project's root directory with an initial application named after your project. Many apps and libraries may be placed in a workspace.

The TypeScript source files are generated in the src/ subdirectory, which contains your application source code. Outside of the src/ folder, you'll find additional configuration files such as:

• The package.json file for npm.
• The tsconfig.json file for configuring TypeScript.
• The karma.conf.js for the karma test runner.
• The angular.json for Angular CLI configuration.

After that, go to the frontend/ directory and run the local development server using the following commands:

cd ./frontend/
ng serve

The command will start a local live-reload development server which will be accessible at http://localhost:4200/. When you make changes to the code, your application is instantly rebuilt and transmitted to the browser, eliminating the need for you to reload it regularly.

Browse to http://localhost:4200/ in your web browser to view your Angular application operating with some basic contents, which we'll delete before developing the demo's main UI.

Since we've generated an Angular application and started a live-reload development server, we can proceed to the next steps, which comprise an introduction to Angular's essential architecture concepts, such as modules, components, and services, followed by the design of the user interface.

• Date: 06 Jun 2022