Angular Real-Time / Scenario-Based - Interview Questions

1. Your Angular application gets a 401 from ASP.NET Core. How would you troubleshoot it?

Check whether the JWT token is present, expired, or invalid. Verify the Authorization header, token signature, issuer, audience, and ASP.NET Core authentication configuration.

Key Point: 401 = Authentication failure; 403 = Authorization failure.

2. Angular works locally but cannot call the production Web API. What would you check?

Verify the production API URL, CORS policy, HTTPS certificate, DNS, firewall, and API availability. Use Browser DevTools → Network to inspect the failed request.

3. The API works in Postman but fails from Angular. What could cause this?

Common causes include CORS restrictions, missing JWT headers, incorrect API URLs, mixed HTTP/HTTPS content, and browser security policies.

Key Point: Postman does not enforce browser CORS restrictions.

4. How would you implement login using Angular and ASP.NET Core JWT authentication?

Angular sends credentials to the API. ASP.NET Core validates them, generates an access token and refresh token, and returns authentication results.

this.http.post<LoginResponse>('/api/auth/login', credentials)
  .subscribe(result => this.authService.setSession(result));

5. How would you automatically attach a JWT to every request?

Use a functional HTTP interceptor to retrieve the access token and attach it to trusted API requests using the Bearer scheme.

const authReq = req.clone({ setHeaders: { Authorization: `Bearer ${token}` } });
return next(authReq);

6. How would you refresh an expired access token?

When the API returns 401, call the refresh-token endpoint, obtain a new access token, and retry the original request once.

API → 401 → Refresh Token → New Access Token → Retry API

7. How would you prevent multiple simultaneous refresh-token requests?

Use a shared refresh Observable with shareReplay(1) or a coordinated refresh mechanism. Other failed requests wait for the same refresh operation.

Key Point: Implement a single-flight refresh process to prevent duplicate refresh requests.

8. How would you globally handle API errors?

Use an HTTP interceptor with catchError() to handle common errors centrally. Display appropriate messages for 400, 401, 403, 404, and 500.

return next(req).pipe(
  catchError(err => { console.error(err.status); return throwError(() => err); })
);

9. How would you display ASP.NET Core validation errors in Angular?

Read the ValidationProblemDetails errors dictionary and map server validation messages to Angular Reactive Form controls.

const message = error.error?.errors?.Email?.[0];
this.form.get('email')?.setErrors({ server: message });

10. How would you protect an Admin route?

Create a functional CanActivateFn guard that checks authentication and Admin role before allowing navigation.

export const adminGuard: CanActivateFn = () =>
  inject(AuthService).isAdmin() || inject(Router).createUrlTree(['/forbidden']);

11. How would you protect the corresponding Admin API endpoint?

Use [Authorize(Roles = "Admin")] or policy-based authorization in ASP.NET Core. Server-side authorization is mandatory even when Angular uses route guards.

[Authorize(Roles = "Admin")]
[HttpGet("dashboard")]
public IActionResult Dashboard() => Ok();

12. How would you share logged-in user information across components?

Use a singleton AuthService with Signals or BehaviorSubject to store authenticated user information. Components access the shared reactive state.

private currentUser = signal<User | null>(null);
readonly user = this.currentUser.asReadonly();

13. How would you implement pagination using Angular and ASP.NET Core?

Angular sends page number and page size as query parameters. ASP.NET Core uses Skip() and Take() with a stable sort order and returns paginated data.

var users = await query.OrderBy(x => x.Id)
    .Skip((page - 1) * pageSize).Take(pageSize).ToListAsync();

14. How would you implement search and filtering?

Use Angular Reactive Forms or Signals to capture filters and send them as query parameters. Apply filtering in ASP.NET Core before pagination.

this.http.get('/api/articles', { params: { search: term, categoryId: id } });

Key Point: Use debounceTime() and switchMap() for live search.

15. How would you implement infinite scrolling?

Use IntersectionObserver or Angular CDK scrolling to detect when more data is needed. Request the next page and append results to the existing list.

this.articles.update(current => [...current, ...newArticles]);

Key Point: Prevent concurrent page requests and stop when no more records exist.

16. How would you upload an image to ASP.NET Core?

Use FormData in Angular and send the file through an HTTP POST request. ASP.NET Core receives it using IFormFile.

const data = new FormData(); data.append('file', file);
this.http.post('/api/images/upload', data).subscribe();

Key Point: Validate file size, type, and content on the server.

17. How would you implement a loading spinner for API calls?

Use an HTTP interceptor to show a spinner when requests start and hide it using finalize() when they finish.

loadingService.show();
return next(req).pipe(finalize(() => loadingService.hide()));

Key Point: Track active requests using a counter for concurrent API calls.

18. How would you handle an API that is temporarily unavailable?

Display a user-friendly error message and use limited retries with exponential backoff for suitable transient failures. Avoid blindly retrying non-idempotent operations.

this.http.get('/api/users').pipe(
  retry({ count: 2, delay: 1000 })
);

19. How would you avoid duplicate API requests?

Use switchMap() for latest-only searches, exhaustMap() for repeated submissions, and shared Observables for duplicate consumers.

search$.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(term => this.articleService.search(term))
);

20. How would you cache API data on the Angular side?

Use an Angular service with Signals or RxJS shareReplay(1) to cache frequently accessed data. Implement expiration and cache invalidation when data changes.

users$ = this.http.get<User[]>('/api/users')
  .pipe(shareReplay({ bufferSize: 1, refCount: false }));

21. How would you migrate an existing ASP.NET Core MVC frontend to Angular while keeping the same Web API?

Create an Angular application, replace MVC Views with standalone components, and reuse the existing Web API endpoints and DTO contracts.

Before: MVC Views → Web API → SQL Server
After:  Angular   → Web API → SQL Server

Key Point: Keep backend business logic unchanged unless API contracts require adjustments.

22. How would you replace an NgModule-based Angular application with standalone components?

Migrate components incrementally using the Angular standalone migration schematic. Replace AppModule bootstrapping, NgModule imports, and legacy routing where appropriate.

ng generate @angular/core:standalone

23. How would you organize a large Angular application with Public and Admin sections?

Use feature-based folders, separate layouts, route configurations, and shared core services. Lazy-load Admin features and protect them with route guards.

app/
 ├── core/
 ├── shared/
 ├── public/
 │   ├── home/
 │   └── articles/
 └── admin/
     ├── dashboard/
     └── articles/

24. How would you deploy Angular and ASP.NET Core independently?

Deploy Angular to Azure Static Web Apps and ASP.NET Core Web API to Azure App Service. Configure production API URLs, HTTPS, CORS, and separate CI/CD pipelines.

Angular → Azure Static Web Apps
                |
                v
ASP.NET Core → Azure App Service → Azure SQL

25. How would you troubleshoot a CORS issue between Angular and ASP.NET Core?

Inspect the browser's Network and Console tabs, verify the Angular origin, and check ASP.NET Core CORS middleware and preflight OPTIONS responses.

app.UseCors("AngularPolicy");

Key Point: Configure CORS on the API server, not in Angular. Ensure credentials and allowed origins are configured correctly.

Important Interview Revision Points

Most Important Scenarios for Full Stack Interviews

High Priority: Questions 1–11, 13–15, 17, 19, 21, 23, and 25.

Medium Priority: Questions 12, 16, 18, 20, 22, and 24.

Key interview takeaway: For Angular + ASP.NET Core Full Stack interviews, focus on explaining the complete workflow from Angular component → service → HTTP interceptor → Web API → Application layer → database, including authentication, error handling, performance, and deployment.