Skip to content

Commit 937a874

Browse files
mrlubosmrlubos
authored
Merge pull request #2423 from max-scopp/feature/angular-resource-plugin
Angular Resource Plugin
2 parents 78c9caf + 554e9a6 commit 937a874

File tree

98 files changed

+22265
-2241
lines changed

Some content is hidden

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

98 files changed

+22265
-2241
lines changed

‎.changeset/slimy-news-juggle.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@hey-api/openapi-ts": patch
3+
---
4+
5+
feat(plugin): add `@angular/common` plugin

‎docs/.vitepress/config/en.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ export default defineConfig({
108108
},
109109
{
110110
link: '/openapi-ts/clients/angular',
111-
text: 'Angular <span data-soon>soon</span>',
111+
text: 'Angular',
112112
},
113113
{
114114
link: '/openapi-ts/clients/effect',

‎docs/openapi-ts/clients/angular.md

Lines changed: 135 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,143 @@ title: Angular client
33
description: Angular client for Hey API. Compatible with all our features.
44
---
55

6-
# Angular <span data-soon>soon</span>
6+
<script setup lang="ts">
7+
import { embedProject } from '../../embed'
8+
</script>
79

8-
<FeatureStatus issueNumber=1072 name="Angular" />
10+
<Heading>
11+
<h1>Angular</h1>
12+
<VersionLabel value="v1" />
13+
<ExperimentalLabel />
14+
</Heading>
915

1016
### About
1117

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.
1319

14-
<!--@include: ../../partials/sponsors.md-->
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';
54+
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 SDK 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+
'@hey-api/client-angular',
75+
{
76+
name: '@hey-api/sdk',
77+
asClass: true, // [!code ++]
78+
},
79+
],
80+
};
81+
```
82+
83+
::: warning
84+
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.
85+
:::
86+
87+
### Angular Providers
88+
89+
Use `provideHeyApiClient` to integrate the generated client with Angular's `HttpClient`:
90+
91+
```ts
92+
import { provideHttpClient, withFetch } from '@angular/common/http';
93+
import { provideHeyApiClient, client } from './client/client.gen';
94+
95+
export const appConfig = {
96+
providers: [provideHttpClient(withFetch()), provideHeyApiClient(client)],
97+
};
98+
```
99+
100+
### `createClient()`
101+
102+
Manually create a client instance for custom configurations:
103+
104+
```ts
105+
import { createClient } from './client/client';
106+
107+
const myClient = createClient({
108+
baseUrl: 'https://example.com',
109+
});
110+
```
111+
112+
## Plugin Configuration
113+
114+
The `@hey-api/client-angular` plugin supports options like `throwOnError` for error handling:
115+
116+
```js
117+
export default {
118+
input: 'https://get.heyapi.dev/hey-api/backend',
119+
output: 'src/client',
120+
plugins: [
121+
{
122+
name: '@hey-api/client-angular',
123+
throwOnError: false,
124+
},
125+
],
126+
};
127+
```
128+
129+
## httpResource
130+
131+
Angular 19 introduces a experimental api &ndash; `httpResource`, a reactive approach to data loading. Enable it with:
132+
133+
```js
134+
export default {
135+
plugins: [
136+
{
137+
name: '@angular/common',
138+
httpResource: {
139+
enabled: true,
140+
asClass: true,
141+
},
142+
},
143+
],
144+
};
145+
```

‎examples/openapi-ts-angular-resource/.editorconfig

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Editor configuration, see https://editorconfig.org
2+
root = true
3+
4+
[*]
5+
charset = utf-8
6+
indent_style = space
7+
indent_size = 2
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
11+
[*.ts]
12+
quote_type = single
13+
ij_typescript_use_double_quotes = false
14+
15+
[*.md]
16+
max_line_length = off
17+
trim_trailing_whitespace = false

‎examples/openapi-ts-angular-resource/.gitignore

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
2+
3+
# Compiled output
4+
/dist
5+
/tmp
6+
/out-tsc
7+
/bazel-out
8+
9+
# Node
10+
/node_modules
11+
npm-debug.log
12+
yarn-error.log
13+
14+
# IDEs and editors
15+
.idea/
16+
.project
17+
.classpath
18+
.c9/
19+
*.launch
20+
.settings/
21+
*.sublime-workspace
22+
23+
# Visual Studio Code
24+
.vscode/*
25+
!.vscode/settings.json
26+
!.vscode/tasks.json
27+
!.vscode/launch.json
28+
!.vscode/extensions.json
29+
.history/*
30+
31+
# Miscellaneous
32+
/.angular/cache
33+
.sass-cache/
34+
/connect.lock
35+
/coverage
36+
/libpeerconnection.log
37+
testem.log
38+
/typings
39+
40+
# System files
41+
.DS_Store
42+
Thumbs.db

‎examples/openapi-ts-angular-resource/.vscode/extensions.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
3+
"recommendations": ["angular.ng-template"]
4+
}

‎examples/openapi-ts-angular-resource/.vscode/launch.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
3+
"version": "0.2.0",
4+
"configurations": [
5+
{
6+
"name": "ng serve",
7+
"type": "chrome",
8+
"request": "launch",
9+
"preLaunchTask": "npm: start",
10+
"url": "http://localhost:4200/"
11+
},
12+
{
13+
"name": "ng test",
14+
"type": "chrome",
15+
"request": "launch",
16+
"preLaunchTask": "npm: test",
17+
"url": "http://localhost:9876/debug.html"
18+
}
19+
]
20+
}

‎examples/openapi-ts-angular-resource/.vscode/tasks.json

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
// For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
3+
"version": "2.0.0",
4+
"tasks": [
5+
{
6+
"type": "npm",
7+
"script": "start",
8+
"isBackground": true,
9+
"problemMatcher": {
10+
"owner": "typescript",
11+
"pattern": "$tsc",
12+
"background": {
13+
"activeOnStart": true,
14+
"beginsPattern": {
15+
"regexp": "(.*?)"
16+
},
17+
"endsPattern": {
18+
"regexp": "bundle generation complete"
19+
}
20+
}
21+
}
22+
},
23+
{
24+
"type": "npm",
25+
"script": "test",
26+
"isBackground": true,
27+
"problemMatcher": {
28+
"owner": "typescript",
29+
"pattern": "$tsc",
30+
"background": {
31+
"activeOnStart": true,
32+
"beginsPattern": {
33+
"regexp": "(.*?)"
34+
},
35+
"endsPattern": {
36+
"regexp": "bundle generation complete"
37+
}
38+
}
39+
}
40+
}
41+
]
42+
}

‎examples/openapi-ts-angular-resource/README.md

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
# Angular
2+
3+
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.15.
4+
5+
## Development server
6+
7+
To start a local development server, run:
8+
9+
```bash
10+
ng serve
11+
```
12+
13+
Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
14+
15+
## Code scaffolding
16+
17+
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
18+
19+
```bash
20+
ng generate component component-name
21+
```
22+
23+
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
24+
25+
```bash
26+
ng generate --help
27+
```
28+
29+
## Building
30+
31+
To build the project run:
32+
33+
```bash
34+
ng build
35+
```
36+
37+
This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
38+
39+
## Running unit tests
40+
41+
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
42+
43+
```bash
44+
ng test
45+
```
46+
47+
## Running end-to-end tests
48+
49+
For end-to-end (e2e) testing, run:
50+
51+
```bash
52+
ng e2e
53+
```
54+
55+
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
56+
57+
## Additional Resources
58+
59+
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

0 commit comments

Comments
 (0)