mokkenstorm.dev
fork of hey-api/openapi-ts because I need some additional things
docs: add Angular client documentation
+135
-5
+1
-1
docs/.vitepress/config/en.ts
+1
-1
docs/.vitepress/config/en.ts
+134
-4
docs/openapi-ts/clients/angular.md
+134
-4
docs/openapi-ts/clients/angular.md
···
3
3
description: Angular client for Hey API. Compatible with all our features.
4
4
---
5
5
6
-
# Angular <span data-soon>soon</span>
6
+
<script setup lang="ts">
7
+
import { embedProject } from '../../embed'
8
+
</script>
7
9
8
-
<FeatureStatus issueNumber=1072 name="Angular" />
10
+
<Heading>
11
+
<h1>Angular</h1>
12
+
<VersionLabel value="v1" />
13
+
<ExperimentalLabel />
14
+
</Heading>
9
15
10
16
### About
11
17
12
-
[Angular](https://angular.dev/) is a web framework that empowers developers to build fast, reliable applications.
18
+
[Angular](https://angular.dev/) is a web framework for building fast, reliable applications.
19
+
20
+
::: warning Requirements
21
+
**Angular 19+** is required for full feature support, including the experimental `httpResource` API.
22
+
:::
23
+
24
+
::: tip First Release
25
+
Angular client support is in its first release. Share your feedback on [GitHub](https://github.com/hey-api/openapi-ts/issues).
26
+
:::
27
+
28
+
## Features
29
+
30
+
- Modern Angular patterns with signals and reactive programming
31
+
- Dependency injection with `@Injectable()` decorators
32
+
- Type-safe response data and errors
33
+
- Experimental **httpResource** support (Angular 19+)
34
+
35
+
## Usage
36
+
37
+
Add `@hey-api/client-angular` to your plugins:
38
+
39
+
```js
40
+
export default {
41
+
input: 'https://get.heyapi.dev/hey-api/backend',
42
+
output: 'src/client',
43
+
plugins: [
44
+
'@hey-api/client-angular', // [!code ++]
45
+
],
46
+
};
47
+
```
48
+
49
+
After generating the client, integrate it with Angular's `HttpClient` by adding `provideHeyApiClient` to your app configuration:
50
+
51
+
```ts
52
+
import { provideHttpClient, withFetch } from '@angular/common/http';
53
+
import { provideHeyApiClient, client } from './client/client.gen';
13
54
14
-
<!--@include: ../../partials/sponsors.md-->
55
+
export const appConfig = {
56
+
providers: [
57
+
provideHttpClient(withFetch()),
58
+
provideHeyApiClient(client), // [!code ++]
59
+
],
60
+
};
61
+
```
62
+
63
+
## Configuration
64
+
65
+
### Injectable Classes Configuration
66
+
67
+
You can configure the Angular client to generate injectable classes by setting the `asClass` option to `true` in your plugin configuration. This will generate Angular services with `@Injectable()` decorators, making them available for dependency injection.
68
+
69
+
```js
70
+
export default {
71
+
input: 'https://get.heyapi.dev/hey-api/backend',
72
+
output: 'src/client',
73
+
plugins: [
74
+
{
75
+
name: '@hey-api/client-angular',
76
+
asClass: true, // [!code ++]
77
+
},
78
+
],
79
+
};
80
+
```
81
+
82
+
::: warning
83
+
While this feature is available, it is **discouraged** as it can negatively impact tree shaking, leading to larger bundle sizes. Consider using other configuration options for better optimization.
84
+
:::
85
+
86
+
### Angular Providers
87
+
88
+
Use `provideHeyApiClient` to integrate the generated client with Angular's `HttpClient`:
89
+
90
+
```ts
91
+
import { provideHttpClient, withFetch } from '@angular/common/http';
92
+
import { provideHeyApiClient, client } from './client/client.gen';
93
+
94
+
export const appConfig = {
95
+
providers: [provideHttpClient(withFetch()), provideHeyApiClient(client)],
96
+
};
97
+
```
98
+
99
+
### `createClient()`
100
+
101
+
Manually create a client instance for custom configurations:
102
+
103
+
```ts
104
+
import { createClient } from './client/client';
105
+
106
+
const myClient = createClient({
107
+
baseUrl: 'https://example.com',
108
+
});
109
+
```
110
+
111
+
## Plugin Configuration
112
+
113
+
The `@hey-api/client-angular` plugin supports options like `throwOnError` for error handling:
114
+
115
+
```js
116
+
export default {
117
+
input: 'https://get.heyapi.dev/hey-api/backend',
118
+
output: 'src/client',
119
+
plugins: [
120
+
{
121
+
name: '@hey-api/client-angular',
122
+
throwOnError: false,
123
+
},
124
+
],
125
+
};
126
+
```
127
+
128
+
## httpResource
129
+
130
+
Angular 19 introduces a experimental api – `httpResource`, a reactive approach to data loading. Enable it with:
131
+
132
+
```js
133
+
export default {
134
+
plugins: [
135
+
{
136
+
name: '@angular/common',
137
+
httpResource: {
138
+
enabled: true,
139
+
asClass: true,
140
+
},
141
+
},
142
+
],
143
+
};
144
+
```