angular/aio/content/guide/http-setup-server-communication.md

# HTTP: Setup for server communication

Before you can use `HttpClient`, you must add it to the application's [root dependency injector](guide/dependency-injection). 

Most apps do so in the `providers` array of `ApplicationConfig` in `app.config.ts`.

<code-example header="app.config.ts (excerpt)" path="http/src/app/app.config.ts" region="sketch"></code-example>

You can then inject the `HttpClient` service as a dependency of an application class, as shown in the following `ConfigService` example.

<code-example header="app/config/config.service.ts (excerpt)" path="http/src/app/config/config.service.ts" region="proto"></code-example>

<div class="alert is-helpful">

You can run the <live-example name="http"></live-example> that accompanies this guide.

The sample app does not require a data server.
It relies on the [Angular *in-memory-web-api*](https://github.com/angular/angular/tree/main/packages/misc/angular-in-memory-web-api), which replaces the *HttpClient* module's `HttpBackend`.
The replacement service simulates the behavior of a REST-like backend.

Look at the `bootstrapApplication()` method in `main.ts` to see how it is configured.

</div>

@reviewed 2023-08-16
docs: New document extracted from the original Communicating with backend services using HTTP document, which is to be retired. (#47965) PR Close #47965 2022-11-04 00:10:05 +00:00			`# HTTP: Setup for server communication`
docs: add new files for HTTP content (#47684) PR Close #47684 2022-10-07 00:06:43 +00:00
docs: Migrate HttpClient guide and its code examples (`/http`) to standalone (#51400) Unit Testing Code Does Not Compile The compilation error is: ``` The compilation error is ./src/testing/http-client.spec.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js): Error: /home/projects/obk3vc--run/src/testing/http-client.spec.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property. ``` I’m not sure what to say about unit testing HTTP in a full Standalone app. Is it different? _This is the only known remaining defect in this conversion of HTTP to Standalone._ Edited content of `http-request-data-from-server.md` The current version of this page is confusing. In particular * It tells readers they should always unsubscribe from the HttpClient method calls. This is not true and this example doesn't even do it. I replaced this instruction with more nuanced advice and an explanation of why it is OK to not unsubscribe to HttpClient methods. * There is a "helpful" note about using the RxJS `map` operator to transform the response. This is not "helpfulf". It is confusing because the sample doesn't use `map` anywhere. It was unnecessary here, even if it might be helpful elsewhere. I removed this note. * The "Requesting a typed response" section seemed unclear to me, particularly because the guide begins with a `get` request that already has the `Config` return type specification. My revision attempts to make this more clear. * The bold "callout" about the `observe` and `responseType` options appears out of nowhere after "Requesting a typed response". It's disconcerting at best. I moved it to the bottom of the page and linked to it from the `options` discussion at the top. I made a few other revisions that I hope improve the readability of this page. Corrected `http-make-jsonp-request.md` The JSONP example, handwritten in the guide page, would not have compiled. I added one that does to `heroes.service.ts` and displayed it on this page. Corrected `http-handle-request-errors.md` This page ended with a section called "Sending data to a server" that introduces PUT, POST, and DELETE. These features have nothing to do with error handling and the verbiage here duplicates the opening paragraphs of the next topic which does: "Send data to a server". So I deleted this section from the error handling guide page. Archived http-setup-server-communication.md** `http-setup-server-communication.md` appears to be the original long document that has since been divided over the other pages in this folder. It shouldn’t be in the reader’s flow. I did update it for Standalone. But I also removed it from left-nav and marked as archived. PR Close #51400 2023-08-17 05:11:14 +00:00			Before you can use `HttpClient`, you must add it to the application's [root dependency injector](guide/dependency-injection).
docs: New document extracted from the original Communicating with backend services using HTTP document, which is to be retired. (#47965) PR Close #47965 2022-11-04 00:10:05 +00:00
docs: change the file of the provideHttpClient standalone example to match cli generated project (#52806) The "Providing HttpClient through dependency injection" documentation now shows that in case of a standalone boostraped app, the provideHttpClient is to include in the app.config.ts file. Also updated the http setup server communication example to align the new doc (adev) with the old one (aio). PR Close #52806 2023-11-11 07:26:10 +00:00			Most apps do so in the `providers` array of `ApplicationConfig` in `app.config.ts`.
docs: Migrate HttpClient guide and its code examples (`/http`) to standalone (#51400) Unit Testing Code Does Not Compile The compilation error is: ``` The compilation error is ./src/testing/http-client.spec.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js): Error: /home/projects/obk3vc--run/src/testing/http-client.spec.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property. ``` I’m not sure what to say about unit testing HTTP in a full Standalone app. Is it different? _This is the only known remaining defect in this conversion of HTTP to Standalone._ Edited content of `http-request-data-from-server.md` The current version of this page is confusing. In particular * It tells readers they should always unsubscribe from the HttpClient method calls. This is not true and this example doesn't even do it. I replaced this instruction with more nuanced advice and an explanation of why it is OK to not unsubscribe to HttpClient methods. * There is a "helpful" note about using the RxJS `map` operator to transform the response. This is not "helpfulf". It is confusing because the sample doesn't use `map` anywhere. It was unnecessary here, even if it might be helpful elsewhere. I removed this note. * The "Requesting a typed response" section seemed unclear to me, particularly because the guide begins with a `get` request that already has the `Config` return type specification. My revision attempts to make this more clear. * The bold "callout" about the `observe` and `responseType` options appears out of nowhere after "Requesting a typed response". It's disconcerting at best. I moved it to the bottom of the page and linked to it from the `options` discussion at the top. I made a few other revisions that I hope improve the readability of this page. Corrected `http-make-jsonp-request.md` The JSONP example, handwritten in the guide page, would not have compiled. I added one that does to `heroes.service.ts` and displayed it on this page. Corrected `http-handle-request-errors.md` This page ended with a section called "Sending data to a server" that introduces PUT, POST, and DELETE. These features have nothing to do with error handling and the verbiage here duplicates the opening paragraphs of the next topic which does: "Send data to a server". So I deleted this section from the error handling guide page. Archived http-setup-server-communication.md** `http-setup-server-communication.md` appears to be the original long document that has since been divided over the other pages in this folder. It shouldn’t be in the reader’s flow. I did update it for Standalone. But I also removed it from left-nav and marked as archived. PR Close #51400 2023-08-17 05:11:14 +00:00
docs: change the file of the provideHttpClient standalone example to match cli generated project (#52806) The "Providing HttpClient through dependency injection" documentation now shows that in case of a standalone boostraped app, the provideHttpClient is to include in the app.config.ts file. Also updated the http setup server communication example to align the new doc (adev) with the old one (aio). PR Close #52806 2023-11-11 07:26:10 +00:00			`<code-example header="app.config.ts (excerpt)" path="http/src/app/app.config.ts" region="sketch"></code-example>`
docs: New document extracted from the original Communicating with backend services using HTTP document, which is to be retired. (#47965) PR Close #47965 2022-11-04 00:10:05 +00:00
			You can then inject the `HttpClient` service as a dependency of an application class, as shown in the following `ConfigService` example.

			`<code-example header="app/config/config.service.ts (excerpt)" path="http/src/app/config/config.service.ts" region="proto"></code-example>`

			`<div class="alert is-helpful">`

docs: Migrate HttpClient guide and its code examples (`/http`) to standalone (#51400) Unit Testing Code Does Not Compile The compilation error is: ``` The compilation error is ./src/testing/http-client.spec.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js): Error: /home/projects/obk3vc--run/src/testing/http-client.spec.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property. ``` I’m not sure what to say about unit testing HTTP in a full Standalone app. Is it different? _This is the only known remaining defect in this conversion of HTTP to Standalone._ Edited content of `http-request-data-from-server.md` The current version of this page is confusing. In particular * It tells readers they should always unsubscribe from the HttpClient method calls. This is not true and this example doesn't even do it. I replaced this instruction with more nuanced advice and an explanation of why it is OK to not unsubscribe to HttpClient methods. * There is a "helpful" note about using the RxJS `map` operator to transform the response. This is not "helpfulf". It is confusing because the sample doesn't use `map` anywhere. It was unnecessary here, even if it might be helpful elsewhere. I removed this note. * The "Requesting a typed response" section seemed unclear to me, particularly because the guide begins with a `get` request that already has the `Config` return type specification. My revision attempts to make this more clear. * The bold "callout" about the `observe` and `responseType` options appears out of nowhere after "Requesting a typed response". It's disconcerting at best. I moved it to the bottom of the page and linked to it from the `options` discussion at the top. I made a few other revisions that I hope improve the readability of this page. Corrected `http-make-jsonp-request.md` The JSONP example, handwritten in the guide page, would not have compiled. I added one that does to `heroes.service.ts` and displayed it on this page. Corrected `http-handle-request-errors.md` This page ended with a section called "Sending data to a server" that introduces PUT, POST, and DELETE. These features have nothing to do with error handling and the verbiage here duplicates the opening paragraphs of the next topic which does: "Send data to a server". So I deleted this section from the error handling guide page. Archived http-setup-server-communication.md** `http-setup-server-communication.md` appears to be the original long document that has since been divided over the other pages in this folder. It shouldn’t be in the reader’s flow. I did update it for Standalone. But I also removed it from left-nav and marked as archived. PR Close #51400 2023-08-17 05:11:14 +00:00			`You can run the <live-example name="http"></live-example> that accompanies this guide.`
docs: New document extracted from the original Communicating with backend services using HTTP document, which is to be retired. (#47965) PR Close #47965 2022-11-04 00:10:05 +00:00
			`The sample app does not require a data server.`
			It relies on the [Angular in-memory-web-api](https://github.com/angular/angular/tree/main/packages/misc/angular-in-memory-web-api), which replaces the HttpClient module's `HttpBackend`.
			`The replacement service simulates the behavior of a REST-like backend.`

docs: Migrate HttpClient guide and its code examples (`/http`) to standalone (#51400) Unit Testing Code Does Not Compile The compilation error is: ``` The compilation error is ./src/testing/http-client.spec.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js): Error: /home/projects/obk3vc--run/src/testing/http-client.spec.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property. ``` I’m not sure what to say about unit testing HTTP in a full Standalone app. Is it different? _This is the only known remaining defect in this conversion of HTTP to Standalone._ Edited content of `http-request-data-from-server.md` The current version of this page is confusing. In particular * It tells readers they should always unsubscribe from the HttpClient method calls. This is not true and this example doesn't even do it. I replaced this instruction with more nuanced advice and an explanation of why it is OK to not unsubscribe to HttpClient methods. * There is a "helpful" note about using the RxJS `map` operator to transform the response. This is not "helpfulf". It is confusing because the sample doesn't use `map` anywhere. It was unnecessary here, even if it might be helpful elsewhere. I removed this note. * The "Requesting a typed response" section seemed unclear to me, particularly because the guide begins with a `get` request that already has the `Config` return type specification. My revision attempts to make this more clear. * The bold "callout" about the `observe` and `responseType` options appears out of nowhere after "Requesting a typed response". It's disconcerting at best. I moved it to the bottom of the page and linked to it from the `options` discussion at the top. I made a few other revisions that I hope improve the readability of this page. Corrected `http-make-jsonp-request.md` The JSONP example, handwritten in the guide page, would not have compiled. I added one that does to `heroes.service.ts` and displayed it on this page. Corrected `http-handle-request-errors.md` This page ended with a section called "Sending data to a server" that introduces PUT, POST, and DELETE. These features have nothing to do with error handling and the verbiage here duplicates the opening paragraphs of the next topic which does: "Send data to a server". So I deleted this section from the error handling guide page. Archived http-setup-server-communication.md** `http-setup-server-communication.md` appears to be the original long document that has since been divided over the other pages in this folder. It shouldn’t be in the reader’s flow. I did update it for Standalone. But I also removed it from left-nav and marked as archived. PR Close #51400 2023-08-17 05:11:14 +00:00			Look at the `bootstrapApplication()` method in `main.ts` to see how it is configured.
docs: New document extracted from the original Communicating with backend services using HTTP document, which is to be retired. (#47965) PR Close #47965 2022-11-04 00:10:05 +00:00
			`</div>`

docs: Migrate HttpClient guide and its code examples (`/http`) to standalone (#51400) Unit Testing Code Does Not Compile The compilation error is: ``` The compilation error is ./src/testing/http-client.spec.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js): Error: /home/projects/obk3vc--run/src/testing/http-client.spec.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property. ``` I’m not sure what to say about unit testing HTTP in a full Standalone app. Is it different? _This is the only known remaining defect in this conversion of HTTP to Standalone._ Edited content of `http-request-data-from-server.md` The current version of this page is confusing. In particular * It tells readers they should always unsubscribe from the HttpClient method calls. This is not true and this example doesn't even do it. I replaced this instruction with more nuanced advice and an explanation of why it is OK to not unsubscribe to HttpClient methods. * There is a "helpful" note about using the RxJS `map` operator to transform the response. This is not "helpfulf". It is confusing because the sample doesn't use `map` anywhere. It was unnecessary here, even if it might be helpful elsewhere. I removed this note. * The "Requesting a typed response" section seemed unclear to me, particularly because the guide begins with a `get` request that already has the `Config` return type specification. My revision attempts to make this more clear. * The bold "callout" about the `observe` and `responseType` options appears out of nowhere after "Requesting a typed response". It's disconcerting at best. I moved it to the bottom of the page and linked to it from the `options` discussion at the top. I made a few other revisions that I hope improve the readability of this page. Corrected `http-make-jsonp-request.md` The JSONP example, handwritten in the guide page, would not have compiled. I added one that does to `heroes.service.ts` and displayed it on this page. Corrected `http-handle-request-errors.md` This page ended with a section called "Sending data to a server" that introduces PUT, POST, and DELETE. These features have nothing to do with error handling and the verbiage here duplicates the opening paragraphs of the next topic which does: "Send data to a server". So I deleted this section from the error handling guide page. Archived http-setup-server-communication.md** `http-setup-server-communication.md` appears to be the original long document that has since been divided over the other pages in this folder. It shouldn’t be in the reader’s flow. I did update it for Standalone. But I also removed it from left-nav and marked as archived. PR Close #51400 2023-08-17 05:11:14 +00:00			`@reviewed 2023-08-16`