26 Top Angular 8 Interview Questions To Learn in 2019 | FullStack.Cafe

Alex Ershov
Nov 1 · 11 min read

Q1: Explain the difference between Promise and Observable in 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

🔗 Source: stackoverflow.com
💡 Don’t miss: 116 More Angular Interview Questions & Answers

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

  • 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.

🔗 Source: medium.com
💡 Don’t miss: 116 More Angular Interview Questions & Answers

Q3: What is AOT?

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.

🔗 Source: stackoverflow.com
💡 Don’t miss: 116 More Angular Interview Questions & Answers

Q4: What is the use of codelyzer?

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.

🔗 Source: pankajagarwal.in
💡 Don’t miss: 116 More Angular Interview Questions & Answers

Q5: What is the purpose of Wildcard route?

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

🔗 Source: github.com/sudheerj
💡 Don’t miss: 116 More Angular Interview Questions & Answers

Q6: What are custom elements?

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.

🔗 Source: github.com/sudheerj
💡 Don’t miss: 116 More Angular Interview Questions & Answers

Q7: What are the utility functions provided by RxJS?

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

🔗 Source: github.com/sudheerj
💡 Don’t miss: 116 More Angular Interview Questions & Answers

Q8: What is subscribing?

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.

🔗 Source: github.com/sudheerj
💡 Don’t miss: 116 More Angular Interview Questions & Answers

Q9: What’s new in Angular 8?

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.
  • 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,

🔗 Source: blog.ninja-squad.com
💡 Don’t miss: 116 More Angular Interview Questions & Answers

Q10: Angular 8: What is Bazel?

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

🔗 Source: blog.mgechev.com
💡 Don’t miss: 116 More Angular Interview Questions & Answers

Q11: Angular 8: What is Angular Ivy?

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…)

🔗 Source: blog.ninja-squad.com
💡 Don’t miss: 116 More Angular Interview Questions & Answers

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.

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.

🔗 Source: dev.to
💡 Don’t miss: 116 More Angular Interview Questions & Answers

Q13: How to detect a route change in Angular?

In Angular you can subscribe (Rx event) to a Router instance. So you can do things like:

🔗 Source: medium.com
💡 Don’t miss: 116 More Angular Interview Questions & Answers

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

Cookies and local storage serve different purposes.

  • Cookies are primarily for reading server-side,
  • Local Storage can only be read by the client-side.

So the question is, in your app, who needs this data — the client or the server? If it’s your client (your JavaScript), then by all means switch to local storage. You’re wasting bandwidth by sending all the data in each HTTP header.

If it’s your server, local storage isn’t so useful because you’d have to forward the data along somehow (with Ajax or hidden form fields or something). This might be okay if the server only needs a small subset of the total data for each request.

🔗 Source: stackoverflow.com
💡 Don’t miss: 116 More Angular Interview Questions & Answers

Q15: What is Zone in Angular?

NgZone is a wrapper around Zone.js which is a library that creates a context around asynchronous functions in order to to make them trackable. Angular's change detection is heavily dependent on Zones.

🔗 Source: stackoverflow.com
💡 Don’t miss: 116 More Angular Interview Questions & Answers

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

A JIT compiler runs after the program has started and compiles the code (usually bytecode or some kind of VM instructions) on the fly (or just-in-time, as it’s called) into a form that’s usually faster, typically the host CPU’s native instruction set. A JIT has access to dynamic runtime information whereas a standard compiler doesn’t and can make better optimizations like inlining functions that are used frequently.

This is in contrast to a traditional compiler that compiles all the code to machine language before the program is first run.

🔗 Source: stackoverflow.com
💡 Don’t miss: 116 More Angular Interview Questions & Answers

Q17: What is ngUpgrage?

NgUpgrade is a library put together by the Angular team, which we can use in our applications to mix and match AngularJS and Angular components and bridge the AngularJS and Angular dependency injection systems.

🔗 Source: blog.nrwl.io
💡 Don’t miss: 116 More Angular Interview Questions & Answers

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

Incremental DOM is used internally at Google, and it is defined by this key idea:

Every component gets compiled into a series of instructions. These instructions create DOM trees and update them in-place when the data changes.

React was the first mainstream framework to use virtual DOM, which is defined by this key idea:

Every component creates a new virtual DOM tree every time it gets rerendered. React compares the new virtual DOM tree with the old one and then applies a series of transformations to the browser DOM to match the new virtual DOM tree. 🔗 Source: blog.nrwl.io
💡 Don’t miss: 116 More Angular Interview Questions & Answers

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

Bazel allows us to build at scale. Ideally, the initial build time with Bazel will be comparable to the traditional JavaScript tooling; the difference is that the time will not grow exponentially when our application’s size increases. With Bazel most of the time the build time will stay constant.

Many large projects report a significant increase in their incremental builds when their codebase grows. By analyzing the build graph provided by the BUILD.bazel files, Bazel rebuilds only the packages which have changed and nothing else.

🔗 Source: blog.mgechev.com
💡 Don’t miss: 116 More Angular Interview Questions & Answers

Q20: Explain the purpose of Service Workers in Angular

At its simplest, a service worker is a script that runs in the web browser and manages caching for an application.

Service workers function as a network proxy. They intercept all outgoing HTTP requests made by the application and can choose how to respond to them. For example, they can query a local cache and deliver a cached response if one is available. Proxying isn’t limited to requests made through programmatic APIs, such as fetch; it also includes resources referenced in HTML and even the initial request to index.html. Service worker-based caching is thus completely programmable and doesn’t rely on server-specified caching headers.

The service worker is preserved after the user closes the tab. The next time that browser loads the application, the service worker loads first, and can intercept every request for resources to load the application. Using a service worker to reduce dependency on the network can significantly improve the user experience.

🔗 Source: angular.io
💡 Don’t miss: 116 More Angular Interview Questions & Answers

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

The solution is the set syntax from ES6. The set syntax binds an object property to a function to be called when there is an attempt to set that property.

🔗 Source: medium.com
💡 Don’t miss: 116 More Angular Interview Questions & Answers

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

JIT — Compile TypeScript just in time for executing it:

  • Compiled in the browser.
  • Each file compiled separately.
  • No need to build after changing your code and before reloading the browser page.
  • Suitable for local development.

AOT — Compile TypeScript during build phase:

  • Compiled by the machine itself, via the command line (Faster).
  • All code compiled together, inlining HTML/CSS in the scripts.
  • No need to deploy the compiler (Half of Angular size).
  • More secure, original source not disclosed.
  • Suitable for production builds.

🔗 Source: stackoverflow.com
💡 Don’t miss: 116 More Angular Interview Questions & Answers

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

They have one goal in mind: applications have to perform well on mobile devices. This mainly meant optimizing two things: the bundle size and the memory footprint.

To achieve the two goals:

  • The rendering engine itself has to be tree shakable
  • The rendering engine has to have low memory footprint

🔗 Source: blog.nrwl.io
💡 Don’t miss: 116 More Angular Interview Questions & Answers

Q24: Why Incremental DOM is Tree Shakable?

When using incremental DOM, the framework does not interpret the component. Instead, the component references instructions. If it doesn’t reference a particular instruction, it will never be used. And since we know this at compile time, we can omit the unused instruction from the bundle.

Virtual DOM requires an interpreter. What part of that interpreter is needed and what part is not isn’t known at compile time, so we have to ship the whole thing to the browser.

🔗 Source: blog.nrwl.io
💡 Don’t miss: 116 More Angular Interview Questions & Answers

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

One of the Ivy goals is to reach better build times (with a more incremental compilation). It’s achieved by the new locality principle:

To compile an AppComponent that uses AnotherComponent in its template, Ivy doesn't need to know anything about the pony component.

Previously, when you were working on your application, Angular had to recompile everything inside your module to know what had changed, because the generated code of a component could be using internal details of another component.

Now each component references the directives and components it uses only by their public APIs. So if you modify an internal detail of a component or a directive, only the actual components that use it will be recompiled! It could lead to huge benefits in rebuild times for applications with dozens of components and directives, as you will go from recompiling all of them to recompile just the needed ones.

🔗 Source: blog.ninja-squad.com
💡 Don’t miss: 116 More Angular Interview Questions & Answers

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

To help people migrating from AngularJS, a bunch of things have been added to the location services in Angular 8.

  • PlatformLocation now offers access to the hostname, port and protocol, and a new getState() method allows to get the history.state.
  • A MockPlatformLocation is also available to ease testing.

All this is really useful if you are using ngUpgrade, otherwise you probably won’t need it.

🔗 Source: blog.ninja-squad.com
💡 Don’t miss: 116 More Angular Interview Questions & Answers


Originally published at https://www.fullstack.cafe.

Alex Ershov

Written by

Micropreneur. Dev. Husband. Dad.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade