Skip to content

Commit d0e5248

Browse files
jase88jase88
committed
feat(angular): add support for README_beforeV17 and update provideApi return type
1 parent 7391063 commit d0e5248

18 files changed

Lines changed: 1578 additions & 960 deletions

File tree

  • samples/client
    • others/typescript-angular/builds
    • petstore
      • typescript-angular-v12-oneOf/builds/default
      • typescript-angular-v12-provided-in-any/builds/default
      • typescript-angular-v12-provided-in-root/builds
      • typescript-angular-v13-oneOf/builds/default
      • typescript-angular-v13-provided-in-any/builds/default
      • typescript-angular-v13-provided-in-root/builds
      • typescript-angular-v14-provided-in-root/builds/default
      • typescript-angular-v14-query-param-object-format
      • typescript-angular-v15-provided-in-root/builds/default
      • typescript-angular-v16-provided-in-root/builds/default
      • typescript-angular-v17-provided-in-root/builds/default
      • typescript-angular-v18-provided-in-root/builds/default
      • typescript-angular-v19-with-angular-dependency-params/builds/default
      • typescript-angular-v19/builds/default

‎samples/client/others/typescript-angular/builds/composed-schemas-tagged-unions/provide-api.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import { makeEnvironmentProviders } from "@angular/core";
1+
import { EnvironmentProviders, makeEnvironmentProviders } from "@angular/core";
22
import { Configuration, ConfigurationParameters } from './configuration';
33
import { BASE_PATH } from './variables';
44

5-
export function provideApi(configOrBasePath: string | ConfigurationParameters) {
5+
// Returns the service class providers, to be used in the [ApplicationConfig](https://angular.dev/api/core/ApplicationConfig).
6+
export function provideApi(configOrBasePath: string | ConfigurationParameters): EnvironmentProviders {
67
return makeEnvironmentProviders([
78
typeof configOrBasePath === "string"
89
? { provide: BASE_PATH, useValue: configOrBasePath }

‎samples/client/others/typescript-angular/builds/composed-schemas/provide-api.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import { makeEnvironmentProviders } from "@angular/core";
1+
import { EnvironmentProviders, makeEnvironmentProviders } from "@angular/core";
22
import { Configuration, ConfigurationParameters } from './configuration';
33
import { BASE_PATH } from './variables';
44

5-
export function provideApi(configOrBasePath: string | ConfigurationParameters) {
5+
// Returns the service class providers, to be used in the [ApplicationConfig](https://angular.dev/api/core/ApplicationConfig).
6+
export function provideApi(configOrBasePath: string | ConfigurationParameters): EnvironmentProviders {
67
return makeEnvironmentProviders([
78
typeof configOrBasePath === "string"
89
? { provide: BASE_PATH, useValue: configOrBasePath }

‎samples/client/petstore/typescript-angular-v12-oneOf/builds/default/README.md‎

Lines changed: 130 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -58,106 +58,157 @@ Published packages are not effected by this issue.
5858
In your Angular project:
5959

6060
```typescript
61+
// without configuring providers
62+
import { ApiModule } from '';
63+
import { HttpClientModule } from '@angular/common/http';
6164

62-
import { ApplicationConfig } from '@angular/core';
63-
import { provideHttpClient } from '@angular/common/http';
64-
import { provideApi } from '';
65+
@NgModule({
66+
imports: [
67+
ApiModule,
68+
// make sure to import the HttpClientModule in the AppModule only,
69+
// see https://github.com/angular/angular/issues/20575
70+
HttpClientModule
71+
],
72+
declarations: [ AppComponent ],
73+
providers: [],
74+
bootstrap: [ AppComponent ]
75+
})
76+
export class AppModule {}
77+
```
6578

66-
export const appConfig: ApplicationConfig = {
67-
providers: [
68-
// ...
69-
provideHttpClient(),
70-
provideApi()
71-
],
72-
};
79+
```typescript
80+
// configuring providers
81+
import { ApiModule, Configuration, ConfigurationParameters } from '';
82+
83+
export function apiConfigFactory (): Configuration {
84+
const params: ConfigurationParameters = {
85+
// set configuration parameters here.
86+
}
87+
return new Configuration(params);
88+
}
89+
90+
@NgModule({
91+
imports: [ ApiModule.forRoot(apiConfigFactory) ],
92+
declarations: [ AppComponent ],
93+
providers: [],
94+
bootstrap: [ AppComponent ]
95+
})
96+
export class AppModule {}
7397
```
7498

75-
**NOTE**
76-
If you're still using `AppModule` and haven't [migrated](https://angular.dev/reference/migrations/standalone) yet, you can still import an Angular module:
7799
```typescript
78-
import { ApiModule } from '';
100+
// configuring providers with an authentication service that manages your access tokens
101+
import { ApiModule, Configuration } from '';
102+
103+
@NgModule({
104+
imports: [ ApiModule ],
105+
declarations: [ AppComponent ],
106+
providers: [
107+
{
108+
provide: Configuration,
109+
useFactory: (authService: AuthService) => new Configuration(
110+
{
111+
basePath: environment.apiUrl,
112+
accessToken: authService.getAccessToken.bind(authService)
113+
}
114+
),
115+
deps: [AuthService],
116+
multi: false
117+
}
118+
],
119+
bootstrap: [ AppComponent ]
120+
})
121+
export class AppModule {}
122+
```
123+
124+
```typescript
125+
import { DefaultApi } from '';
126+
127+
export class AppComponent {
128+
constructor(private apiGateway: DefaultApi) { }
129+
}
79130
```
80131

81-
If different from the generated base path, during app bootstrap, you can provide the base path to your service.
132+
Note: The ApiModule is restricted to being instantiated once app wide.
133+
This is to ensure that all services are treated as singletons.
134+
135+
### Using multiple OpenAPI files / APIs / ApiModules
136+
137+
In order to use multiple `ApiModules` generated from different OpenAPI files,
138+
you can create an alias name when importing the modules
139+
in order to avoid naming conflicts:
82140

83141
```typescript
84-
import { ApplicationConfig } from '@angular/core';
85-
import { provideHttpClient } from '@angular/common/http';
86-
import { provideApi } from '';
87-
88-
export const appConfig: ApplicationConfig = {
89-
providers: [
90-
// ...
91-
provideHttpClient(),
92-
provideApi('http://localhost:9999')
93-
],
94-
};
142+
import { ApiModule } from 'my-api-path';
143+
import { ApiModule as OtherApiModule } from 'my-other-api-path';
144+
import { HttpClientModule } from '@angular/common/http';
145+
146+
@NgModule({
147+
imports: [
148+
ApiModule,
149+
OtherApiModule,
150+
// make sure to import the HttpClientModule in the AppModule only,
151+
// see https://github.com/angular/angular/issues/20575
152+
HttpClientModule
153+
]
154+
})
155+
export class AppModule {
156+
157+
}
95158
```
96159

160+
### Set service base path
161+
162+
If different than the generated base path, during app bootstrap, you can provide the base path to your service.
163+
97164
```typescript
98-
// with a custom configuration
99-
import { ApplicationConfig } from '@angular/core';
100-
import { provideHttpClient } from '@angular/common/http';
101-
import { provideApi } from '';
102-
103-
export const appConfig: ApplicationConfig = {
104-
providers: [
105-
// ...
106-
provideHttpClient(),
107-
provideApi({
108-
withCredentials: true,
109-
username: 'user',
110-
password: 'password'
111-
})
112-
],
113-
};
165+
import { BASE_PATH } from '';
166+
167+
bootstrap(AppComponent, [
168+
{ provide: BASE_PATH, useValue: 'https://your-web-service.com' },
169+
]);
114170
```
115171

172+
or
173+
116174
```typescript
117-
// with factory building a custom configuration
118-
import { ApplicationConfig } from '@angular/core';
119-
import { provideHttpClient } from '@angular/common/http';
120-
import { provideApi, Configuration } from '';
121-
122-
export const appConfig: ApplicationConfig = {
123-
providers: [
124-
// ...
125-
provideHttpClient(),
126-
{
127-
provide: Configuration,
128-
useFactory: (authService: AuthService) => new Configuration({
129-
basePath: 'http://localhost:9999',
130-
withCredentials: true,
131-
username: authService.getUsername(),
132-
password: authService.getPassword(),
133-
}),
134-
deps: [AuthService],
135-
multi: false
136-
}
137-
],
138-
};
175+
import { BASE_PATH } from '';
176+
177+
@NgModule({
178+
imports: [],
179+
declarations: [ AppComponent ],
180+
providers: [ provide: BASE_PATH, useValue: 'https://your-web-service.com' ],
181+
bootstrap: [ AppComponent ]
182+
})
183+
export class AppModule {}
139184
```
140185

141-
### Using multiple OpenAPI files / APIs
186+
### Using @angular/cli
142187

143-
In order to use multiple APIs generated from different OpenAPI files,
144-
you can create an alias name when importing the modules
145-
in order to avoid naming conflicts:
188+
First extend your `src/environments/*.ts` files by adding the corresponding base path:
146189

147190
```typescript
148-
import { provideApi as provideUserApi } from 'my-user-api-path';
149-
import { provideApi as provideAdminApi } from 'my-admin-api-path';
150-
import { HttpClientModule } from '@angular/common/http';
191+
export const environment = {
192+
production: false,
193+
API_BASE_PATH: 'http://127.0.0.1:8080'
194+
};
195+
```
196+
197+
In the src/app/app.module.ts:
198+
199+
```typescript
200+
import { BASE_PATH } from '';
151201
import { environment } from '../environments/environment';
152202

153-
export const appConfig: ApplicationConfig = {
154-
providers: [
155-
// ...
156-
provideHttpClient(),
157-
provideUserApi(environment.basePath),
158-
provideAdminApi(environment.basePath),
159-
],
160-
};
203+
@NgModule({
204+
declarations: [
205+
AppComponent
206+
],
207+
imports: [ ],
208+
providers: [{ provide: BASE_PATH, useValue: environment.API_BASE_PATH }],
209+
bootstrap: [ AppComponent ]
210+
})
211+
export class AppModule { }
161212
```
162213

163214
### Customizing path parameter encoding
@@ -176,7 +227,7 @@ Example value for use in your Configuration-Provider:
176227

177228
```typescript
178229
new Configuration({
179-
encodeParam: (param: Param) => myFancyParamEncoder(param),
230+
encodeParam: (param: Param) => myFancyParamEncoder(param),
180231
})
181232
```
182233

0 commit comments

Comments
 (0)