Skip to content

Commit 907ac12

Browse files
jase88jase88
committed
feat(angular): add provideApi function and update README with usage examples
1 parent fb3e126 commit 907ac12

4 files changed

Lines changed: 90 additions & 124 deletions

File tree

‎samples/client/petstore/typescript-angular-v19/builds/deep-object/.openapi-generator/FILES‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,6 @@ model/models.ts
1414
ng-package.json
1515
package.json
1616
param.ts
17+
provide-api.ts
1718
tsconfig.json
1819
variables.ts

‎samples/client/petstore/typescript-angular-v19/builds/deep-object/README.md‎

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

6060
```typescript
61-
// without configuring providers
62-
import { ApiModule } from 'sample-angular-19-0-0-deep-object';
63-
import { HttpClientModule } from '@angular/common/http';
64-
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-
```
7861

79-
```typescript
80-
// configuring providers
81-
import { ApiModule, Configuration, ConfigurationParameters } from 'sample-angular-19-0-0-deep-object';
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 {}
97-
```
62+
import { ApplicationConfig } from '@angular/core';
63+
import { provideHttpClient } from '@angular/common/http';
64+
import { provideApi } from 'sample-angular-19-0-0-deep-object';
9865

99-
```typescript
100-
// configuring providers with an authentication service that manages your access tokens
101-
import { ApiModule, Configuration } from 'sample-angular-19-0-0-deep-object';
102-
103-
@NgModule({
104-
imports: [ ApiModule ],
105-
declarations: [ AppComponent ],
66+
export const appConfig: ApplicationConfig = {
10667
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-
}
68+
// ...
69+
provideHttpClient(),
70+
provideApi()
11871
],
119-
bootstrap: [ AppComponent ]
120-
})
121-
export class AppModule {}
72+
};
12273
```
12374

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:
12477
```typescript
125-
import { DefaultApi } from 'sample-angular-19-0-0-deep-object';
126-
127-
export class AppComponent {
128-
constructor(private apiGateway: DefaultApi) { }
129-
}
78+
import { ApiModule } from 'sample-angular-19-0-0-deep-object';
13079
```
13180

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:
81+
If different from the generated base path, during app bootstrap, you can provide the base path to your service.
14082

14183
```typescript
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 {
84+
import { ApplicationConfig } from '@angular/core';
85+
import { provideHttpClient } from '@angular/common/http';
86+
import { provideApi } from 'sample-angular-19-0-0-deep-object';
15687

157-
}
88+
export const appConfig: ApplicationConfig = {
89+
providers: [
90+
// ...
91+
provideHttpClient(),
92+
provideApi('http://localhost:9999')
93+
],
94+
};
15895
```
15996

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-
16497
```typescript
165-
import { BASE_PATH } from 'sample-angular-19-0-0-deep-object';
98+
// with a custom configuration
99+
import { ApplicationConfig } from '@angular/core';
100+
import { provideHttpClient } from '@angular/common/http';
101+
import { provideApi } from 'sample-angular-19-0-0-deep-object';
166102

167-
bootstrap(AppComponent, [
168-
{ provide: BASE_PATH, useValue: 'https://your-web-service.com' },
169-
]);
103+
export const appConfig: ApplicationConfig = {
104+
providers: [
105+
// ...
106+
provideHttpClient(),
107+
provideApi({
108+
withCredentials: true,
109+
username: 'user',
110+
password: 'password'
111+
})
112+
],
113+
};
170114
```
171115

172-
or
173-
174116
```typescript
175-
import { BASE_PATH } from 'sample-angular-19-0-0-deep-object';
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 {}
184-
```
185-
186-
### Using @angular/cli
187-
188-
First extend your `src/environments/*.ts` files by adding the corresponding base path:
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 'sample-angular-19-0-0-deep-object';
189121

190-
```typescript
191-
export const environment = {
192-
production: false,
193-
API_BASE_PATH: 'http://127.0.0.1:8080'
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+
],
194138
};
195139
```
196140

197-
In the src/app/app.module.ts:
141+
### Using multiple OpenAPI files / APIs
142+
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:
198146

199147
```typescript
200-
import { BASE_PATH } from 'sample-angular-19-0-0-deep-object';
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';
201151
import { environment } from '../environments/environment';
202152

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 { }
153+
export const appConfig: ApplicationConfig = {
154+
providers: [
155+
// ...
156+
provideHttpClient(),
157+
provideUserApi(environment.basePath),
158+
provideAdminApi(environment.basePath),
159+
],
160+
};
212161
```
213162

214163
### Customizing path parameter encoding

‎samples/client/petstore/typescript-angular-v19/builds/deep-object/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,5 @@ export * from './model/models';
33
export * from './variables';
44
export * from './configuration';
55
export * from './api.module';
6+
export * from './provide-api';
67
export * from './param';

‎samples/client/petstore/typescript-angular-v19/builds/deep-object/provide-api.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { EnvironmentProviders, makeEnvironmentProviders } from "@angular/core";
2+
import { Configuration, ConfigurationParameters } from './configuration';
3+
import { BASE_PATH } from './variables';
4+
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 {
7+
return makeEnvironmentProviders([
8+
typeof configOrBasePath === "string"
9+
? { provide: BASE_PATH, useValue: configOrBasePath }
10+
: {
11+
provide: Configuration,
12+
useValue: new Configuration({ ...configOrBasePath }),
13+
},
14+
]);
15+
}

0 commit comments

Comments
 (0)