26 top angular 8 interview questions to know in 2020 [www.full stack.cafe]
0 likes375 views
The document discusses 26 top Angular 8 interview questions, including questions about the difference between Promises and Observables, the purpose of ngOnInit versus the constructor, and what AOT (Ahead-of-Time compilation) is. It also covers questions about new features in Angular 8 like Bazel, Ivy, and changes to the lazy loading and location modules. Key topics covered include components, routing, RxJS, templates, and lifecycle hooks.
26 top angular 8 interview questions to know in 2020 [www.full stack.cafe]
- 1. 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.cafeblogangular-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?
- 2. 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?
- 3. ## 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
- 4. 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.
- 5. 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
- 6. 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.cafeblogangular-8-interview-questions) Q14: Are there any pros/cons (especially performance-wise) in using local storage to replace cookie functionality? ★★★★
- 7. Topic: Angular Read Full Answer on FullStack.Cafe (https://www.fullstack.cafeblogangular-8-interview-questions) Q15: What is Zone in Angular? ★★★★ Topic: Angular Read Full Answer on FullStack.Cafe (https://www.fullstack.cafeblogangular-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.cafeblogangular-8-interview-questions) Q17: What is ngUpgrage? ★★★★ Topic: Angular Read Full Answer on FullStack.Cafe (https://www.fullstack.cafeblogangular-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.cafeblogangular-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.cafeblogangular-8-interview-questions) Q20: Explain the purpose of Service Workers in Angular ★★★★ Topic: Angular Read Full Answer on FullStack.Cafe (https://www.fullstack.cafeblogangular-8-interview-questions) Q21: What is the Angular equivalent to an AngularJS "$watch"? ★★★★★ Topic: Angular Read Full Answer on FullStack.Cafe (https://www.fullstack.cafeblogangular-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.cafeblogangular-8-interview-questions) Q23: Why did the Google team go with incremental DOM instead of virtual DOM? ★★★★★
- 8. Topic: Angular Read Full Answer on FullStack.Cafe (https://www.fullstack.cafeblogangular-8-interview-questions) Q24: Why Incremental DOM is Tree Shakable? ★★★★★ Topic: Angular Read Full Answer on FullStack.Cafe (https://www.fullstack.cafeblogangular-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.cafeblogangular-8-interview-questions) Q26: Angular 8: What are some changes in Location module? ★★★★★ Topic: Angular Read Full Answer on FullStack.Cafe (https://www.fullstack.cafeblogangular-8-interview-questions)