Angular 2 Gotchas and Interview Questions

Recently my team had the opportunity to create a new interactive web application from scratch, so we decided to write it using Angular 2 and Spring Boot.

Angular 2 is a well-rounded framework. I don’t think I have to say much in its support because it is frequently mentioned as being one of the best available front-end frameworks currently available. I wouldn’t be surprised if it becomes the de facto framework for developing front-end applications in the upcoming year. Using it you can recognize the years of experience, lessons learned and best practices that have been incorporated into its core design, such as Modularity, Components, Dependency Injection, Security, Testability, and more.

This is my first deep dive into the Angular 2 framework, and along with the readily apparent greatness, I’m starting to get glimpses of less than desirable dark spots as well. Right now I’m still undecided on whether or not these concerns may or may not turn out to be shortcomings in the framework down the line. Like many, I too have been burned by a shiny, new, all promising framework in the past, so I’ve decided to take a moment and share these concerns with the well-respected DZone community in hopes of getting some constructive opinions on this topic.

Angular 2 Gotchas

1. Compilation

As of now, Angular 2 supports development in Typescript, JavaScript, and Dart. Even though the framework supports JavaScript and Dart, the true contender for any new potential development seems to be Typescript. Moreover, the framework itself is written in Typescript.

Typescript is a superset of JavaScript language, and it has to be compiled into JavaScript in order to work. Angular 2 supports two kinds of compilation methods out of the box: Ahead-of-time (AOT) compilation and Just-in-time (JIT) compilation.

Ahead-of-time (AOT) compiles the application at build time with optimizations and is the method that must be used for production builds.

Just-in-time (JIT) compiles the app in the browser, at runtime, as the application loads - this is the standard development approach. JIT is useful for development, but its performance concerns me – how would JIT scale for enterprise level applications?

This setup reminds me of Google Web Toolkit (GWT - http://www.gwtproject.org/). GWT had the same promise - Code in Java and compile to JavaScript and you will get best of the both worlds. A strongly typed language with tooling support and performance of standard JavaScript at runtime. But as any serious GWT developer knows, the GWT compiler became the bottleneck. Compilation and executing test cases ended up taking so much time that everyone was looking for any hack or trick to make life more bearable. I hope Angular 2 won’t share the same fate.

Note: In Practice, I have observed that JIT skips errors while hot loading and reports it when you restart the server. Better to be a little careful and restart (npm start) the development server at least twice a day.

2. Configuration Over Convention

While reading the documentation, I started following the “Tour of Heroes” tutorial from the official Angular 2 documentation. It’s a simple application created for the sole purpose of learning. Even with this small application, it started to get annoying quickly having to declare every component, pipe, directive etc in modules. I’m not sure if this is a technical limitation (I didn’t get the chance to dig into Angular 2’s internal implementation yet), but isn't there a way we can do a component scan and wire it all up based on Modules?

3. Bootstrap (main.ts) Appears Unnecessary

The file “main.ts” appears unnecessary. Why do we have to write and manage a class which is not my own business concern (application logic)? The code in this file is all about bootstrapping the application, and the worst part is that you would actually need a pair of files – one for development and another one for production. Is it possible to replace the separate files with an annotation that could be marked in the root module (E.g. Line 7 below)?

1.   import { NgModule } from '@angular/core';
2.   import { BrowserModule } from '@angular/platform-browser';
3.   import { FormsModule } from '@angular/forms';
4.    
5.   import { AppComponent } from './app.component';
6.    
7.   @NgPlatformBrowser(true/false)  // where true means production mode and false means development mode.
8.   @NgModule({
9.   imports: [
10.  BrowserModule,
11.  FormsModule
12.  ],
13.  declarations: [
14.  AppComponent
15.  ],
16.  bootstrap: [ AppComponent ]

4. ”Code in HTML” or “HTML in Code” Dilemma

If we look at a component, we are basically embedding HTML in Typescript code from a developer’s perspective. Is this the right thing to do? I remember how the Java community started with Servlets where we embedded HTML in code, but then quickly realized the mistake and reversed it. Technologies like JSP, ASP, and PHP are based on the same conceptual model where we embed code inside HTML.

Both approaches have their own advantages and disadvantages. Moreover, we can’t get away with it as long as we want to dynamically generate the UI. Angular 2 has adopted html in the code - Is it the right approach for Angular? I don’t know – probably time will tell. But the good part is that Angular 2 supports having HTML partials in separate files which is great for separating code from markup, but comes with its own set of problems, especially for UX guys.

5. Module System

There is nothing wrong the way the Module system is implemented in Angular 2. The only thing confusing is having to mix two module systems; one is from Angular 2 and another one from JavaScript. I think this is more of a learning issue than a major problem. It takes some time and hands-on experience to realize that both systems can, and should, be used in harmony to create a well designed Angular 2 application.

6. Dependency Injection (DI)

Dependency Injection (DI) is a really great and powerful feature of the framework. It reminds me of a something I heard t in the Spiderman movie: "With great power comes great responsibility". I have a strong feeling that most production issues for Angular 2 applications will have root cause related to Dependency Injection. Developers who don’t have good past experience with DI patterns and frameworks should look at it very carefully, especially the Prototype and Singleton behavior of services.

Apart from above six concerns, the framework lacks constraints to force developers to do the right thing. I see the potential to do things the wrong way being too easy; like a service being marked as a component or vise versa, the same is true about directives, and even components are essentially directives and so on. That said, I guess the potential for mistakes is a concern with any technology or framework.

27 Angular 2 Interview Questions

As I mentioned earlier, Angular 2 is a great framework for building front end applications. If you are looking for new hire (or looking to get hired), here are few questions that could help make sure that the candidate has a basic working knowledge of Angular 2.

1. What are the possible ways to bind component properties to an associated template?
2. What kind of classes can you import (meta) in an angular module?
3. What are template reference variables and how are they different from variables in classes?
4. How do you define optional fields in a TypeScript class?
5. Why are components not marked with @injectable annotation, but services need to be?
6. What’s the difference between for..in and for..of?
7. How does the event emitter work in Angular 2? Explain it with pseudo code.
8. Why do we need provider aliases? And how do you create one?
9. What's the difference between a TypeScript class and an interface?
10. What's the expression context in Angular 2? Explain it with an example.
11. What are a few subclasses of @Injectable?
12. What are HTML attributes and DOM properties; and how are they related?
13. What is the NgForTrackBy directive?
14. How do you resolve a template URL relative to a Component class?
15. How do you use a JavaScript (Non TypeScript) third party lib in an Angular 2 App?
16. Can we create two Components with the same name in two different .ts files?
17. What types of pipes are supported in Angular 2?
18. How would you intercept 404 errors in Angular 2?
19. What's the difference between RouterModule.forChild and RouterModule.forRoot?
20. How do you create and show pop-up windows in Angular 2?
21. Can we import a module twice?
22. Can you re-export classes and modules?
23. How to make sure that single instance will be used in an entire application?
24. How can you connect to remotely deployed backed while in development?
25. What’s the difference between a promise and Observable?
26. What are different kinds of directives supported in Angular 2?
27. How do you reference the host of a component?

Bonus: Check out http://ngmodules.org/ for common reusable components like file upload and more.