FullStack.

Cafe - Never Fail Tech Interview

(https://www.fullstack.cafe)
26 Top Angular 8 Interview Questions To Know in 2020
Originally published on 26 Top Angular 8 Interview Questions To Know in 2020 | FullStack.Cafe
(https://www.fullstack.cafe\blog\angular-8-interview-questions)

Q1 : Explain the difference between Promise and Observable in Angular?

Q2 : Why should ngOnInit be used, if we already have a constructor?

Q3 : What is AOT?

Q4 : What is the use of codelyzer?

Q5 : What is the purpose of Wildcard route?

Q6 : What are custom elements?

Q7 : What are the utility functions provided by RxJS?

Q8 : What is subscribing?

Q9 : What's new in Angular 8?

Q10 : Angular 8: What is Bazel?

Q11 : Angular 8: What is Angular Ivy?

Q12 : Angular 8: Explain Lazy Loading in Angular 8?

Q13 : How to detect a route change in Angular?

Q14 : Are there any pros/cons (especially performance-wise) in using local storage to replace
cookie functionality?

Q15 : What is Zone in Angular?

Q16 : What does a just-in-time (JIT) compiler do (in general)?

Q17 : What is ngUpgrage?

Q18 : What is incremental DOM? How is it different from virtual DOM?

Q19 : Angular 8: Why we should use Bazel for Angular builds?

Q20 : Explain the purpose of Service Workers in Angular

Q21 : What is the Angular equivalent to an AngularJS "$watch"?

Q22 : Just-in-Time (JiT) vs Ahead-of-Time (AoT) compilation. Explain the difference.

Q23 : Why did the Google team go with incremental DOM instead of virtual DOM?
Q24 : Why Incremental DOM is Tree Shakable?

Q25 : Angular 8: How does Ivy affect the (Re)build time?

Q26 : Angular 8: What are some changes in Location module?

## Answers

Q1: Explain the difference between Promise and Observable in Angular? ★★★

Topic: Angular

Promises:

return a single value

not cancellable
more readable code with try/catch and async/await

Observables:

work with multiple values over time

cancellable
support map, filter, reduce and similar operators
use Reactive Extensions (RxJS)
an array whose items arrive asynchronously over time

Q2: Why should ngOnInit be used, if we already have a constructor? ★★★

Topic: Angular

The Constructor is a default method of the class that is executed when the class is instantiated and
ensures proper initialization of fields in the class and its subclasses.

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

Mostly we use ngOnInit for all the initialization/declaration and avoid stuff to work in the constructor. The
constructor should only be used to initialize class members but shouldn't do actual "work". So you should use
constructor() to setup Dependency Injection and not much else. ngOnInit() is better place to "start" - it's
where/when components' bindings are resolved.

Q3: What is AOT? ★★★

Topic: Angular

The Angular Ahead-of-Time compiler pre-compiles application components and their templates during the
build process.
Apps compiled with AOT launch faster for several reasons.

Application components execute immediately, without client-side compilation.

Templates are embedded as code within their components so there is no client-side request for
template files.
You don't download the Angular compiler, which is pretty big on its own.
The compiler discards unused Angular directives that a tree-shaking tool can then exclude.

Q4: What is the use of codelyzer? ★★★

Topic: Angular
All enterprise applications follows a set of coding conventions and guidelines to maintain code in better way.
Codelyzer is an open source tool to run and check whether the pre-defined coding guidelines has been
followed or not. Codelyzer does only static code analysis for angular and typescript project.

Codelyzer runs on top of tslint and its coding conventions are usually defined in tslint.json file. Codelyzer can
be run via angular cli or npm directly. Editors like Visual Studio Code and Atom also supports codelyzer just
by doing a basic settings.

Q5: What is the purpose of Wildcard route? ★★★

Topic: Angular

If the URL doesn't match any predefined routes then it causes the router to throw an error and crash the app.
In this case, you can use wildcard route. A wildcard route has a path consisting of two asterisks to match
every URL.

For example, you can define PageNotFoundComponent for wildcard route as below

{ path: '**', component: PageNotFoundComponent }

Q6: What are custom elements? ★★★

Topic: Angular

Custom elements (or Web Components) are a Web Platform feature which extends HTML by allowing you to
define a tag whose content is created and controlled by JavaScript code. The browser maintains a
CustomElementRegistry of defined custom elements, which maps an instantiable JavaScript class to an
HTML tag. Currently this feature is supported by Chrome, Firefox, Opera, and Safari, and available in other
browsers through polyfills.

Q7: What are the utility functions provided by RxJS? ★★★

Topic: Angular

The RxJS library also provides below utility functions for creating and working with observables.

1. Converting existing code for async operations into observables

2. Iterating through the values in a stream
3. Mapping values to different types
4. Filtering streams
5. Composing multiple streams

Q8: What is subscribing? ★★★

Topic: Angular

An Observable instance begins publishing values only when someone subscribes to it. So you need to
subscribe by calling the subscribe() method of the instance, passing an observer object to receive the
notifications.

Let's take an example of creating and subscribing to a simple observable, with an observer that logs the
received message to the console.
 Creates an observable sequence of 5 integers, starting from 1
const source = range(1, 5);

// Create observer object

const myObserver = {
next: x => console.log('Observer got a next value: ' + x),
error: err => console.error('Observer got an error: ' + err),
complete: () => console.log('Observer got a complete notification'),
};

// Execute with the observer object and Prints out each item
myObservable.subscribe(myObserver);
// => Observer got a next value: 1
// => Observer got a next value: 2
// => Observer got a next value: 3
// => Observer got a next value: 4
// => Observer got a next value: 5
// => Observer got a complete notification

Q9: What's new in Angular 8? ★★★

Topic: Angular

This release is mostly about Ivy and the possibility to give it a try, but it also includes a few features and
breaking changes, namely:

Differential loading - with differential loading, two bundles are created when building for production:
a bundle for modern browsers that support ES2015+ and a bundle for older browsers that only
support the ES5 version of JavaScript
TypeScript 3.4 support
Ivy - it is the new compiler/runtime of Angular. It will enable very cool features in the future, but it is
currently focused on not breaking existing applications.
Bazel support - it is a build tool developed and massively used by Google, as it can build pretty
much any language.
Lazy-loading with import() syntax

// from
loadChildren: './admin/admin.module#AdminModule'
// to
loadChildren: () => import('./races/races.module').then(m => m.RacesModule)

To help people migrating from AngularJS, a bunch of things have been added to the location
services in Angular
The service worker registration has a new option that allows to specify when the registration should
take place.
@angular/http has been removed from 8.0, after being replaced by @angular/common/http in 4.3
and officially deprecated in 5.0,

Q10: Angular 8: What is Bazel? ★★★

Topic: Angular
Google open sourced the software responsible for building most of its projects under the name Bazel. Bazel
is a powerful tool which can keep track of the dependencies between different packages and build targets.

Some of the features of Bazel are:

It has a smart algorithm for determining the build dependencies - based on the dependency graph
of a project, Bazel determines which targets it can build in parallel
Bazel is independent of the tech stack. We can build anything we want with it using the same
interface. For example, there are plugins for Java, Go, TypeScript, JavaScript, and more

Q11: Angular 8: What is Angular Ivy? ★★★

Topic: Angular

A big part of Angular is its compiler: it takes all your HTML and generates the necessary JS code. This
compiler (and the runtime) has been completely rewritten over the last year, and this is what Ivy is about.
The last rewrite was done in Angular 4.0.

Ivy is a complete rewrite of the compiler (and runtime) in order to:

reach better build times (with a more incremental compilation)

reach better build sizes (with a generated code more compatible with tree-shaking)
unlock new potential features (metaprogramming or higher order components, lazy loading of
component instead of modules, a new change detection system not based on zone.js…)

Q12: Angular 8: Explain Lazy Loading in Angular 8? ★★★

Topic: Angular

Lazy loading is one of the most useful concepts of Angular Routing and brings down the size of large files.
This is done by lazily loading the files that are required occasionally.

Angular 8 comes up with support for dynamic imports in our router configuration. This means that we use the
import statement for lazy loading the module and this will be understood by the IDEs, webpack, etc.

Angular 7:

{path: ‘user’, loadChildren: ‘./users/user.module#UserModule’}

Angular 8:

{path: ‘user’, loadChildren: () => import(‘./users/user.module’).then(m => m.UserModule)};

New with Angular 8, loadChildren expects a function that uses the dynamic import syntax to import your lazy-
loaded module only when it’s needed. As you can see, the dynamic import is promise-based and gives you
access to the module, where the module’s class can be called.

Q13: How to detect a route change in Angular? ★★★★

Topic: Angular

Read Full Answer on FullStack.Cafe (https://www.fullstack.cafe\blog\angular-8-interview-questions)

Q14: Are there any pros/cons (especially performance-wise) in using local storage to
replace cookie functionality? ★★★★
Topic: Angular

Read Full Answer on FullStack.Cafe (https://www.fullstack.cafe\blog\angular-8-interview-questions)

Q15: What is Zone in Angular? ★★★★

Topic: Angular

Read Full Answer on FullStack.Cafe (https://www.fullstack.cafe\blog\angular-8-interview-questions)

Q16: What does a just-in-time (JIT) compiler do (in general)? ★★★★

Topic: Angular

Read Full Answer on FullStack.Cafe (https://www.fullstack.cafe\blog\angular-8-interview-questions)

Q17: What is ngUpgrage? ★★★★

Topic: Angular

Read Full Answer on FullStack.Cafe (https://www.fullstack.cafe\blog\angular-8-interview-questions)

Q18: What is incremental DOM? How is it different from virtual DOM? ★★★★

Topic: Angular

Read Full Answer on FullStack.Cafe (https://www.fullstack.cafe\blog\angular-8-interview-questions)

Q19: Angular 8: Why we should use Bazel for Angular builds? ★★★★

Topic: Angular

Read Full Answer on FullStack.Cafe (https://www.fullstack.cafe\blog\angular-8-interview-questions)

Q20: Explain the purpose of Service Workers in Angular ★★★★

Topic: Angular

Read Full Answer on FullStack.Cafe (https://www.fullstack.cafe\blog\angular-8-interview-questions)

Q21: What is the Angular equivalent to an AngularJS "$watch"? ★★★★★

Topic: Angular

Read Full Answer on FullStack.Cafe (https://www.fullstack.cafe\blog\angular-8-interview-questions)

Q22: Just-in-Time (JiT) vs Ahead-of-Time (AoT) compilation. Explain the difference.

★★★★★

Topic: Angular

Read Full Answer on FullStack.Cafe (https://www.fullstack.cafe\blog\angular-8-interview-questions)

Q23: Why did the Google team go with incremental DOM instead of virtual DOM?
★★★★★
Topic: Angular

Read Full Answer on FullStack.Cafe (https://www.fullstack.cafe\blog\angular-8-interview-questions)

Q24: Why Incremental DOM is Tree Shakable? ★★★★★

Topic: Angular

Read Full Answer on FullStack.Cafe (https://www.fullstack.cafe\blog\angular-8-interview-questions)

Q25: Angular 8: How does Ivy affect the (Re)build time? ★★★★★

Topic: Angular

Read Full Answer on FullStack.Cafe (https://www.fullstack.cafe\blog\angular-8-interview-questions)

Q26: Angular 8: What are some changes in Location module? ★★★★★

Topic: Angular

Read Full Answer on FullStack.Cafe (https://www.fullstack.cafe\blog\angular-8-interview-questions)