Older Angular vs Modern Angular - Interview Questions

1. How was Angular bootstrapped before standalone APIs?

Older Angular applications used platformBrowserDynamic().bootstrapModule(AppModule) to start the application through the root NgModule.

platformBrowserDynamic().bootstrapModule(AppModule);

2. How is Angular bootstrapped now?

Modern Angular uses bootstrapApplication() to bootstrap a standalone root component without requiring AppModule.

bootstrapApplication(App, appConfig);

3. What was AppModule, and what replaced it?

AppModule was the root NgModule responsible for declaring components, importing modules, and configuring providers. Modern Angular uses standalone components, app.config.ts, and bootstrapApplication().

4. What was AppRoutingModule, and what replaced it?

AppRoutingModule defined routes using RouterModule.forRoot(). Modern Angular typically defines routes in app.routes.ts and registers them using provideRouter().

provideRouter(routes);

5. How were components declared before standalone components?

Previously, components were registered in the declarations array of an NgModule. Modern standalone components do not require NgModule declarations.

@NgModule({ declarations: [HomeComponent] })
export class AppModule {}

6. How are component dependencies handled with standalone components?

Standalone components declare their template dependencies directly in the imports array. They can import other standalone components, directives, pipes, and NgModules.

@Component({ imports: [CommonModule, RouterLink] })
export class Home {}

7. How was HttpClientModule configured before standalone APIs?

Older Angular applications imported HttpClientModule into AppModule to enable HTTP communication.

@NgModule({ imports: [HttpClientModule] })
export class AppModule {}

8. How is HTTP configured using provideHttpClient()?

Modern Angular registers HTTP services using provideHttpClient() in application providers, usually inside app.config.ts.

export const appConfig: ApplicationConfig = {
  providers: [provideHttpClient()]
};

9. How were interceptors registered using HTTP_INTERCEPTORS?

Class-based interceptors implemented HttpInterceptor and were registered using the HTTP_INTERCEPTORS multi-provider.

{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }

10. How are functional interceptors registered now?

Modern Angular uses HttpInterceptorFn and registers functional interceptors through withInterceptors().

provideHttpClient(withInterceptors([authInterceptor, errorInterceptor]));

11. How were class-based route guards implemented?

Older Angular used classes implementing CanActivate or CanDeactivate. These classes defined methods to control route navigation.

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  canActivate() { return true; }
}

12. How are functional guards implemented?

Modern Angular uses functional guards such as CanActivateFn, with inject() to access authentication services.

export const authGuard: CanActivateFn = () =>
  inject(AuthService).isAuthenticated();

13. How were lazy-loaded feature modules implemented?

Older Angular applications used loadChildren() to dynamically import feature NgModules and their routes.

{ path: 'admin', loadChildren: () =>
  import('./admin/admin.module').then(m => m.AdminModule) }

14. How are standalone components lazy-loaded?

Modern Angular uses loadComponent() to lazy-load individual standalone components. loadChildren() can also lazy-load standalone route groups.

{ path: 'admin', loadComponent: () =>
  import('./admin/admin').then(m => m.Admin) }

15. How were *ngIf and *ngFor used?

Older Angular used structural directives such as *ngIf and *ngFor for conditional rendering and iteration.

<div *ngIf="isLoggedIn">Welcome</div>
<div *ngFor="let user of users">{{ user.name }}</div>

16. How do @if and @for differ from them?

Modern Angular uses built-in control-flow blocks such as @if, @for, and @switch. They provide clearer syntax without importing NgIf or NgFor.

@if (isLoggedIn) { <p>Welcome</p> }
@for (user of users; track user.id) { <p>{{ user.name }}</p> }

17. Constructor injection vs inject() — what changed?

Constructor injection declares dependencies through constructor parameters. Modern Angular also supports inject() in injection contexts, reducing constructor boilerplate.

// Older
constructor(private service: UserService) {}
// Modern
private service = inject(UserService);

18. Traditional @Input() vs signal-based input() — what is the difference?

@Input() defines a traditional component input property. input() creates a read-only InputSignal that integrates with Angular's reactive Signals system.

@Input() userId = 0;          // Traditional
userId = input<number>(0);    // Modern

19. Traditional @Output() vs modern output() — what is the difference?

@Output() traditionally uses EventEmitter to emit events. Modern output() creates an OutputEmitterRef without requiring a decorator.

@Output() saved = new EventEmitter<void>(); // Traditional
saved = output<void>();                     // Modern

20. RxJS-based state vs Signals — when should each be used?

Use Signals for synchronous component and shared UI state. Use RxJS for asynchronous streams, HTTP workflows, debouncing, and complex event processing.

21. Zone-based vs zoneless Angular — what is the difference?

Zone-based Angular uses Zone.js to detect asynchronous activity and trigger change detection. Zoneless Angular relies on explicit notifications such as Signals and Angular events.

Key Point: Zoneless became the default in Angular 21; Angular 20 supports zoneless as a stable option.

22. Can modern Angular applications still use NgModules?

Yes. NgModules remain supported for existing applications and library compatibility. Modern Angular recommends standalone components for new development.

23. How do you migrate a large NgModule application incrementally to standalone?

Migrate feature-by-feature: convert components to standalone, move dependencies into component imports, update routing, and finally replace NgModule bootstrapping.

ng generate @angular/core:standalone

Key Point: Test each feature after migration; a complete rewrite is unnecessary.

24. What knowledge from older Angular applications is still important when maintaining enterprise applications?

Understanding NgModules, lifecycle hooks, dependency injection, RxJS, services, routing, forms, guards, and interceptors remains essential. Enterprise applications often contain both legacy and standalone code.

Important Interview Revision Points

Angular Migration Flow

Older Angular Application
          |
          v
      AppModule
          |
          v
  NgModule Components
          |
          | Incremental Migration
          v
 Standalone Components
          |
          v
 app.routes.ts + app.config.ts
          |
          v
 bootstrapApplication()
          |
          v
 Modern Angular Application

Interview priority: Focus particularly on questions 1–10, 12, 14, 16–23.

Key interview takeaway: Modern Angular favors standalone components, functional APIs, Signals, built-in control flow, and zoneless change detection. Older NgModule-based applications remain supported and can be migrated incrementally without rewriting the entire application.