Installing Angular On Debian 11

In this article we will learn how to install Angular framework on Debian 11 operating system.

Introduction

In the world of web development, staying up-to-date with the latest tools and technologies is essential for building modern, feature-rich, and scalable web applications. One such tool that has gained immense popularity in recent years is Angular. Angular is a comprehensive front-end framework that offers a robust set of features and tools for building dynamic, interactive, and responsive web applications. In this article, we’ll take an in-depth look at Angular and explore its key features, benefits, and use cases.

What is Angular?

Angular is an open-source front-end web application framework developed by Google. It was initially released in 2010 as AngularJS and has since evolved into what is now known as Angular (or Angular 2+). Angular is designed to simplify and streamline the process of building single-page applications (SPAs) and dynamic web pages.

Key Features of Angular

• Modular Architecture. Angular encourages developers to break their applications into reusable and manageable modules. These modules can be easily combined to create complex applications, making code maintenance and collaboration more straightforward.
• TypeScript. Angular uses TypeScript, a statically-typed superset of JavaScript. TypeScript provides developers with a range of benefits, including improved code quality, enhanced tooling, and better developer experiences.
• Two-Way Data Binding. Angular’s two-way data binding simplifies the synchronization of the Model (data) and the View (UI). Any changes made to the data are immediately reflected in the user interface, and vice versa.
• Dependency Injection. Angular’s built-in dependency injection system makes it easy to manage and inject dependencies into your application. This promotes modularity, reusability, and testability.
• Directives. Directives are a powerful feature of Angular that allow developers to create custom HTML elements and attributes, extending the functionality of HTML. Angular provides several built-in directives and allows developers to create their own.
• Components. In Angular, everything is a component. Components are the building blocks of an application, and they encapsulate the application’s logic and UI. This modular approach promotes reusability and maintainability.
• RxJS Integration. Angular seamlessly integrates with RxJS, a powerful library for handling asynchronous operations and events. This makes it easier to manage data streams and handle complex asynchronous tasks.
• Routing. Angular provides a robust and flexible routing system, allowing developers to create complex, multi-page applications with ease. It supports lazy loading, guards, and nested routes.
• Testing. Angular includes tools for unit testing, end-to-end testing, and integration testing, making it easier to ensure the quality and reliability of your application.

Benefits of Angular

• Productivity. Angular’s extensive set of tools, libraries, and features enhance developer productivity. The modularity and reusability of components simplify the development process.
• Performance. Angular’s change detection mechanism and Ahead-of-Time (AOT) compilation result in faster loading times and better performance for web applications.
• Community Support. With Google as a driving force, Angular enjoys a vibrant and active community. This means plenty of resources, tutorials, and third-party libraries are available to assist developers.Cross-Platform.
• Development. Angular isn’t limited to web development; it can be used to build cross-platform applications for the web, mobile, and desktop using technologies like Ionic and Electron.
• Security. Angular offers built-in security features such as Cross-Site Scripting (XSS) protection and Cross-Site Request Forgery (CSRF) protection.

How To Install Angular On Debian 11 Operating System

In this section we will explain the common way to install Angular framework on Debian 11 operating system. This guidance has been tested on the system. To install Angular, we will do several steps as mentioned below.

1. Update System
2. Install NodeJS
3. Install Install Angular
4. Creating a new Angular Application

Step 1: Update System

Before we install any new software on the system, it’s important to make sure our system is up to date. For this purpose we will run the following apt commands.

$ sudo apt update
$ sudo apt upgrade
$ sudo apt-get install software-properties-common

Step 2: Install NodeJS

Angular requires NodeJS to run properly, we will install node.js on the system. Use the following commands to configure node.js PPA in your Debian system. By default, Node Package Manager(NPM) will be installed with the Nodejs itself. But if we can update it to the latest version using the below command:

$ curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
$ sudo apt-get install nodejs

Output :

ramansah@infodiginet:~$ curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
[sudo] password for ramansah:
ramansah@infodiginet:~$ sudo apt-get install nodejs
Reading package lists... Done
Building dependency tree... Done
Reading state information... Done
The following packages were automatically installed and are no longer required:
fonts-lato libgmp-dev libgmpxx4ldbl libgnutls-dane0 libjs-jquery libunbound8
Use 'sudo apt autoremove' to remove them.
The following packages will be upgraded:
nodejs
1 upgraded, 0 newly installed, 0 to remove and 402 not upgraded.
Need to get 0 B/27.2 MB of archives.
After this operation, 7,937 kB of additional disk space will be used.
Reading changelogs... Done
(Reading database ... 209157 files and directories currently installed.)
Preparing to unpack .../nodejs_16.20.2-deb-1nodesource1_amd64.deb ...
Unpacking nodejs (16.20.2-deb-1nodesource1) over (16.13.0-deb-1nodesource1) ...
Setting up nodejs (16.20.2-deb-1nodesource1) ...
Processing triggers for man-db (2.9.4-2) ...

Step 3: Install Install Angular on Debian

After all dependencies packages is updated, then we will start to install by using the following command:

$ sudo npm install -g @angular/cli

Output :

ramansah@infodiginet:~$ sudo npm install -g @angular/cli

added 245 packages, and audited 246 packages in 47s

38 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities
npm notice
npm notice New major version of npm available! 8.19.4 -> 10.2.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.2.1
npm notice Run npm install -g npm@10.2.1 to update!
npm notice

Step 4: Creating a new Angular Application

At this section, we already had an Angular installed on the system. The next step, we will create a new application based on our fresh installed Angular. For this purpose we will create a new project called as diginet-project.

$ ng new diginet-project

Output :

ramansah@infodiginet:~$ ng new diginet-project
? Would you like to enable autocompletion? This will set up your terminal so pressing TAB while
typing Angular CLI commands will show possible options and autocomplete arguments. (Enabling
autocompletion will modify configuration files in your home directory.) Yes
Appended `source <(ng completion script)` to `/home/ramansah/.bashrc`. Restart your terminal or run the following to autocomplete `ng` commands:

source <(ng completion script)
? Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more
details and how to change this setting, see https://angular.io/analytics. Yes

Thank you for sharing pseudonymous usage data. Should you change your mind, the following
command will disable this feature entirely:

ng analytics disable --global

Global setting: enabled
Local setting: No local workspace configuration file.
Effective status: enabled
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS [
https://sass-lang.com/documentation/syntax#scss ]
CREATE diginet-project/README.md (1068 bytes)
CREATE diginet-project/.editorconfig (274 bytes)
CREATE diginet-project/.gitignore (548 bytes)
CREATE diginet-project/angular.json (2919 bytes)
CREATE diginet-project/package.json (1046 bytes)
CREATE diginet-project/tsconfig.json (901 bytes)
CREATE diginet-project/tsconfig.app.json (263 bytes)
CREATE diginet-project/tsconfig.spec.json (273 bytes)
CREATE diginet-project/.vscode/extensions.json (130 bytes)
CREATE diginet-project/.vscode/launch.json (470 bytes)
CREATE diginet-project/.vscode/tasks.json (938 bytes)
CREATE diginet-project/src/main.ts (214 bytes)
CREATE diginet-project/src/favicon.ico (948 bytes)
CREATE diginet-project/src/index.html (300 bytes)
CREATE diginet-project/src/styles.scss (80 bytes)
CREATE diginet-project/src/app/app-routing.module.ts (245 bytes)
CREATE diginet-project/src/app/app.module.ts (393 bytes)
CREATE diginet-project/src/app/app.component.scss (0 bytes)
CREATE diginet-project/src/app/app.component.html (22709 bytes)
CREATE diginet-project/src/app/app.component.spec.ts (1018 bytes)
CREATE diginet-project/src/app/app.component.ts (220 bytes)
CREATE diginet-project/src/assets/.gitkeep (0 bytes)
✔ Packages installed successfully.
hint: Using 'master' as the name for the initial branch. This default branch name
hint: is subject to change. To configure the initial branch name to use in all
hint: of your new repositories, which will suppress this warning, call:
hint:
hint: git config --global init.defaultBranch <name>
hint:
hint: Names commonly chosen instead of 'master' are 'main', 'trunk' and
hint: 'development'. The just-created branch can be renamed via this command:
hint:
hint: git branch -m <name>
Successfully initialized git.

Then we will change our home directory to the created ones.

ramansah@infodiginet:~$ cd diginet-project/
ramansah@infodiginet:~/diginet-project$ ls -ltr
total 856
-rw-r--r-- 1 ramansah ramansah 273 Oct 21 21:45 tsconfig.spec.json
-rw-r--r-- 1 ramansah ramansah 901 Oct 21 21:45 tsconfig.json
-rw-r--r-- 1 ramansah ramansah 263 Oct 21 21:45 tsconfig.app.json
-rw-r--r-- 1 ramansah ramansah 1068 Oct 21 21:45 README.md
-rw-r--r-- 1 ramansah ramansah 1046 Oct 21 21:45 package.json
-rw-r--r-- 1 ramansah ramansah 2919 Oct 21 21:45 angular.json
drwxr-xr-x 4 ramansah ramansah 4096 Oct 21 21:45 src
-rw-r--r-- 1 ramansah ramansah 826621 Oct 21 21:48 package-lock.json
drwxr-xr-x 601 ramansah ramansah 20480 Oct 21 21:48 node_modules

then run the application by submitting following command line :

$ ng serve

Output :

ramansah@infodiginet:~/diginet-project$ ng serve
? Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more
details and how to change this setting, see https://angular.io/analytics. Yes

Thank you for sharing pseudonymous usage data. Should you change your mind, the following
command will disable this feature entirely:

ng analytics disable

Global setting: enabled
Local setting: enabled
Effective status: enabled
✔ Browser application bundle generation complete.

Initial Chunk Files | Names | Raw Size
vendor.js | vendor | 2.35 MB |
polyfills.js | polyfills | 333.18 kB |
styles.css, styles.js | styles | 230.93 kB |
main.js | main | 48.34 kB |
runtime.js | runtime | 6.53 kB |

| Initial Total | 2.95 MB

Build at: 2023-10-22T01:57:04.960Z - Hash: a8af327fceba6284 - Time: 20906ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully.

Then we will verify the live development server is listinening on localhist port 4200.

Conclusion

Angular is a powerful and versatile front-end framework that has earned its place in the modern web development landscape. Its modular architecture, two-way data binding, TypeScript support, and extensive library of features make it a top choice for building dynamic and responsive web applications. Whether you are working on enterprise-level projects, SPAs, or any other web development endeavor, Angular can empower you to create cutting-edge solutions efficiently and effectively. By staying up-to-date with Angular and leveraging its capabilities, developers can continue to push the boundaries of web development and provide users with a seamless and engaging experience.