Angular - HTTP ClientWhich of the following is the correct way to clone an HTTP request before adding an authentication token in an Angular interceptor?Arequest.updateHeaders({ Authorization: 'Bearer ' + token })Brequest.headers.set('Authorization', 'Bearer ' + token)Crequest.modifyHeaders('Authorization', 'Bearer ' + token)Drequest.clone({ headers: request.headers.set('Authorization', 'Bearer ' + token) })Check Answer
Step-by-Step SolutionSolution:Step 1: Recall Angular HttpRequest immutabilityHttpRequest objects are immutable, so you must clone them to modify headers.Step 2: Use the clone method with headers.set()The correct syntax is to call clone() and set the new header inside it.Final Answer:request.clone({ headers: request.headers.set('Authorization', 'Bearer ' + token) }) -> Option DQuick Check:Clone request with headers.set() = A [OK]Quick Trick: Always clone requests before changing headers [OK]Common Mistakes:MISTAKESTrying to modify headers directly without cloningUsing non-existent methods like modifyHeaders or updateHeadersNot using the clone method
Master "HTTP Client" in Angular9 interactive learning modes - each teaches the same concept differentlyLearnWhyDeepVisualTryChallengeProjectRecallPerf
More Angular Quizzes Angular Change Detection - Triggering detection manually - Quiz 9hard Angular Change Detection - Performance impact of change detection - Quiz 7medium HTTP Client - HttpClientModule setup - Quiz 6medium HTTP Client - Setting headers and params - Quiz 13medium HTTP Client - POST requests - Quiz 13medium Reactive Forms - Form state tracking (dirty, touched, valid) - Quiz 9hard RxJS and Observables Fundamentals - Subject types (Subject, BehaviorSubject, ReplaySubject) - Quiz 11easy Services and Dependency Injection - Singleton service behavior - Quiz 2easy Template-Driven Forms - FormsModule setup - Quiz 1easy Template-Driven Forms - Two-way binding in forms - Quiz 10hard