Skip to content

Commit 25e5fd9

Browse files
authored
feat: update origin 20.1.0 (#1044)
* fix: update origin * fix: migrate untranslated files * fix: migrate translated markdown files and config updates * fix: apply Japanese translation updates for migrated content * fix: remove unsupported operators from expression syntax documentation * fix: lint fix * fix: correct build output directory path in workspace configuration
1 parent 8108321 commit 25e5fd9

File tree

49 files changed

+814
-370
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+814
-370
lines changed

adev-ja/src/content/ai/develop-with-ai.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,6 @@ Several editors, such as <a href="https://studio.firebase.google.com?utm_source=
3131

3232

3333
* <a href="/llms.txt" target="_blank">llms.txt</a> - an index file providing links to key files and resources.
34-
* <a href="/llms-full.txt" target="_blank">llms-full.txt</a> - a more robust compiled set of resources describing how Angular works and how to build Angular applications.
34+
* <a href="/context/llm-files/llms-full.txt" target="_blank">llms-full.txt</a> - a more robust compiled set of resources describing how Angular works and how to build Angular applications.
3535

3636
Be sure [to check out the overview page](/ai) for more information on how to integrate AI into your Angular applications.

adev-ja/src/content/guide/http/http-resource.md

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,13 @@ user = httpResource(() => ({
3838
'fast': 'yes',
3939
},
4040
reportProgress: true,
41-
withCredentials: true,
4241
transferCache: true,
43-
keepalive: true,
42+
keepalive: true,
43+
mode: 'cors',
44+
redirect: 'error',
45+
priority: 'high',
46+
cache : 'force-cache',
47+
credentials: 'include',
4448
}));
4549
```
4650

adev-ja/src/content/guide/http/making-requests.en.md

Lines changed: 225 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -198,19 +198,242 @@ Each `HttpEvent` reported in the event stream has a `type` which distinguishes w
198198

199199
## Handling request failure
200200

201-
There are two ways an HTTP request can fail:
201+
There are three ways an HTTP request can fail:
202202

203203
* A network or connection error can prevent the request from reaching the backend server.
204+
* A request didn't respond in time when the timeout option was set.
204205
* The backend can receive the request but fail to process it, and return an error response.
205206

206-
`HttpClient` captures both kinds of errors in an `HttpErrorResponse` which it returns through the `Observable`'s error channel. Network errors have a `status` code of `0` and an `error` which is an instance of [`ProgressEvent`](https://developer.mozilla.org/docs/Web/API/ProgressEvent). Backend errors have the failing `status` code returned by the backend, and the error response as the `error`. Inspect the response to identify the error's cause and the appropriate action to handle the error.
207+
`HttpClient` captures all of the above kinds of errors in an `HttpErrorResponse` which it returns through the `Observable`'s error channel. Network and timeout errors have a `status` code of `0` and an `error` which is an instance of [`ProgressEvent`](https://developer.mozilla.org/docs/Web/API/ProgressEvent). Backend errors have the failing `status` code returned by the backend, and the error response as the `error`. Inspect the response to identify the error's cause and the appropriate action to handle the error.
207208

208209
The [RxJS library](https://rxjs.dev/) offers several operators which can be useful for error handling.
209210

210211
You can use the `catchError` operator to transform an error response into a value for the UI. This value can tell the UI to display an error page or value, and capture the error's cause if necessary.
211212

212213
Sometimes transient errors such as network interruptions can cause a request to fail unexpectedly, and simply retrying the request will allow it to succeed. RxJS provides several *retry* operators which automatically re-subscribe to a failed `Observable` under certain conditions. For example, the `retry()` operator will automatically attempt to re-subscribe a specified number of times.
213214

215+
### Timeouts
216+
217+
To set a timeout for a request, you can set the `timeout` option to a number of milliseconds along other request options. If the backend request does not complete within the specified time, the request will be aborted and an error will be emitted.
218+
219+
NOTE: The timeout will only apply to the backend HTTP request itself. It is not a timeout for the entire request handling chain. Therefore, this option is not affected by any delay introduced by interceptors.
220+
221+
<docs-code language="ts">
222+
http.get('/api/config', {
223+
timeout: 3000,
224+
}).subscribe({
225+
next: config => {
226+
console.log('Config fetched successfully:', config);
227+
},
228+
error: err => {
229+
// If the request times out, an error will have been emitted.
230+
}
231+
});
232+
</docs-code>
233+
234+
## Advanced fetch options
235+
236+
When using the `withFetch()` provider, Angular's `HttpClient` provides access to advanced fetch API options that can improve performance and user experience. These options are only available when using the fetch backend.
237+
238+
### Fetch options
239+
240+
The following options provide fine-grained control over request behavior when using the fetch backend.
241+
242+
#### Keep-alive connections
243+
244+
The `keepalive` option allows a request to outlive the page that initiated it. This is particularly useful for analytics or logging requests that need to complete even if the user navigates away from the page.
245+
246+
<docs-code language="ts">
247+
http.post('/api/analytics', analyticsData, {
248+
keepalive: true
249+
}).subscribe();
250+
</docs-code>
251+
252+
#### HTTP caching control
253+
254+
The `cache` option controls how the request interacts with the browser's HTTP cache, which can significantly improve performance for repeated requests.
255+
256+
<docs-code language="ts">
257+
// Use cached response regardless of freshness
258+
http.get('/api/config', {
259+
cache: 'force-cache'
260+
}).subscribe(config => {
261+
// ...
262+
});
263+
264+
// Always fetch from network, bypass cache
265+
http.get('/api/live-data', {
266+
cache: 'no-cache'
267+
}).subscribe(data => {
268+
// ...
269+
});
270+
271+
// Use cached response only, fail if not in cache
272+
http.get('/api/static-data', {
273+
cache: 'only-if-cached'
274+
}).subscribe(data => {
275+
// ...
276+
});
277+
</docs-code>
278+
279+
#### Request priority for Core Web Vitals
280+
281+
The `priority` option allows you to indicate the relative importance of a request, helping browsers optimize resource loading for better Core Web Vitals scores.
282+
283+
<docs-code language="ts">
284+
// High priority for critical resources
285+
http.get('/api/user-profile', {
286+
priority: 'high'
287+
}).subscribe(profile => {
288+
// ...
289+
});
290+
291+
// Low priority for non-critical resources
292+
http.get('/api/recommendations', {
293+
priority: 'low'
294+
}).subscribe(recommendations => {
295+
// ...
296+
});
297+
298+
// Auto priority (default) lets the browser decide
299+
http.get('/api/settings', {
300+
priority: 'auto'
301+
}).subscribe(settings => {
302+
// ...
303+
});
304+
</docs-code>
305+
306+
Available `priority` values:
307+
- `'high'`: High priority, loaded early (e.g., critical user data, above-the-fold content)
308+
- `'low'`: Low priority, loaded when resources are available (e.g., analytics, prefetch data)
309+
- `'auto'`: Browser determines priority based on request context (default)
310+
311+
TIP: Use `priority: 'high'` for requests that affect Largest Contentful Paint (LCP) and `priority: 'low'` for requests that don't impact initial user experience.
312+
313+
#### Request mode
314+
315+
The `mode` option controls how the request handles cross-origin requests and determines the response type.
316+
317+
<docs-code language="ts">
318+
// Same-origin requests only
319+
http.get('/api/local-data', {
320+
mode: 'same-origin'
321+
}).subscribe(data => {
322+
// ...
323+
});
324+
325+
// CORS-enabled cross-origin requests
326+
http.get('https://api.external.com/data', {
327+
mode: 'cors'
328+
}).subscribe(data => {
329+
// ...
330+
});
331+
332+
// No-CORS mode for simple cross-origin requests
333+
http.get('https://external-api.com/public-data', {
334+
mode: 'no-cors'
335+
}).subscribe(data => {
336+
// ...
337+
});
338+
</docs-code>
339+
340+
Available `mode` values:
341+
- `'same-origin'`: Only allow same-origin requests, fail for cross-origin requests
342+
- `'cors'`: Allow cross-origin requests with CORS (default)
343+
- `'no-cors'`: Allow simple cross-origin requests without CORS, response is opaque
344+
345+
TIP: Use `mode: 'same-origin'` for sensitive requests that should never go cross-origin.
346+
347+
#### Redirect handling
348+
349+
The `redirect` option specifies how to handle redirect responses from the server.
350+
351+
<docs-code language="ts">
352+
// Follow redirects automatically (default behavior)
353+
http.get('/api/resource', {
354+
redirect: 'follow'
355+
}).subscribe(data => {
356+
// ...
357+
});
358+
359+
// Prevent automatic redirects
360+
http.get('/api/resource', {
361+
redirect: 'manual'
362+
}).subscribe(response => {
363+
// Handle redirect manually
364+
});
365+
366+
// Treat redirects as errors
367+
http.get('/api/resource', {
368+
redirect: 'error'
369+
}).subscribe({
370+
next: data => {
371+
// Success response
372+
},
373+
error: err => {
374+
// Redirect responses will trigger this error handler
375+
}
376+
});
377+
</docs-code>
378+
379+
Available `redirect` values:
380+
- `'follow'`: Automatically follow redirects (default)
381+
- `'error'`: Treat redirects as errors
382+
- `'manual'`: Don't follow redirects automatically, return redirect response
383+
384+
TIP: Use `redirect: 'manual'` when you need to handle redirects with custom logic.
385+
386+
#### Credentials handling
387+
388+
The `credentials` option controls whether cookies, authorization headers, and other credentials are sent with cross-origin requests. This is particularly important for authentication scenarios.
389+
390+
<docs-code language="ts">
391+
// Include credentials for cross-origin requests
392+
http.get('https://api.example.com/protected-data', {
393+
credentials: 'include'
394+
}).subscribe(data => {
395+
// ...
396+
});
397+
398+
// Never send credentials (default for cross-origin)
399+
http.get('https://api.example.com/public-data', {
400+
credentials: 'omit'
401+
}).subscribe(data => {
402+
// ...
403+
});
404+
405+
// Send credentials only for same-origin requests
406+
http.get('/api/user-data', {
407+
credentials: 'same-origin'
408+
}).subscribe(data => {
409+
// ...
410+
});
411+
412+
// withCredentials overrides credentials setting
413+
http.get('https://api.example.com/data', {
414+
credentials: 'omit', // This will be ignored
415+
withCredentials: true // This forces credentials: 'include'
416+
}).subscribe(data => {
417+
// Request will include credentials despite credentials: 'omit'
418+
});
419+
420+
// Legacy approach (still supported)
421+
http.get('https://api.example.com/data', {
422+
withCredentials: true
423+
}).subscribe(data => {
424+
// Equivalent to credentials: 'include'
425+
});
426+
</docs-code>
427+
428+
IMPORTANT: The `withCredentials` option takes precedence over the `credentials` option. If both are specified, `withCredentials: true` will always result in `credentials: 'include'`, regardless of the explicit `credentials` value.
429+
430+
Available `credentials` values:
431+
- `'omit'`: Never send credentials
432+
- `'same-origin'`: Send credentials only for same-origin requests (default)
433+
- `'include'`: Always send credentials, even for cross-origin requests
434+
435+
TIP: Use `credentials: 'include'` when you need to send authentication cookies or headers to a different domain that supports CORS. Avoid mixing `credentials` and `withCredentials` options to prevent confusion.
436+
214437
## Http `Observable`s
215438

216439
Each request method on `HttpClient` constructs and returns an `Observable` of the requested response type. Understanding how these `Observable`s work is important when using `HttpClient`.

0 commit comments

Comments
 (0)