observables different from promises?

observables promises

Emit multiple values over a Emit a single value at a time.

period of time.
Are lazy: they’re not Are not lazy: execute
executed until we subscribe immediately after creation.
to them using the
subscribe() method.
Have subscriptions that are Are not cancellable.
cancellable using the
unsubscribe() method, which
stops the listener from
receiving further values.
Provide the map for forEach, Don’t provide any
filter, reduce, retry, and operations.
retryWhen operators.
Deliver errors to the Push errors to the child
subscribers. promises.

Create : Create:
const obs = new const promise = new Promise(() =>
Observable((observer) => { {

observer.next(10); resolve(10);

}) ; });

Transform: Transform:
Obs.pipe(map(value) => value * 2); promise.then((value) => value *
2);
 Subscribe: Subscribe:
const sub = obs.subscribe((value)
=> {
promise.then((value) => {

console.log(value)
console.log(value)

});
});

Unsubscribe: Unsubscribe:
sub.unsubscribe();
Can’t unsubscribe

What is multicasting?
Using the HttpClient module, you can communicate with a backend service and
fetch data.
Multitasking allows you to broadcast this fetched data to multiple subscribers in
one execution.
How will you set, get, and clear cookies in Angular?

Angular 9 Interview Questions

1. How is Constructor different from ngOnInit?

we should use constructor() to setup Dependency Injection, Initialization of class

fields etc.

ngOnInit is a life cycle hook called by Angular to indicate that the Angular is done
creating the component.

2. What's new about Angular 9?

the Ivy compiler which provides a huge boost in performance.

The Ivy compiler: The default use of the Ivy compiler is the most important feature of

Angular 9, Ivy is what actually designed to solve the major problems of Angular i.e the

performance and large file size.

3. What were the improvements in the tree shaking in Angular ?

 Tree shaking is a technique used to eliminate unused modules from the
final bundle file of an application.

reducing the download size and improving performance.

Angular 10 Interview Questions

1. Why was bazel deprecated in version 10?
Bazel is a builder for the Angular CLI that was deprecated in version
10. Here are some reasons for this deprecation: The Bazel
ecosystem for the web is still evolving at a rapid pace. The
introduction of the Angular Ivy compiler enables new ways to use
Bazel in a faster and more efficient manner.

2. How is Angular 10 better than the previous version?

As of my last knowledge update in September 2021, Angular 10 introduced
several improvements and features compared to the previous version
(Angular 9). However, please note that Angular is a rapidly evolving
framework, and newer versions may have been released since then, each
with its own set of enhancements. Here are some key improvements in
Angular 10:

1. Ivy Improvements: Angular 10 continued to refine the Ivy rendering

engine introduced in Angular 9. Ivy brings faster compilation times,
smaller bundle sizes, and improved tree-shakability of Angular
applications. With each release, the Angular team worked on making Ivy
even more efficient and reliable.
2. TypeScript Updates: Angular 10 was updated to support TypeScript 3.9,
which introduced new TypeScript features and improvements, such as the
--strict option for stricter type checking.
3. Improved Build Optimizer: Angular's build optimizer was enhanced in
Angular 10, resulting in smaller bundle sizes and improved application
loading performance.
4. Deprecation Warnings: Angular 10 introduced deprecation warnings to
help developers prepare for upcoming breaking changes. These warnings
were intended to make it easier for developers to migrate their code to
newer versions of Angular.
5. Improved Linting: The Angular CLI in version 10 integrated with TSLint's
successor, ESLint, offering improved linting capabilities and alignment with
modern JavaScript linting standards.
6. Dependency Updates: Angular 10 included updates to various
dependencies, including Angular Material, RxJS, and other libraries used
within the Angular ecosystem.
7. Router Updates: Angular's router received updates to improve
navigation and route handling, making it more robust and reliable.
8. ngUpgrade Improvements: For developers using ngUpgrade to migrate
AngularJS (Angular 1.x) applications to Angular, Angular 10 included
updates to simplify the upgrade process.
9. Bug Fixes and Performance Enhancements: Like every Angular
release, Angular 10 included numerous bug fixes and performance
improvements to make the framework more stable and efficient.
10.Documentation Enhancements: The Angular documentation was
updated and improved with each release, including Angular 10, to provide
clearer explanations and examples for developers.

It's essential to keep in mind that Angular continues to evolve with each new
release, and the benefits of a specific version depend on your project's needs
and requirements. When considering an upgrade, it's advisable to consult the
official Angular release notes and documentation for the most accurate and
up-to-date information on the improvements and changes in each version.

3. How does Angular 10 boost ngcc performance?

As of my last knowledge update in September 2021, Angular 10 included
some improvements related to the Angular Compatibility Compiler (ngcc) to
boost its performance. Ngcc is a tool used to compile and process Angular
libraries to make them compatible with the Ivy rendering engine. Here are
some ways in which Angular 10 aimed to improve ngcc performance:

1. Parallel Processing: Angular 10 introduced parallel processing for ngcc.

This means that ngcc can process multiple libraries simultaneously, taking
advantage of multi-core processors. Parallel processing significantly
speeds up the compilation of Angular libraries, especially in projects with a
large number of dependencies.
2. Incremental Compilation: Angular 10 improved the incremental
compilation feature of ngcc. Incremental compilation means that ngcc only
recompiles the parts of a library that have changed since the last
compilation. This reduces the time required to update Angular libraries
when making changes to your project.
3. Optimized Processing: Angular 10 included optimizations in ngcc's
processing logic. These optimizations aimed to make ngcc smarter about
which parts of a library need recompilation, further reducing unnecessary
work and improving performance.
4. Reduced Memory Usage: Ngcc's memory usage was optimized in
Angular 10, which can be particularly beneficial in environments with
limited memory resources.
5. Caching: Angular 10 introduced caching mechanisms to store the results
of ngcc compilations. This means that if you've compiled a library once,
subsequent compilations can reuse the cached results, saving time during
builds.
6. Enhanced Logging: Angular 10 provided improved logging and reporting
for ngcc, making it easier to identify any issues or bottlenecks during the
compilation process.

Overall, these enhancements in Angular 10 were designed to make ngcc

more efficient and faster, particularly in large Angular projects with many
dependencies. The goal was to reduce the time and resources required to
compile and process Angular libraries, resulting in faster build times and
better developer productivity.

Please note that Angular's development continues, and newer versions may
have introduced further improvements and optimizations. Therefore, it's a
 good practice to consult the official Angular release notes and documentation
for the latest information on ngcc and its performance enhancements in the
most recent versions of Angular.

4. What are the advantages of choosing Angular 10?

1. Automatic Synchronization With Two-Way Data Binding

The two-way data binding enables the synchronization of data between

the Model and the View. As a result, these two components are
automatically updated when data is altered or amended. Furthermore, this
occurs in real-time, avoiding engineers from devoting additional time and
effort to manual changes.

2. Optimized Server Communication

With Angular, caching becomes a breeze! By producing static files, Angular

eliminates the extra load on CPUs. Furthermore, the framework’s response time
to API calls is quite fast. In the case of an Angular application, the pages in the
document object model are rendered for user actions. It provides a rapid user
experience and does not need users to wait for the app to become fully engaged.

3. POJO Model to Eliminate External Dependencies

The Plain Old JavaScript Objects (POJO) Model is used by Angular to make the
code structure portable and independent. This enables us to avoid introducing
complicated functions or methods to the programme. It also eliminates the need
for third-party frameworks or plugins.
Because POJO needs less coding, apps produced with Angular load quickly and
give outstanding user accessibility. One of the best Angular benefits is that the
model allows us to keep the scripts clean, making the framework goal-oriented.

4. Testing in Angular – An Integral Part

The Angular framework includes testing as a standard feature. In Angular,

all JavaScript code is subjected to a set of tests. The ease of testing allows
us to start from scratch and test all of the components at the same time.
Thanks to Angular’s dependency injection which is in charge of all scopes
and controllers. Because of this requirement, Angular’s unit test feature
may force dependency injection by injecting mock/dummy data into the
controller to do the testing.

5. Angular Material – A Comprehensive Modern UI

Angular Materials follow Google’s Material Design standards. It comes with

navigation elements, layout, buttons, indicators, and pre-installed data tables.
Furthermore, Angular Material not only creates a pleasing user experience but
also generates apps such as Google. Nevertheless, apps such as Google Drive,
Android OS, Gmail, and others have become everyday necessities for consumers.
Thus this becomes one of the best benefits of Angular.

6. Angular & Single Page Applications

A single page application’s seamless operation is dependent on two factors. One

is that when the website loads, all of the required JavaScript, CSS, and HTML
codes are obtained at the same time. The second is that they are retrieved as
and when needed, based on the user’s actions and behaviour. While users are
surfing the app, there is no page reloading, which necessitates dynamic contact
with servers.
Angular, on the other hand, can easily manage all of these complexities. If your
product concept focuses on the creation of a revolutionary single-page
application, using Angular for development is the ideal option.

7. Code Consistency and Robust Ecosystem

The Angular CLI tool allows developers to establish basic projects, perform tests,
and add new functionalities in a single project while keeping the entire team
informed. Angular’s style guide is frequently appreciated by the developers. This
makes team communication more comfortable and is less likely to be
misconstrued.
Thanks to the framework’s extensive ecosystem, which has generously provided
the developer community with the power of dependency injection and other
resources.

8. Model-View-ViewModel (MMVC) Architecture to Unify

Independent Structures

Developers are more confident in building a clean user interface with seamless
business logic as the framework separates business logic from UI components.
This is because of the controller’s rapid communication between the model and
the view component. As a result, data is shown as rapidly as feasible and this
marks as one of the best angular benefits.

9. Ivy Renderer – Next-Generation Renderer for Enhanced

Performance

Ivy renderer strives for exceptional code debugging and a user-friendly app
experience. It makes the framework more accessible and sets a good example
by lowering file sizes while still maintaining the framework as a feature-rich
platform. It wasn’t in its final shape when it was unveiled at NG-CONF 2018,
however the recent versions of Angular presently offers the best of it. With the
introduction of Angular 9, the contemporary Angular engine has be in its full
form.

10. Active Community & Easy-to-Access Information

The numerous advantages of Angular has made the platform popular among
developers and engineers since its inception. Angular is simple to incorporate for
those who want to get the most out of it, with a wealth of resources such as
study materials, reference articles, FAQs, and much more.
5. Features of angular 10?
1. Language Service

The language-service-specific compiler enables multiple typecheck

files by using the project interface which creates ScriptInfos as
necessary. Autocompletion is also seemed to have been removed
from HTML entities, such as &, <, etc., so as to safeguard the
inhouse core functionality of Angular LS, which holds questionable
value and a performance cost.

2. New Default Browser Configuration

Browser configuration for new projects have been updated to outdo

older and less used browsers. This includes the side effect of
disabling ES5 builds by default for new projects. One simply has to
add the required browsers in the .browserslist RC file.to enable ES5
builds and differential loading for browsers.

3. Compiler Update

In the latest angular version, a compiler interface has been added in

order to wrap the actual ngtsc compiler. Angular version 10 has
added name spans for property reads and method calls. In addition
to this Dependency information, ng-content selectors, Angular
Language Service have also been added to the metadata.

It also welcomes the propagation of the precise cost span in an

Expression Binding of a micro syntax expression to ParsedProperty,
which, in turn, might propagate the span to the template ASTs (both
VE and Ivy).

4. Optional Stricter Settings

Angular version 10 offers a more strict project setup in order to

create a new workspace with ng new.
ng new --strict

Once this flag is enabled, it initializes the new project with a couple
of new settings that improve maintainability, assist in catching bugs
well ahead in time, and permit the CLI to perform advanced
optimizations on your app. Enabling this flag configures the app as
side-effect free to ensure more advanced tree-shaking.

5. Ngcc

With this angular 10 feature, there has been an implementation of a

Program-based entry-point finder, which is designed to only process
entry points that can only be reached by a program defined by a
tsconfig.json file.

By using this option, one can catalyze the process in places with a
number of dependencies installed with relatively small numbers of
entry points that are actually imported into the application. This
particular feature helps manifest and reduce the file size of the
entry-point.

The base path of the package and entry points need not be stored in
the file, and hence Storing unnecessary empty arrays can be
avoided. In the previous versions, ngcc seemed to parse the files of
the entry point in order to compute dependencies. This would take a
lot of time for large node modules.

6. Performance Improvements

One can see improvement in the performance that is achieved by

reducing the size of the entry point. In addition, caching of
dependencies is executed within the entry point manifest and are
read from there as opposed to being computed each time.
Previously, even though an entry point did not need processing,
ngcc (Angular Ivy compatibility compiler) might parse the files of the
entry point to compute dependencies, which might take a whole lot
of time for large_node modules.

The computation of basePaths has been made lazy in order to

improve performance. What previously was done whenever the
finder was instantiated is now only done if needed in
TargetedEntryPointFinder.

7. Service Workers

In the previous versions of angular Vary headers might have been

taken into consideration while retrieving resources from the cache,
however absolutely stopping the retrieval of cached assets and
main to unpredictable behavior due to inconsistent/buggy
implementations in various browsers.

However, in angular version 10 Vary headers are overlooked while

retrieving sources from the ServiceWorker caches, which can result
in sources being retrieved even when their headers are not similar.
If your application needs to differentiate its responses based totally
on request headers, it is important to ensure that the Angular
ServiceWorker is configured to avoid caching the affected resources.

8. Typescript 3.9, TSLib 2.9 & TSLint v6

Angular 10 features typescript 3.9. As opposed to the previous

version which supported typescript 3.6, 3.7 and even 3.8. Typescript
is a language that builds on JavaScript by adding syntax for type
declarations and annotations which is used by the TypeScript
 compiler to type-check our code. This in turn clean readable
JavaScript that runs on lots of different runtimes.

Typescript helps save the files with its rich editing functionality
across editors. With Typescript 3.9 the team has worked on
performance, polish, and stability. Apart from error-checking, this
version powers things like completions, quick fixes and speeding up
the compiler and editing experience.

Let's have a look at some of the exciting features of Typescript 3.9:

 TSlib, the runtime library for TypeScript consisting of helper

functions, has now been updated to TSlib 2.0. Along with this there
is an upgrade on the TSLint static analysis tool for TypeScript to
version 6.
 The // @ts-expect-error comments before a code line as a prefix, so
that the TypeScript won’t report the error. Typescript will show
‘Unused '@ts-expect-error' directive if there isn't any error.
 Angular 10 also has deprecated the inclusion of ESM5 or FESM5
bundles which saves 119MB of download and install time while
running yarn or npm install for Angular packages and libraries. With
angular version 10 TypeScript automatically detects the types of
imports that are used to keep any type of files style clean. Any
downleveling to support ES5 in this version will be done at the end
of the build process.
 Complications with functions like ‘Promise.all’ and ‘Promise.race’
have been sabotaged and the 3.7 version has now been fixed.
 With the latest versionTypeScript provides a quick fix solution to
add missing return statements in cases where one might forget to
return the value from a function at the end of that function.
 "}" and ">" are now considered invalid JSX text characters with the
typescript new version.

9. Localization

One of the best features of Angular 10 is that the latest angular version
supports for merging of multiple translation documents which could only
load one file in the previous versions.

Now customers can specify a couple of documents in keeping with locale,

and the translations from each of these documents can be merged
together by means of a message ID. In practice, this means you need to
put the documents so as of most essential first, with fallback translations
later.

10. Router

The CanLoad guard now can go back Urltree in angular version 10. A
CanLoad guard returning Urltree cancels the cutting-edge navigation and
helps to redirect. This matches current behavior to the available
CanActivate guards that are also apparently added. This however doesn’t
affect the preloading. Also, any routes with a CanLoad guard won’t be
preloaded, and the guards will not be completed as a part of preloading.

11. Deprecation

Angular 10 features typescript 3.9. As opposed to the previous version

which supported typescript 3.6, 3.7 and even 3.8. Angular 10 also has
deprecated the inclusion of ESM5 or FESM5 bundles which saves 119MB of
download and install time while running yarn or npm install for Angular
packages and libraries. any down leveling to support ES5 in this version
will be done at the end of the build process.

We will also see a deprecation of older browsers including IE 9, 10, and

Internet Explorer Mobile that are Based on heavy consultation with the
community.

Angular 11 Interview Questions

1. How does Angular 11 offer support for Hot Module Replacement?

Hot Module Replacement speeds up development and debugging. It is a

Webpack feature that updates changed modules without reloading the
whole page. Angular 11 made it easy to use HMR by providing it out-of-box
in the CLI.

2. What is an operation byelog?

Operation Byelog is the first entity where the angular team concentrated
on spending a substantial engineering effort, especially in triage
problems and PRs, before providing a good understanding of the
extensive needs of the group. Hence it can now be confirmed that the
initial target is over!

3. What is automatic font inlining in Angular 11?

During compile time, Angular CLI will download and inline the fonts
that your application is using. This performance update speed up
the first contentful paint(FCP) and this feature is enabled by default
in apps built with version 11.

4. What is the use of the parallel function?

The parallel function works with asynchronous actions in the tests by

letting the developers function multiple asynchronous interactions with
components in parallel.
 5. How does the manualChangeDetection function impact change
detection in Angular 11?
Change detection can be triggered either manually or through an
asynchronous event (for example, a user interaction or an
XMLHttpRequest completion). Change detection is highly optimized
and performant, but it can still cause slowdowns if the application
runs it too frequently.

6. Why did Angular 11 promote ESLint over TSLint?

ESLint is compatible with both JavaScript and TypeScript. This makes

jumping between the two languages a bit easier, especially for new
developers. The core concept of TypeScript is a 100% compatible superset
of JavaScript, so parity in tooling keeps the two languages in step.

Angular 12 and 13 Interview Questions

1. What is the component test harness in Angular 12?
A component harness is a class that lets a test interact with a component
via a supported API. Each harness's API interacts with a component the
same way a user would. By using the harness API, a test insulates itself
against updates to the internals of a component, such as changing its
DOM structure.

2. What is a nullish coalescing operator?

The nullish coalescing ( ?? ) operator is a logical operator that returns its

right-hand side operand when its left-hand side operand is null or
undefined , and otherwise returns its left-hand side operand.

3. What should you migrate to Angular 12?

Ivy- a step closer

The big announcement of deprecating the View Engine is out, and

hence, none of the future major releases will have it. If your existing
libraries are using View Engines, do not worry, because your
libraries will work fine with Ivy applications as well.
 Angular developers have nothing to fret about here, but yes
the Angular library authors need to start working upon the Ivy
transition and the Angular community’s post will help them.
★ Switch from i18n

We no more need to be cautious about using the legacy message ID

formats like whitespaces, ICU expressions, and format templates.
Angular 12 has brought a more resilient and intuitive ID format that
will minimize the invalidation and retranslation cost.

Though all the new projects since Angular v11 were auto-configured
to the new message ID. Now, with Angular 12 we’ve got the
essential tools to migrate the translations.

★ Coming up for Protractor

Remember Protractor? Though the core purpose of the state of the

protractor was to manage the flow of the asynchronous operation
without using promises, later it was proved that the protractor
doesn’t help in upgradation. Hence, it is kept limited to use in
Angular JS and avoided in Angular.

The progress on the protractor feedback is still ongoing and

henceforth, the Angular community has decided to restrict usage of
protractor in new projects and rather using 3rd party solutions in
Angular CLI.

Some of the alternative solutions are tried with Cypress, WebDriverIO, and
Test Cafe.

★ Nullish Coalescing
 Typescript developers out there might have already been excited
about this particular Angular 12 feature. The fantastic nullish
coalescing operator (??) that enables you to write cleaner code, is now
acceptable in Angular 12 templates. So, instead of this:

You gotta write just this:

Angular Learning

Google always strives to improve the developers’ learning experience,

and because of the same reason, you will find some change in the Angular
12 documentation with an edition of the content projection guide.

Also, there’s a contributor’s guide that helps the developers improve their
project documentation. More to this, ever since the Angular 11 release,
the community shares useful ways to debug guides and videos.
★ Style Improvements

The best part of Angular 12 features is this amazing thing- they’ve added
support for inline SaaS in styling fields and component decorators. Earlier,
developers could only avail SaaS from external mediums because of the
restriction of the Angular compiler.

You can add the support by using the SCSS or you should add the
following command: “inlineStyleLanguage”: “scss” in your json file.
Talking about the Tailwind CSS, Angular v11.2 had already enabled the
support for styling. Another noteworthy update is that Angular Material
and Angular CDK have adopted the new SaaS module, for which you’ll
have to download saas npm package and switch from node-saas.

The new SaaS API comes with the @use syntax, which makes it more
useful and has meaningful naming conventions. As you update your web
app to Angular 12 features, you will be automatically switched to the new
SaaS API.

★ Bid Adieu IE11

It is rightly said “Nothing lasts forever” and now is the time we bid
farewell to Internet Explorer 11. You will find the deprecation message in
the Angular 12 update for Internet Explorer 11 IE11. Until Angular v11, it
was supported, but not continued.

The not-so-good news for IE lovers- your favorite browser IE11 will not be
supported by the new version of Angular – v12.
★ Some more of new Angular 12 features

Here are additional features that when your Angular 12 download is done:

 Prevention of accidental development builds with executing ng

build

 CLI strict mode-by default

 Mandate implication of the Ivy-based language support

 Experimental support- Webpack 5

 Support for typescript v 4.2

4. Why is the View Engine no longer available in Angular 13?

 Relying on View Engine has its maintenance costs, and also increases the
complexity of Angular 13 codebases. To avoid that hassle, Ivy is now the
only view engine supported by Angular.

The main new features in Angular 13 are TypeScript 4.4 support, version
7.4 of RxJS, router changes, Angular CLI enhancements, testing
improvements, and dynamic components. Many of the Ivy-based features
and optimizations have been expanded to help you and your teams build
excellent apps.

5. Why has IE 11 support been removed in Angular 13?

Angular will no longer support Internet Explorer 11 as of version 13.

Dropping IE 11 is a positive factor because it results in smaller bundle size
and faster app loading. In addition, Angular can now use modern browser
features like CSS variables and web animations via native web APIs due to
these enhancements.

Service workers in Angular

In simple words, service workers in Angular are like behind-the-scenes helpers
for web applications. They work in the background to provide your app with
superpowers like:

1. Offline Mode: They save a copy of your app on the user's device so that
even if the internet connection is lost, your app can still work.
2. Speed Boost: They make your app faster by storing commonly used
things (like images and scripts) on the user's device, so your app doesn't
have to download them every time.
3. Background Updates: They quietly update your app in the background,
so users always have the latest version without even knowing it.
4. Push Notifications: They enable your app to send pop-up messages to
users, even when the app is closed, like how your phone gets notifications.

Think of service workers as your app's loyal sidekick, ensuring it runs smoothly,
even when the internet is acting up, and giving your users a better experience.

Adding a service worker to your project

To set up the Angular service worker in your project, use the CLI command ng
add @angular/pwa. It takes care of configuring your application to use service
workers by adding the @angular/service-worker package along with setting up the
necessary support files.

ng add @angular/pwa --project <project-name>

The preceding command completes the following actions:

1. Adds the @angular/service-worker package to your project.

 2. Enables service worker build support in the CLI.
3. Imports and registers the service worker in the application module.
4. Updates the index.html file:
o Includes a link to add the manifest.webmanifest file
o Adds a meta tag for theme-color
5. Installs icon files to support the installed Progressive Web App (PWA).
6. Creates the service worker configuration file called ngsw-config.json, which
specifies the caching behaviors and other settings.
Now, build the project:

ng build

The CLI project is now set up to use the Angular service worker.

web worker

Web workers are used for running any script in the background threads, without
interfering with the user's interface. So if you have heavy computations on your
user side, you can use web workers to do the heavy tasks while allowing the
browser to give your users a smooth and better experience.

Creating a Web Worker

It’s quite easy to create a web worker in Angular. You can use Angular CLI

and use ng generate command.

ng generate web-worker <location>

This command will do the following:

1. Creates a new file tsconfig.worker.json. This file looks as below.

2.Creates app.worker.ts and this is where you get the response from the
worker.

3.In angular.json, adds ”webWorkerTsConfig”: “tsconfig.worker.json” in build > options and

registers the generated tsconfig file for the web worker.

4. Your app.component.ts will also be modified and the worker will be used here
Now if you run your Angular application using npm start, you can see the above

response in Console.

Server-side rendering

Server side Rendering (SSR) is a modern technique to convert a Single

Page Application (SPA) running in the browser into a server based
application. Usually, in SPA, the server returns a simple index. html file
with the reference to the JavaScript based SPA app.
By default, Angular renders applications only in a browser. Angular Universal
allows Angular to render an application on the server, generating static HTML
content, which represents an application state. Once the HTML content is
rendered in a browser, Angular bootstraps an application and reuses the
information available in the server-generated HTML.

With server-side rendering an application generally renders in a browser faster,

giving users a chance to view the application UI before it becomes fully
interactive. See the "Why use Server-Side Rendering?" section below for
additional information.

Also for a more detailed look at different techniques and concepts surrounding
SSR, check out this article.

You can enable server-side rendering in your Angular application using

the @nguniversal/express-engine package as described below.

Angular guards:
In Angular, guards are a set of mechanisms that allow you to control the
navigation and access to different parts of your application. They are used to
protect routes, control permissions, and manage the flow of your application
based on certain conditions. Angular provides several types of guards to handle
various scenarios:

1. CanActivate: This guard determines whether a route can be activated.

It's commonly used to check if a user is authenticated before allowing
access to certain routes. If CanActivate returns true, the route is
accessible; if it returns false, the route is blocked.
2. CanActivateChild: Similar to CanActivate, but specifically for child
routes. It's used to control access to child routes within a parent route.
3. CanDeactivate: This guard is used to determine if a user can leave a
route. For example, it can be used to prompt the user with a confirmation
dialog before leaving a form with unsaved changes.
4. CanLoad: This guard prevents the asynchronous loading of feature
modules until certain conditions are met. It's used to protect lazy-loaded
routes, ensuring that the module is loaded only when the guard returns
true.
5. Resolve: The Resolve guard is used to fetch data before a route is
activated. It ensures that the necessary data is available before rendering
the component associated with the route.
6. AuthGuard: This is a custom guard that you can create to implement
specific access control logic. For example, you might create an
AdminAuthGuard to check if a user has admin privileges.

lazy loading in Angular

Lazy loading is the process of loading components, modules, or other assets of a
website as they're required.

Since Angular creates a SPA (Single Page Application), all of its components
are loaded at once. This means that a lot of unnecessary libraries or modules
might be loaded as well.
For a small application this would be okay. But as the application grows the load
time will increase if everything is loaded at once. Lazy loading allows Angular to
load components and modules as and when they're needed.