Skip to content

Commit 77a960b

Browse files
jase88jase88
committed
feat(angular): update README with new provideApi usage examples for Angular applications
1 parent afc0a88 commit 77a960b

1 file changed

Lines changed: 69 additions & 126 deletions

File tree

  • modules/openapi-generator/src/main/resources/typescript-angular

‎modules/openapi-generator/src/main/resources/typescript-angular/README.mustache‎

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

6060
```typescript
61-
// without configuring providers
62-
import { {{apiModuleClassName}} } from '{{npmName}}';
63-
import { HttpClientModule } from '@angular/common/http';
6461

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

75+
If different from the generated base path, during app bootstrap, you can provide the base path to your service.
76+
7977
```typescript
80-
// configuring providers
81-
import { {{apiModuleClassName}}, {{configurationClassName}}, {{configurationParametersInterfaceName}} } from '{{npmName}}';
82-
83-
export function apiConfigFactory (): {{configurationClassName}} {
84-
const params: {{configurationParametersInterfaceName}} = {
85-
// set configuration parameters here.
86-
}
87-
return new {{configurationClassName}}(params);
88-
}
89-
90-
@NgModule({
91-
imports: [ {{apiModuleClassName}}.forRoot(apiConfigFactory) ],
92-
declarations: [ AppComponent ],
93-
providers: [],
94-
bootstrap: [ AppComponent ]
95-
})
96-
export class AppModule {}
78+
import { ApplicationConfig } from '@angular/core';
79+
import { provideHttpClient } from '@angular/common/http';
80+
import { provideApi } from 'sample-angular-19-0-0';
81+
82+
export const appConfig: ApplicationConfig = {
83+
providers: [
84+
// ...
85+
provideHttpClient(),
86+
provideApi('http://localhost:9999')
87+
],
88+
};
9789
```
9890

9991
```typescript
100-
// configuring providers with an authentication service that manages your access tokens
101-
import { {{apiModuleClassName}}, {{configurationClassName}} } from '{{npmName}}';
92+
// with a custom configuration
93+
import { ApplicationConfig } from '@angular/core';
94+
import { provideHttpClient } from '@angular/common/http';
95+
import { provideApi } from 'sample-angular-19-0-0';
10296

103-
@NgModule({
104-
imports: [ {{apiModuleClassName}} ],
105-
declarations: [ AppComponent ],
97+
export const appConfig: ApplicationConfig = {
10698
providers: [
107-
{
108-
provide: {{configurationClassName}},
109-
useFactory: (authService: AuthService) => new {{configurationClassName}}(
110-
{
111-
basePath: environment.apiUrl,
112-
accessToken: authService.getAccessToken.bind(authService)
113-
}
114-
),
115-
deps: [AuthService],
116-
multi: false
117-
}
99+
// ...
100+
provideHttpClient(),
101+
provideApi({
102+
withCredentials: true,
103+
username: 'user',
104+
password: 'password'
105+
})
118106
],
119-
bootstrap: [ AppComponent ]
120-
})
121-
export class AppModule {}
107+
};
122108
```
123109

124110
```typescript
125-
import { DefaultApi } from '{{npmName}}';
111+
// with factory building a custom configuration
112+
import { ApplicationConfig } from '@angular/core';
113+
import { provideHttpClient } from '@angular/common/http';
114+
import { provideApi, {{configurationClassName}} } from 'sample-angular-19-0-0';
126115

127-
export class AppComponent {
128-
constructor(private apiGateway: DefaultApi) { }
129-
}
116+
export const appConfig: ApplicationConfig = {
117+
providers: [
118+
// ...
119+
provideHttpClient(),
120+
{
121+
provide: {{configurationClassName}},
122+
useFactory: (authService: AuthService) => new {{configurationClassName}}({
123+
basePath: 'http://localhost:9999',
124+
withCredentials: true,
125+
username: authService.getUsername(),
126+
password: authService.getPassword(),
127+
}),
128+
deps: [AuthService],
129+
multi: false
130+
}
131+
],
132+
};
130133
```
131134

132-
Note: The {{apiModuleClassName}} 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 / {{apiModuleClassName}}s
135+
### Using multiple OpenAPI files / APIs
136136

137-
In order to use multiple `{{apiModuleClassName}}s` generated from different OpenAPI files,
137+
In order to use multiple APIs generated from different OpenAPI files,
138138
you can create an alias name when importing the modules
139139
in order to avoid naming conflicts:
140140

141141
```typescript
142-
import { {{apiModuleClassName}} } from 'my-api-path';
143-
import { {{apiModuleClassName}} as OtherApiModule } from 'my-other-api-path';
142+
import { provideApi as provideUserApi } from 'my-user-api-path';
143+
import { provideApi as provideAdminApi } from 'my-admin-api-path';
144144
import { HttpClientModule } from '@angular/common/http';
145-
146-
@NgModule({
147-
imports: [
148-
{{apiModuleClassName}},
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-
}
158-
```
159-
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-
164-
```typescript
165-
import { BASE_PATH } from '{{npmName}}';
166-
167-
bootstrap(AppComponent, [
168-
{ provide: BASE_PATH, useValue: 'https://your-web-service.com' },
169-
]);
170-
```
171-
172-
or
173-
174-
```typescript
175-
import { BASE_PATH } from '{{npmName}}';
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:
189-
190-
```typescript
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 '{{npmName}}';
201145
import { environment } from '../environments/environment';
202146

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 { }
147+
export const appConfig: ApplicationConfig = {
148+
providers: [
149+
// ...
150+
provideHttpClient(),
151+
provideUserApi(environment.basePath),
152+
provideAdminApi(environment.basePath),
153+
],
154+
};
212155
```
213156

214157
### Customizing path parameter encoding

0 commit comments

Comments
 (0)