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
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:
package.jsonfile for npm.
tsconfig.jsonfile for configuring TypeScript.
karma.conf.jsfor the karma test runner.
angular.jsonfor 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.
✋If you have any questions about this article, ask them in our GitHub Discussions 👈 community. You can also
✋ Want to master Angular 14? Read our angular tutorial and join our
#DailyAngularChallengewhere we learn to build components, directives, services, pipes and complete web, mobile, and desktop applications with latest Angular version.
✋ Make sure to join our Angular 14 Dev Community 👈 to discuss anything related to Angular development.
Related postsFullstack Angular 14: Monorepo with lerna & express.js Fullstack Angular 14: Install the CLI Fullstack Angular 14: Architecture & project’s design
Hands-on Angular eBook
Subscribe to our Angular newsletter and get our hands-on Angular book for free!