diff --git a/modules/openapi-generator/src/main/java/org/openapitools/codegen/languages/TypeScriptAngularClientCodegen.java b/modules/openapi-generator/src/main/java/org/openapitools/codegen/languages/TypeScriptAngularClientCodegen.java index f7c1501e8817..9fe94debeee5 100644 --- a/modules/openapi-generator/src/main/java/org/openapitools/codegen/languages/TypeScriptAngularClientCodegen.java +++ b/modules/openapi-generator/src/main/java/org/openapitools/codegen/languages/TypeScriptAngularClientCodegen.java @@ -176,12 +176,27 @@ public String getHelp() { @Override public void processOpts() { super.processOpts(); + + // determine NG version + SemVer ngVersion; + if (additionalProperties.containsKey(NG_VERSION)) { + ngVersion = new SemVer(additionalProperties.get(NG_VERSION).toString()); + } else { + ngVersion = new SemVer(this.ngVersion); + LOGGER.info("generating code for Angular {} ...", ngVersion); + LOGGER.info(" (you can select the angular version by setting the additionalProperties (--additional-properties in CLI) ngVersion)"); + } + boolean ngVersionAtLeast_17 = ngVersion.atLeast("17.0.0"); + supportingFiles.add( new SupportingFile("models.mustache", modelPackage().replace('.', File.separatorChar), "models.ts")); supportingFiles .add(new SupportingFile("apis.mustache", apiPackage().replace('.', File.separatorChar), "api.ts")); supportingFiles.add(new SupportingFile("index.mustache", getIndexDirectory(), "index.ts")); supportingFiles.add(new SupportingFile("api.module.mustache", getIndexDirectory(), "api.module.ts")); + if (ngVersionAtLeast_17) { + supportingFiles.add(new SupportingFile("provide-api.mustache", getIndexDirectory(), "provide-api.ts")); + } supportingFiles.add(new SupportingFile("configuration.mustache", getIndexDirectory(), "configuration.ts")); supportingFiles.add(new SupportingFile("api.base.service.mustache", getIndexDirectory(), "api.base.service.ts")); supportingFiles.add(new SupportingFile("variables.mustache", getIndexDirectory(), "variables.ts")); @@ -189,17 +204,14 @@ public void processOpts() { supportingFiles.add(new SupportingFile("param.mustache", getIndexDirectory(), "param.ts")); supportingFiles.add(new SupportingFile("gitignore", "", ".gitignore")); supportingFiles.add(new SupportingFile("git_push.sh.mustache", "", "git_push.sh")); - supportingFiles.add(new SupportingFile("README.mustache", getIndexDirectory(), "README.md")); - // determine NG version - SemVer ngVersion; - if (additionalProperties.containsKey(NG_VERSION)) { - ngVersion = new SemVer(additionalProperties.get(NG_VERSION).toString()); - } else { - ngVersion = new SemVer(this.ngVersion); - LOGGER.info("generating code for Angular {} ...", ngVersion); - LOGGER.info(" (you can select the angular version by setting the additionalProperties (--additional-properties in CLI) ngVersion)"); + if(ngVersionAtLeast_17) { + supportingFiles.add(new SupportingFile("README.mustache", getIndexDirectory(), "README.md")); } + else { + supportingFiles.add(new SupportingFile("README_beforeV17.mustache", getIndexDirectory(), "README.md")); + } + if (!ngVersion.atLeast("9.0.0")) { throw new IllegalArgumentException("Invalid ngVersion: " + ngVersion + ". Only Angular v9+ is supported."); @@ -250,6 +262,7 @@ public void processOpts() { } additionalProperties.put(NG_VERSION, ngVersion); + additionalProperties.put("ngVersionAtLeast_17", ngVersionAtLeast_17); if (additionalProperties.containsKey(API_MODULE_PREFIX)) { String apiModulePrefix = additionalProperties.get(API_MODULE_PREFIX).toString(); diff --git a/modules/openapi-generator/src/main/resources/typescript-angular/README.mustache b/modules/openapi-generator/src/main/resources/typescript-angular/README.mustache index 66f0c21629de..afe430da51ce 100644 --- a/modules/openapi-generator/src/main/resources/typescript-angular/README.mustache +++ b/modules/openapi-generator/src/main/resources/typescript-angular/README.mustache @@ -58,157 +58,106 @@ Published packages are not effected by this issue. In your Angular project: ```typescript -// without configuring providers -import { {{apiModuleClassName}} } from '{{npmName}}'; -import { HttpClientModule } from '@angular/common/http'; - -@NgModule({ - imports: [ - {{apiModuleClassName}}, - // make sure to import the HttpClientModule in the AppModule only, - // see https://github.com/angular/angular/issues/20575 - HttpClientModule - ], - declarations: [ AppComponent ], - providers: [], - bootstrap: [ AppComponent ] -}) -export class AppModule {} -``` -```typescript -// configuring providers -import { {{apiModuleClassName}}, {{configurationClassName}}, {{configurationParametersInterfaceName}} } from '{{npmName}}'; - -export function apiConfigFactory (): {{configurationClassName}} { - const params: {{configurationParametersInterfaceName}} = { - // set configuration parameters here. - } - return new {{configurationClassName}}(params); -} - -@NgModule({ - imports: [ {{apiModuleClassName}}.forRoot(apiConfigFactory) ], - declarations: [ AppComponent ], - providers: [], - bootstrap: [ AppComponent ] -}) -export class AppModule {} -``` +import { ApplicationConfig } from '@angular/core'; +import { provideHttpClient } from '@angular/common/http'; +import { provideApi } from '{{npmName}}'; -```typescript -// configuring providers with an authentication service that manages your access tokens -import { {{apiModuleClassName}}, {{configurationClassName}} } from '{{npmName}}'; - -@NgModule({ - imports: [ {{apiModuleClassName}} ], - declarations: [ AppComponent ], +export const appConfig: ApplicationConfig = { providers: [ - { - provide: {{configurationClassName}}, - useFactory: (authService: AuthService) => new {{configurationClassName}}( - { - basePath: environment.apiUrl, - accessToken: authService.getAccessToken.bind(authService) - } - ), - deps: [AuthService], - multi: false - } + // ... + provideHttpClient(), + provideApi() ], - bootstrap: [ AppComponent ] -}) -export class AppModule {} +}; ``` +**NOTE** +If you're still using `AppModule` and haven't [migrated](https://angular.dev/reference/migrations/standalone) yet, you can still import an Angular module: ```typescript -import { DefaultApi } from '{{npmName}}'; - -export class AppComponent { - constructor(private apiGateway: DefaultApi) { } -} +import { {{apiModuleClassName}} } from '{{npmName}}'; ``` -Note: The {{apiModuleClassName}} is restricted to being instantiated once app wide. -This is to ensure that all services are treated as singletons. - -### Using multiple OpenAPI files / APIs / {{apiModuleClassName}}s - -In order to use multiple `{{apiModuleClassName}}s` generated from different OpenAPI files, -you can create an alias name when importing the modules -in order to avoid naming conflicts: +If different from the generated base path, during app bootstrap, you can provide the base path to your service. ```typescript -import { {{apiModuleClassName}} } from 'my-api-path'; -import { {{apiModuleClassName}} as OtherApiModule } from 'my-other-api-path'; -import { HttpClientModule } from '@angular/common/http'; - -@NgModule({ - imports: [ - {{apiModuleClassName}}, - OtherApiModule, - // make sure to import the HttpClientModule in the AppModule only, - // see https://github.com/angular/angular/issues/20575 - HttpClientModule - ] -}) -export class AppModule { +import { ApplicationConfig } from '@angular/core'; +import { provideHttpClient } from '@angular/common/http'; +import { provideApi } from '{{npmName}}'; -} +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideHttpClient(), + provideApi('http://localhost:9999') + ], +}; ``` -### Set service base path - -If different than the generated base path, during app bootstrap, you can provide the base path to your service. - ```typescript -import { BASE_PATH } from '{{npmName}}'; +// with a custom configuration +import { ApplicationConfig } from '@angular/core'; +import { provideHttpClient } from '@angular/common/http'; +import { provideApi } from '{{npmName}}'; -bootstrap(AppComponent, [ - { provide: BASE_PATH, useValue: 'https://your-web-service.com' }, -]); +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideHttpClient(), + provideApi({ + withCredentials: true, + username: 'user', + password: 'password' + }) + ], +}; ``` -or - ```typescript -import { BASE_PATH } from '{{npmName}}'; - -@NgModule({ - imports: [], - declarations: [ AppComponent ], - providers: [ provide: BASE_PATH, useValue: 'https://your-web-service.com' ], - bootstrap: [ AppComponent ] -}) -export class AppModule {} -``` - -### Using @angular/cli - -First extend your `src/environments/*.ts` files by adding the corresponding base path: +// with factory building a custom configuration +import { ApplicationConfig } from '@angular/core'; +import { provideHttpClient } from '@angular/common/http'; +import { provideApi, {{configurationClassName}} } from '{{npmName}}'; -```typescript -export const environment = { - production: false, - API_BASE_PATH: 'http://127.0.0.1:8080' +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideHttpClient(), + { + provide: {{configurationClassName}}, + useFactory: (authService: AuthService) => new {{configurationClassName}}({ + basePath: 'http://localhost:9999', + withCredentials: true, + username: authService.getUsername(), + password: authService.getPassword(), + }), + deps: [AuthService], + multi: false + } + ], }; ``` -In the src/app/app.module.ts: +### Using multiple OpenAPI files / APIs + +In order to use multiple APIs generated from different OpenAPI files, +you can create an alias name when importing the modules +in order to avoid naming conflicts: ```typescript -import { BASE_PATH } from '{{npmName}}'; +import { provideApi as provideUserApi } from 'my-user-api-path'; +import { provideApi as provideAdminApi } from 'my-admin-api-path'; +import { HttpClientModule } from '@angular/common/http'; import { environment } from '../environments/environment'; -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ ], - providers: [{ provide: BASE_PATH, useValue: environment.API_BASE_PATH }], - bootstrap: [ AppComponent ] -}) -export class AppModule { } +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideHttpClient(), + provideUserApi(environment.basePath), + provideAdminApi(environment.basePath), + ], +}; ``` ### Customizing path parameter encoding diff --git a/modules/openapi-generator/src/main/resources/typescript-angular/README_beforeV17.mustache b/modules/openapi-generator/src/main/resources/typescript-angular/README_beforeV17.mustache new file mode 100644 index 000000000000..66f0c21629de --- /dev/null +++ b/modules/openapi-generator/src/main/resources/typescript-angular/README_beforeV17.mustache @@ -0,0 +1,236 @@ +# {{npmName}}@{{npmVersion}} + +{{{appDescription}}} + +{{#version}}The version of the OpenAPI document: {{{.}}}{{/version}} + +## Building + +To install the required dependencies and to build the typescript sources run: + +```console +npm install +npm run build +``` + +## Publishing + +First build the package then run `npm publish dist` (don't forget to specify the `dist` folder!) + +## Consuming + +Navigate to the folder of your consuming project and run one of next commands. + +_published:_ + +```console +npm install {{npmName}}@{{npmVersion}} --save +``` + +_without publishing (not recommended):_ + +```console +npm install PATH_TO_GENERATED_PACKAGE/dist.tgz --save +``` + +_It's important to take the tgz file, otherwise you'll get trouble with links on windows_ + +_using `npm link`:_ + +In PATH_TO_GENERATED_PACKAGE/dist: + +```console +npm link +``` + +In your project: + +```console +npm link {{npmName}} +``` + +__Note for Windows users:__ The Angular CLI has troubles to use linked npm packages. +Please refer to this issue for a solution / workaround. +Published packages are not effected by this issue. + +### General usage + +In your Angular project: + +```typescript +// without configuring providers +import { {{apiModuleClassName}} } from '{{npmName}}'; +import { HttpClientModule } from '@angular/common/http'; + +@NgModule({ + imports: [ + {{apiModuleClassName}}, + // make sure to import the HttpClientModule in the AppModule only, + // see https://github.com/angular/angular/issues/20575 + HttpClientModule + ], + declarations: [ AppComponent ], + providers: [], + bootstrap: [ AppComponent ] +}) +export class AppModule {} +``` + +```typescript +// configuring providers +import { {{apiModuleClassName}}, {{configurationClassName}}, {{configurationParametersInterfaceName}} } from '{{npmName}}'; + +export function apiConfigFactory (): {{configurationClassName}} { + const params: {{configurationParametersInterfaceName}} = { + // set configuration parameters here. + } + return new {{configurationClassName}}(params); +} + +@NgModule({ + imports: [ {{apiModuleClassName}}.forRoot(apiConfigFactory) ], + declarations: [ AppComponent ], + providers: [], + bootstrap: [ AppComponent ] +}) +export class AppModule {} +``` + +```typescript +// configuring providers with an authentication service that manages your access tokens +import { {{apiModuleClassName}}, {{configurationClassName}} } from '{{npmName}}'; + +@NgModule({ + imports: [ {{apiModuleClassName}} ], + declarations: [ AppComponent ], + providers: [ + { + provide: {{configurationClassName}}, + useFactory: (authService: AuthService) => new {{configurationClassName}}( + { + basePath: environment.apiUrl, + accessToken: authService.getAccessToken.bind(authService) + } + ), + deps: [AuthService], + multi: false + } + ], + bootstrap: [ AppComponent ] +}) +export class AppModule {} +``` + +```typescript +import { DefaultApi } from '{{npmName}}'; + +export class AppComponent { + constructor(private apiGateway: DefaultApi) { } +} +``` + +Note: The {{apiModuleClassName}} is restricted to being instantiated once app wide. +This is to ensure that all services are treated as singletons. + +### Using multiple OpenAPI files / APIs / {{apiModuleClassName}}s + +In order to use multiple `{{apiModuleClassName}}s` generated from different OpenAPI files, +you can create an alias name when importing the modules +in order to avoid naming conflicts: + +```typescript +import { {{apiModuleClassName}} } from 'my-api-path'; +import { {{apiModuleClassName}} as OtherApiModule } from 'my-other-api-path'; +import { HttpClientModule } from '@angular/common/http'; + +@NgModule({ + imports: [ + {{apiModuleClassName}}, + OtherApiModule, + // make sure to import the HttpClientModule in the AppModule only, + // see https://github.com/angular/angular/issues/20575 + HttpClientModule + ] +}) +export class AppModule { + +} +``` + +### Set service base path + +If different than the generated base path, during app bootstrap, you can provide the base path to your service. + +```typescript +import { BASE_PATH } from '{{npmName}}'; + +bootstrap(AppComponent, [ + { provide: BASE_PATH, useValue: 'https://your-web-service.com' }, +]); +``` + +or + +```typescript +import { BASE_PATH } from '{{npmName}}'; + +@NgModule({ + imports: [], + declarations: [ AppComponent ], + providers: [ provide: BASE_PATH, useValue: 'https://your-web-service.com' ], + bootstrap: [ AppComponent ] +}) +export class AppModule {} +``` + +### Using @angular/cli + +First extend your `src/environments/*.ts` files by adding the corresponding base path: + +```typescript +export const environment = { + production: false, + API_BASE_PATH: 'http://127.0.0.1:8080' +}; +``` + +In the src/app/app.module.ts: + +```typescript +import { BASE_PATH } from '{{npmName}}'; +import { environment } from '../environments/environment'; + +@NgModule({ + declarations: [ + AppComponent + ], + imports: [ ], + providers: [{ provide: BASE_PATH, useValue: environment.API_BASE_PATH }], + bootstrap: [ AppComponent ] +}) +export class AppModule { } +``` + +### Customizing path parameter encoding + +Without further customization, only [path-parameters][parameter-locations-url] of [style][style-values-url] 'simple' +and Dates for format 'date-time' are encoded correctly. + +Other styles (e.g. "matrix") are not that easy to encode +and thus are best delegated to other libraries (e.g.: [@honoluluhenk/http-param-expander]). + +To implement your own parameter encoding (or call another library), +pass an arrow-function or method-reference to the `encodeParam` property of the Configuration-object +(see [General Usage](#general-usage) above). + +Example value for use in your Configuration-Provider: + +```typescript +new Configuration({ + encodeParam: (param: Param) => myFancyParamEncoder(param), +}) +``` + +[parameter-locations-url]: https://github.com/OAI/OpenAPI-Specification/blob/main/versions/3.1.0.md#parameter-locations +[style-values-url]: https://github.com/OAI/OpenAPI-Specification/blob/main/versions/3.1.0.md#style-values +[@honoluluhenk/http-param-expander]: https://www.npmjs.com/package/@honoluluhenk/http-param-expander diff --git a/modules/openapi-generator/src/main/resources/typescript-angular/index.mustache b/modules/openapi-generator/src/main/resources/typescript-angular/index.mustache index 4db17c2d10c8..b58aade26080 100644 --- a/modules/openapi-generator/src/main/resources/typescript-angular/index.mustache +++ b/modules/openapi-generator/src/main/resources/typescript-angular/index.mustache @@ -5,4 +5,7 @@ export * from './model/models'; export * from './variables'; export * from './configuration'; export * from './api.module'; +{{#ngVersionAtLeast_17}} +export * from './provide-api'; +{{/ngVersionAtLeast_17}} export * from './param'; diff --git a/modules/openapi-generator/src/main/resources/typescript-angular/provide-api.mustache b/modules/openapi-generator/src/main/resources/typescript-angular/provide-api.mustache new file mode 100644 index 000000000000..80882961c4a7 --- /dev/null +++ b/modules/openapi-generator/src/main/resources/typescript-angular/provide-api.mustache @@ -0,0 +1,15 @@ +import { EnvironmentProviders, makeEnvironmentProviders } from "@angular/core"; +import { {{configurationClassName}}, {{configurationParametersInterfaceName}} } from './configuration'; +import { BASE_PATH } from './variables'; + +// Returns the service class providers, to be used in the [ApplicationConfig](https://angular.dev/api/core/ApplicationConfig). +export function provideApi(configOrBasePath: string | {{configurationParametersInterfaceName}}): EnvironmentProviders { + return makeEnvironmentProviders([ + typeof configOrBasePath === "string" + ? { provide: BASE_PATH, useValue: configOrBasePath } + : { + provide: {{configurationClassName}}, + useValue: new {{configurationClassName}}({ ...configOrBasePath }), + }, + ]); +} \ No newline at end of file diff --git a/samples/client/others/typescript-angular/builds/composed-schemas-tagged-unions/.openapi-generator/FILES b/samples/client/others/typescript-angular/builds/composed-schemas-tagged-unions/.openapi-generator/FILES index 7115f7f67a88..e81f08a6e52a 100644 --- a/samples/client/others/typescript-angular/builds/composed-schemas-tagged-unions/.openapi-generator/FILES +++ b/samples/client/others/typescript-angular/builds/composed-schemas-tagged-unions/.openapi-generator/FILES @@ -21,4 +21,5 @@ model/petWithMappedDiscriminator.ts model/petWithSimpleDiscriminator.ts model/petWithoutDiscriminator.ts param.ts +provide-api.ts variables.ts diff --git a/samples/client/others/typescript-angular/builds/composed-schemas-tagged-unions/README.md b/samples/client/others/typescript-angular/builds/composed-schemas-tagged-unions/README.md index 459f049d0d86..c2ba935ae173 100644 --- a/samples/client/others/typescript-angular/builds/composed-schemas-tagged-unions/README.md +++ b/samples/client/others/typescript-angular/builds/composed-schemas-tagged-unions/README.md @@ -58,157 +58,106 @@ Published packages are not effected by this issue. In your Angular project: ```typescript -// without configuring providers -import { ApiModule } from ''; -import { HttpClientModule } from '@angular/common/http'; - -@NgModule({ - imports: [ - ApiModule, - // make sure to import the HttpClientModule in the AppModule only, - // see https://github.com/angular/angular/issues/20575 - HttpClientModule - ], - declarations: [ AppComponent ], - providers: [], - bootstrap: [ AppComponent ] -}) -export class AppModule {} -``` -```typescript -// configuring providers -import { ApiModule, Configuration, ConfigurationParameters } from ''; - -export function apiConfigFactory (): Configuration { - const params: ConfigurationParameters = { - // set configuration parameters here. - } - return new Configuration(params); -} - -@NgModule({ - imports: [ ApiModule.forRoot(apiConfigFactory) ], - declarations: [ AppComponent ], - providers: [], - bootstrap: [ AppComponent ] -}) -export class AppModule {} -``` +import { ApplicationConfig } from '@angular/core'; +import { provideHttpClient } from '@angular/common/http'; +import { provideApi } from ''; -```typescript -// configuring providers with an authentication service that manages your access tokens -import { ApiModule, Configuration } from ''; - -@NgModule({ - imports: [ ApiModule ], - declarations: [ AppComponent ], +export const appConfig: ApplicationConfig = { providers: [ - { - provide: Configuration, - useFactory: (authService: AuthService) => new Configuration( - { - basePath: environment.apiUrl, - accessToken: authService.getAccessToken.bind(authService) - } - ), - deps: [AuthService], - multi: false - } + // ... + provideHttpClient(), + provideApi() ], - bootstrap: [ AppComponent ] -}) -export class AppModule {} +}; ``` +**NOTE** +If you're still using `AppModule` and haven't [migrated](https://angular.dev/reference/migrations/standalone) yet, you can still import an Angular module: ```typescript -import { DefaultApi } from ''; - -export class AppComponent { - constructor(private apiGateway: DefaultApi) { } -} +import { ApiModule } from ''; ``` -Note: The ApiModule is restricted to being instantiated once app wide. -This is to ensure that all services are treated as singletons. - -### Using multiple OpenAPI files / APIs / ApiModules - -In order to use multiple `ApiModules` generated from different OpenAPI files, -you can create an alias name when importing the modules -in order to avoid naming conflicts: +If different from the generated base path, during app bootstrap, you can provide the base path to your service. ```typescript -import { ApiModule } from 'my-api-path'; -import { ApiModule as OtherApiModule } from 'my-other-api-path'; -import { HttpClientModule } from '@angular/common/http'; - -@NgModule({ - imports: [ - ApiModule, - OtherApiModule, - // make sure to import the HttpClientModule in the AppModule only, - // see https://github.com/angular/angular/issues/20575 - HttpClientModule - ] -}) -export class AppModule { +import { ApplicationConfig } from '@angular/core'; +import { provideHttpClient } from '@angular/common/http'; +import { provideApi } from ''; -} +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideHttpClient(), + provideApi('http://localhost:9999') + ], +}; ``` -### Set service base path - -If different than the generated base path, during app bootstrap, you can provide the base path to your service. - ```typescript -import { BASE_PATH } from ''; +// with a custom configuration +import { ApplicationConfig } from '@angular/core'; +import { provideHttpClient } from '@angular/common/http'; +import { provideApi } from ''; -bootstrap(AppComponent, [ - { provide: BASE_PATH, useValue: 'https://your-web-service.com' }, -]); +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideHttpClient(), + provideApi({ + withCredentials: true, + username: 'user', + password: 'password' + }) + ], +}; ``` -or - ```typescript -import { BASE_PATH } from ''; - -@NgModule({ - imports: [], - declarations: [ AppComponent ], - providers: [ provide: BASE_PATH, useValue: 'https://your-web-service.com' ], - bootstrap: [ AppComponent ] -}) -export class AppModule {} -``` - -### Using @angular/cli - -First extend your `src/environments/*.ts` files by adding the corresponding base path: +// with factory building a custom configuration +import { ApplicationConfig } from '@angular/core'; +import { provideHttpClient } from '@angular/common/http'; +import { provideApi, Configuration } from ''; -```typescript -export const environment = { - production: false, - API_BASE_PATH: 'http://127.0.0.1:8080' +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideHttpClient(), + { + provide: Configuration, + useFactory: (authService: AuthService) => new Configuration({ + basePath: 'http://localhost:9999', + withCredentials: true, + username: authService.getUsername(), + password: authService.getPassword(), + }), + deps: [AuthService], + multi: false + } + ], }; ``` -In the src/app/app.module.ts: +### Using multiple OpenAPI files / APIs + +In order to use multiple APIs generated from different OpenAPI files, +you can create an alias name when importing the modules +in order to avoid naming conflicts: ```typescript -import { BASE_PATH } from ''; +import { provideApi as provideUserApi } from 'my-user-api-path'; +import { provideApi as provideAdminApi } from 'my-admin-api-path'; +import { HttpClientModule } from '@angular/common/http'; import { environment } from '../environments/environment'; -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ ], - providers: [{ provide: BASE_PATH, useValue: environment.API_BASE_PATH }], - bootstrap: [ AppComponent ] -}) -export class AppModule { } +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideHttpClient(), + provideUserApi(environment.basePath), + provideAdminApi(environment.basePath), + ], +}; ``` ### Customizing path parameter encoding diff --git a/samples/client/others/typescript-angular/builds/composed-schemas-tagged-unions/index.ts b/samples/client/others/typescript-angular/builds/composed-schemas-tagged-unions/index.ts index 104dd3d21e35..02cb7d437fbf 100644 --- a/samples/client/others/typescript-angular/builds/composed-schemas-tagged-unions/index.ts +++ b/samples/client/others/typescript-angular/builds/composed-schemas-tagged-unions/index.ts @@ -3,4 +3,5 @@ export * from './model/models'; export * from './variables'; export * from './configuration'; export * from './api.module'; +export * from './provide-api'; export * from './param'; diff --git a/samples/client/others/typescript-angular/builds/composed-schemas-tagged-unions/provide-api.ts b/samples/client/others/typescript-angular/builds/composed-schemas-tagged-unions/provide-api.ts new file mode 100644 index 000000000000..19c762acdfe0 --- /dev/null +++ b/samples/client/others/typescript-angular/builds/composed-schemas-tagged-unions/provide-api.ts @@ -0,0 +1,15 @@ +import { EnvironmentProviders, makeEnvironmentProviders } from "@angular/core"; +import { Configuration, ConfigurationParameters } from './configuration'; +import { BASE_PATH } from './variables'; + +// Returns the service class providers, to be used in the [ApplicationConfig](https://angular.dev/api/core/ApplicationConfig). +export function provideApi(configOrBasePath: string | ConfigurationParameters): EnvironmentProviders { + return makeEnvironmentProviders([ + typeof configOrBasePath === "string" + ? { provide: BASE_PATH, useValue: configOrBasePath } + : { + provide: Configuration, + useValue: new Configuration({ ...configOrBasePath }), + }, + ]); +} \ No newline at end of file diff --git a/samples/client/others/typescript-angular/builds/composed-schemas/.openapi-generator/FILES b/samples/client/others/typescript-angular/builds/composed-schemas/.openapi-generator/FILES index 7115f7f67a88..e81f08a6e52a 100644 --- a/samples/client/others/typescript-angular/builds/composed-schemas/.openapi-generator/FILES +++ b/samples/client/others/typescript-angular/builds/composed-schemas/.openapi-generator/FILES @@ -21,4 +21,5 @@ model/petWithMappedDiscriminator.ts model/petWithSimpleDiscriminator.ts model/petWithoutDiscriminator.ts param.ts +provide-api.ts variables.ts diff --git a/samples/client/others/typescript-angular/builds/composed-schemas/README.md b/samples/client/others/typescript-angular/builds/composed-schemas/README.md index 459f049d0d86..c2ba935ae173 100644 --- a/samples/client/others/typescript-angular/builds/composed-schemas/README.md +++ b/samples/client/others/typescript-angular/builds/composed-schemas/README.md @@ -58,157 +58,106 @@ Published packages are not effected by this issue. In your Angular project: ```typescript -// without configuring providers -import { ApiModule } from ''; -import { HttpClientModule } from '@angular/common/http'; - -@NgModule({ - imports: [ - ApiModule, - // make sure to import the HttpClientModule in the AppModule only, - // see https://github.com/angular/angular/issues/20575 - HttpClientModule - ], - declarations: [ AppComponent ], - providers: [], - bootstrap: [ AppComponent ] -}) -export class AppModule {} -``` -```typescript -// configuring providers -import { ApiModule, Configuration, ConfigurationParameters } from ''; - -export function apiConfigFactory (): Configuration { - const params: ConfigurationParameters = { - // set configuration parameters here. - } - return new Configuration(params); -} - -@NgModule({ - imports: [ ApiModule.forRoot(apiConfigFactory) ], - declarations: [ AppComponent ], - providers: [], - bootstrap: [ AppComponent ] -}) -export class AppModule {} -``` +import { ApplicationConfig } from '@angular/core'; +import { provideHttpClient } from '@angular/common/http'; +import { provideApi } from ''; -```typescript -// configuring providers with an authentication service that manages your access tokens -import { ApiModule, Configuration } from ''; - -@NgModule({ - imports: [ ApiModule ], - declarations: [ AppComponent ], +export const appConfig: ApplicationConfig = { providers: [ - { - provide: Configuration, - useFactory: (authService: AuthService) => new Configuration( - { - basePath: environment.apiUrl, - accessToken: authService.getAccessToken.bind(authService) - } - ), - deps: [AuthService], - multi: false - } + // ... + provideHttpClient(), + provideApi() ], - bootstrap: [ AppComponent ] -}) -export class AppModule {} +}; ``` +**NOTE** +If you're still using `AppModule` and haven't [migrated](https://angular.dev/reference/migrations/standalone) yet, you can still import an Angular module: ```typescript -import { DefaultApi } from ''; - -export class AppComponent { - constructor(private apiGateway: DefaultApi) { } -} +import { ApiModule } from ''; ``` -Note: The ApiModule is restricted to being instantiated once app wide. -This is to ensure that all services are treated as singletons. - -### Using multiple OpenAPI files / APIs / ApiModules - -In order to use multiple `ApiModules` generated from different OpenAPI files, -you can create an alias name when importing the modules -in order to avoid naming conflicts: +If different from the generated base path, during app bootstrap, you can provide the base path to your service. ```typescript -import { ApiModule } from 'my-api-path'; -import { ApiModule as OtherApiModule } from 'my-other-api-path'; -import { HttpClientModule } from '@angular/common/http'; - -@NgModule({ - imports: [ - ApiModule, - OtherApiModule, - // make sure to import the HttpClientModule in the AppModule only, - // see https://github.com/angular/angular/issues/20575 - HttpClientModule - ] -}) -export class AppModule { +import { ApplicationConfig } from '@angular/core'; +import { provideHttpClient } from '@angular/common/http'; +import { provideApi } from ''; -} +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideHttpClient(), + provideApi('http://localhost:9999') + ], +}; ``` -### Set service base path - -If different than the generated base path, during app bootstrap, you can provide the base path to your service. - ```typescript -import { BASE_PATH } from ''; +// with a custom configuration +import { ApplicationConfig } from '@angular/core'; +import { provideHttpClient } from '@angular/common/http'; +import { provideApi } from ''; -bootstrap(AppComponent, [ - { provide: BASE_PATH, useValue: 'https://your-web-service.com' }, -]); +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideHttpClient(), + provideApi({ + withCredentials: true, + username: 'user', + password: 'password' + }) + ], +}; ``` -or - ```typescript -import { BASE_PATH } from ''; - -@NgModule({ - imports: [], - declarations: [ AppComponent ], - providers: [ provide: BASE_PATH, useValue: 'https://your-web-service.com' ], - bootstrap: [ AppComponent ] -}) -export class AppModule {} -``` - -### Using @angular/cli - -First extend your `src/environments/*.ts` files by adding the corresponding base path: +// with factory building a custom configuration +import { ApplicationConfig } from '@angular/core'; +import { provideHttpClient } from '@angular/common/http'; +import { provideApi, Configuration } from ''; -```typescript -export const environment = { - production: false, - API_BASE_PATH: 'http://127.0.0.1:8080' +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideHttpClient(), + { + provide: Configuration, + useFactory: (authService: AuthService) => new Configuration({ + basePath: 'http://localhost:9999', + withCredentials: true, + username: authService.getUsername(), + password: authService.getPassword(), + }), + deps: [AuthService], + multi: false + } + ], }; ``` -In the src/app/app.module.ts: +### Using multiple OpenAPI files / APIs + +In order to use multiple APIs generated from different OpenAPI files, +you can create an alias name when importing the modules +in order to avoid naming conflicts: ```typescript -import { BASE_PATH } from ''; +import { provideApi as provideUserApi } from 'my-user-api-path'; +import { provideApi as provideAdminApi } from 'my-admin-api-path'; +import { HttpClientModule } from '@angular/common/http'; import { environment } from '../environments/environment'; -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ ], - providers: [{ provide: BASE_PATH, useValue: environment.API_BASE_PATH }], - bootstrap: [ AppComponent ] -}) -export class AppModule { } +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideHttpClient(), + provideUserApi(environment.basePath), + provideAdminApi(environment.basePath), + ], +}; ``` ### Customizing path parameter encoding diff --git a/samples/client/others/typescript-angular/builds/composed-schemas/index.ts b/samples/client/others/typescript-angular/builds/composed-schemas/index.ts index 104dd3d21e35..02cb7d437fbf 100644 --- a/samples/client/others/typescript-angular/builds/composed-schemas/index.ts +++ b/samples/client/others/typescript-angular/builds/composed-schemas/index.ts @@ -3,4 +3,5 @@ export * from './model/models'; export * from './variables'; export * from './configuration'; export * from './api.module'; +export * from './provide-api'; export * from './param'; diff --git a/samples/client/others/typescript-angular/builds/composed-schemas/provide-api.ts b/samples/client/others/typescript-angular/builds/composed-schemas/provide-api.ts new file mode 100644 index 000000000000..19c762acdfe0 --- /dev/null +++ b/samples/client/others/typescript-angular/builds/composed-schemas/provide-api.ts @@ -0,0 +1,15 @@ +import { EnvironmentProviders, makeEnvironmentProviders } from "@angular/core"; +import { Configuration, ConfigurationParameters } from './configuration'; +import { BASE_PATH } from './variables'; + +// Returns the service class providers, to be used in the [ApplicationConfig](https://angular.dev/api/core/ApplicationConfig). +export function provideApi(configOrBasePath: string | ConfigurationParameters): EnvironmentProviders { + return makeEnvironmentProviders([ + typeof configOrBasePath === "string" + ? { provide: BASE_PATH, useValue: configOrBasePath } + : { + provide: Configuration, + useValue: new Configuration({ ...configOrBasePath }), + }, + ]); +} \ No newline at end of file diff --git a/samples/client/petstore/typescript-angular-v17-provided-in-root/builds/default/.openapi-generator/FILES b/samples/client/petstore/typescript-angular-v17-provided-in-root/builds/default/.openapi-generator/FILES index 6cf79a289c8f..45b94aafea33 100644 --- a/samples/client/petstore/typescript-angular-v17-provided-in-root/builds/default/.openapi-generator/FILES +++ b/samples/client/petstore/typescript-angular-v17-provided-in-root/builds/default/.openapi-generator/FILES @@ -18,4 +18,5 @@ model/pet.ts model/tag.ts model/user.ts param.ts +provide-api.ts variables.ts diff --git a/samples/client/petstore/typescript-angular-v17-provided-in-root/builds/default/README.md b/samples/client/petstore/typescript-angular-v17-provided-in-root/builds/default/README.md index 6653fc45df74..dbc94fd09277 100644 --- a/samples/client/petstore/typescript-angular-v17-provided-in-root/builds/default/README.md +++ b/samples/client/petstore/typescript-angular-v17-provided-in-root/builds/default/README.md @@ -58,157 +58,106 @@ Published packages are not effected by this issue. In your Angular project: ```typescript -// without configuring providers -import { ApiModule } from ''; -import { HttpClientModule } from '@angular/common/http'; - -@NgModule({ - imports: [ - ApiModule, - // make sure to import the HttpClientModule in the AppModule only, - // see https://github.com/angular/angular/issues/20575 - HttpClientModule - ], - declarations: [ AppComponent ], - providers: [], - bootstrap: [ AppComponent ] -}) -export class AppModule {} -``` -```typescript -// configuring providers -import { ApiModule, Configuration, ConfigurationParameters } from ''; - -export function apiConfigFactory (): Configuration { - const params: ConfigurationParameters = { - // set configuration parameters here. - } - return new Configuration(params); -} - -@NgModule({ - imports: [ ApiModule.forRoot(apiConfigFactory) ], - declarations: [ AppComponent ], - providers: [], - bootstrap: [ AppComponent ] -}) -export class AppModule {} -``` +import { ApplicationConfig } from '@angular/core'; +import { provideHttpClient } from '@angular/common/http'; +import { provideApi } from ''; -```typescript -// configuring providers with an authentication service that manages your access tokens -import { ApiModule, Configuration } from ''; - -@NgModule({ - imports: [ ApiModule ], - declarations: [ AppComponent ], +export const appConfig: ApplicationConfig = { providers: [ - { - provide: Configuration, - useFactory: (authService: AuthService) => new Configuration( - { - basePath: environment.apiUrl, - accessToken: authService.getAccessToken.bind(authService) - } - ), - deps: [AuthService], - multi: false - } + // ... + provideHttpClient(), + provideApi() ], - bootstrap: [ AppComponent ] -}) -export class AppModule {} +}; ``` +**NOTE** +If you're still using `AppModule` and haven't [migrated](https://angular.dev/reference/migrations/standalone) yet, you can still import an Angular module: ```typescript -import { DefaultApi } from ''; - -export class AppComponent { - constructor(private apiGateway: DefaultApi) { } -} +import { ApiModule } from ''; ``` -Note: The ApiModule is restricted to being instantiated once app wide. -This is to ensure that all services are treated as singletons. - -### Using multiple OpenAPI files / APIs / ApiModules - -In order to use multiple `ApiModules` generated from different OpenAPI files, -you can create an alias name when importing the modules -in order to avoid naming conflicts: +If different from the generated base path, during app bootstrap, you can provide the base path to your service. ```typescript -import { ApiModule } from 'my-api-path'; -import { ApiModule as OtherApiModule } from 'my-other-api-path'; -import { HttpClientModule } from '@angular/common/http'; - -@NgModule({ - imports: [ - ApiModule, - OtherApiModule, - // make sure to import the HttpClientModule in the AppModule only, - // see https://github.com/angular/angular/issues/20575 - HttpClientModule - ] -}) -export class AppModule { +import { ApplicationConfig } from '@angular/core'; +import { provideHttpClient } from '@angular/common/http'; +import { provideApi } from ''; -} +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideHttpClient(), + provideApi('http://localhost:9999') + ], +}; ``` -### Set service base path - -If different than the generated base path, during app bootstrap, you can provide the base path to your service. - ```typescript -import { BASE_PATH } from ''; +// with a custom configuration +import { ApplicationConfig } from '@angular/core'; +import { provideHttpClient } from '@angular/common/http'; +import { provideApi } from ''; -bootstrap(AppComponent, [ - { provide: BASE_PATH, useValue: 'https://your-web-service.com' }, -]); +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideHttpClient(), + provideApi({ + withCredentials: true, + username: 'user', + password: 'password' + }) + ], +}; ``` -or - ```typescript -import { BASE_PATH } from ''; - -@NgModule({ - imports: [], - declarations: [ AppComponent ], - providers: [ provide: BASE_PATH, useValue: 'https://your-web-service.com' ], - bootstrap: [ AppComponent ] -}) -export class AppModule {} -``` - -### Using @angular/cli - -First extend your `src/environments/*.ts` files by adding the corresponding base path: +// with factory building a custom configuration +import { ApplicationConfig } from '@angular/core'; +import { provideHttpClient } from '@angular/common/http'; +import { provideApi, Configuration } from ''; -```typescript -export const environment = { - production: false, - API_BASE_PATH: 'http://127.0.0.1:8080' +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideHttpClient(), + { + provide: Configuration, + useFactory: (authService: AuthService) => new Configuration({ + basePath: 'http://localhost:9999', + withCredentials: true, + username: authService.getUsername(), + password: authService.getPassword(), + }), + deps: [AuthService], + multi: false + } + ], }; ``` -In the src/app/app.module.ts: +### Using multiple OpenAPI files / APIs + +In order to use multiple APIs generated from different OpenAPI files, +you can create an alias name when importing the modules +in order to avoid naming conflicts: ```typescript -import { BASE_PATH } from ''; +import { provideApi as provideUserApi } from 'my-user-api-path'; +import { provideApi as provideAdminApi } from 'my-admin-api-path'; +import { HttpClientModule } from '@angular/common/http'; import { environment } from '../environments/environment'; -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ ], - providers: [{ provide: BASE_PATH, useValue: environment.API_BASE_PATH }], - bootstrap: [ AppComponent ] -}) -export class AppModule { } +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideHttpClient(), + provideUserApi(environment.basePath), + provideAdminApi(environment.basePath), + ], +}; ``` ### Customizing path parameter encoding diff --git a/samples/client/petstore/typescript-angular-v17-provided-in-root/builds/default/index.ts b/samples/client/petstore/typescript-angular-v17-provided-in-root/builds/default/index.ts index 104dd3d21e35..02cb7d437fbf 100644 --- a/samples/client/petstore/typescript-angular-v17-provided-in-root/builds/default/index.ts +++ b/samples/client/petstore/typescript-angular-v17-provided-in-root/builds/default/index.ts @@ -3,4 +3,5 @@ export * from './model/models'; export * from './variables'; export * from './configuration'; export * from './api.module'; +export * from './provide-api'; export * from './param'; diff --git a/samples/client/petstore/typescript-angular-v17-provided-in-root/builds/default/provide-api.ts b/samples/client/petstore/typescript-angular-v17-provided-in-root/builds/default/provide-api.ts new file mode 100644 index 000000000000..19c762acdfe0 --- /dev/null +++ b/samples/client/petstore/typescript-angular-v17-provided-in-root/builds/default/provide-api.ts @@ -0,0 +1,15 @@ +import { EnvironmentProviders, makeEnvironmentProviders } from "@angular/core"; +import { Configuration, ConfigurationParameters } from './configuration'; +import { BASE_PATH } from './variables'; + +// Returns the service class providers, to be used in the [ApplicationConfig](https://angular.dev/api/core/ApplicationConfig). +export function provideApi(configOrBasePath: string | ConfigurationParameters): EnvironmentProviders { + return makeEnvironmentProviders([ + typeof configOrBasePath === "string" + ? { provide: BASE_PATH, useValue: configOrBasePath } + : { + provide: Configuration, + useValue: new Configuration({ ...configOrBasePath }), + }, + ]); +} \ No newline at end of file diff --git a/samples/client/petstore/typescript-angular-v18-provided-in-root/builds/default/.openapi-generator/FILES b/samples/client/petstore/typescript-angular-v18-provided-in-root/builds/default/.openapi-generator/FILES index 6cf79a289c8f..45b94aafea33 100644 --- a/samples/client/petstore/typescript-angular-v18-provided-in-root/builds/default/.openapi-generator/FILES +++ b/samples/client/petstore/typescript-angular-v18-provided-in-root/builds/default/.openapi-generator/FILES @@ -18,4 +18,5 @@ model/pet.ts model/tag.ts model/user.ts param.ts +provide-api.ts variables.ts diff --git a/samples/client/petstore/typescript-angular-v18-provided-in-root/builds/default/README.md b/samples/client/petstore/typescript-angular-v18-provided-in-root/builds/default/README.md index 6653fc45df74..dbc94fd09277 100644 --- a/samples/client/petstore/typescript-angular-v18-provided-in-root/builds/default/README.md +++ b/samples/client/petstore/typescript-angular-v18-provided-in-root/builds/default/README.md @@ -58,157 +58,106 @@ Published packages are not effected by this issue. In your Angular project: ```typescript -// without configuring providers -import { ApiModule } from ''; -import { HttpClientModule } from '@angular/common/http'; - -@NgModule({ - imports: [ - ApiModule, - // make sure to import the HttpClientModule in the AppModule only, - // see https://github.com/angular/angular/issues/20575 - HttpClientModule - ], - declarations: [ AppComponent ], - providers: [], - bootstrap: [ AppComponent ] -}) -export class AppModule {} -``` -```typescript -// configuring providers -import { ApiModule, Configuration, ConfigurationParameters } from ''; - -export function apiConfigFactory (): Configuration { - const params: ConfigurationParameters = { - // set configuration parameters here. - } - return new Configuration(params); -} - -@NgModule({ - imports: [ ApiModule.forRoot(apiConfigFactory) ], - declarations: [ AppComponent ], - providers: [], - bootstrap: [ AppComponent ] -}) -export class AppModule {} -``` +import { ApplicationConfig } from '@angular/core'; +import { provideHttpClient } from '@angular/common/http'; +import { provideApi } from ''; -```typescript -// configuring providers with an authentication service that manages your access tokens -import { ApiModule, Configuration } from ''; - -@NgModule({ - imports: [ ApiModule ], - declarations: [ AppComponent ], +export const appConfig: ApplicationConfig = { providers: [ - { - provide: Configuration, - useFactory: (authService: AuthService) => new Configuration( - { - basePath: environment.apiUrl, - accessToken: authService.getAccessToken.bind(authService) - } - ), - deps: [AuthService], - multi: false - } + // ... + provideHttpClient(), + provideApi() ], - bootstrap: [ AppComponent ] -}) -export class AppModule {} +}; ``` +**NOTE** +If you're still using `AppModule` and haven't [migrated](https://angular.dev/reference/migrations/standalone) yet, you can still import an Angular module: ```typescript -import { DefaultApi } from ''; - -export class AppComponent { - constructor(private apiGateway: DefaultApi) { } -} +import { ApiModule } from ''; ``` -Note: The ApiModule is restricted to being instantiated once app wide. -This is to ensure that all services are treated as singletons. - -### Using multiple OpenAPI files / APIs / ApiModules - -In order to use multiple `ApiModules` generated from different OpenAPI files, -you can create an alias name when importing the modules -in order to avoid naming conflicts: +If different from the generated base path, during app bootstrap, you can provide the base path to your service. ```typescript -import { ApiModule } from 'my-api-path'; -import { ApiModule as OtherApiModule } from 'my-other-api-path'; -import { HttpClientModule } from '@angular/common/http'; - -@NgModule({ - imports: [ - ApiModule, - OtherApiModule, - // make sure to import the HttpClientModule in the AppModule only, - // see https://github.com/angular/angular/issues/20575 - HttpClientModule - ] -}) -export class AppModule { +import { ApplicationConfig } from '@angular/core'; +import { provideHttpClient } from '@angular/common/http'; +import { provideApi } from ''; -} +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideHttpClient(), + provideApi('http://localhost:9999') + ], +}; ``` -### Set service base path - -If different than the generated base path, during app bootstrap, you can provide the base path to your service. - ```typescript -import { BASE_PATH } from ''; +// with a custom configuration +import { ApplicationConfig } from '@angular/core'; +import { provideHttpClient } from '@angular/common/http'; +import { provideApi } from ''; -bootstrap(AppComponent, [ - { provide: BASE_PATH, useValue: 'https://your-web-service.com' }, -]); +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideHttpClient(), + provideApi({ + withCredentials: true, + username: 'user', + password: 'password' + }) + ], +}; ``` -or - ```typescript -import { BASE_PATH } from ''; - -@NgModule({ - imports: [], - declarations: [ AppComponent ], - providers: [ provide: BASE_PATH, useValue: 'https://your-web-service.com' ], - bootstrap: [ AppComponent ] -}) -export class AppModule {} -``` - -### Using @angular/cli - -First extend your `src/environments/*.ts` files by adding the corresponding base path: +// with factory building a custom configuration +import { ApplicationConfig } from '@angular/core'; +import { provideHttpClient } from '@angular/common/http'; +import { provideApi, Configuration } from ''; -```typescript -export const environment = { - production: false, - API_BASE_PATH: 'http://127.0.0.1:8080' +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideHttpClient(), + { + provide: Configuration, + useFactory: (authService: AuthService) => new Configuration({ + basePath: 'http://localhost:9999', + withCredentials: true, + username: authService.getUsername(), + password: authService.getPassword(), + }), + deps: [AuthService], + multi: false + } + ], }; ``` -In the src/app/app.module.ts: +### Using multiple OpenAPI files / APIs + +In order to use multiple APIs generated from different OpenAPI files, +you can create an alias name when importing the modules +in order to avoid naming conflicts: ```typescript -import { BASE_PATH } from ''; +import { provideApi as provideUserApi } from 'my-user-api-path'; +import { provideApi as provideAdminApi } from 'my-admin-api-path'; +import { HttpClientModule } from '@angular/common/http'; import { environment } from '../environments/environment'; -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ ], - providers: [{ provide: BASE_PATH, useValue: environment.API_BASE_PATH }], - bootstrap: [ AppComponent ] -}) -export class AppModule { } +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideHttpClient(), + provideUserApi(environment.basePath), + provideAdminApi(environment.basePath), + ], +}; ``` ### Customizing path parameter encoding diff --git a/samples/client/petstore/typescript-angular-v18-provided-in-root/builds/default/index.ts b/samples/client/petstore/typescript-angular-v18-provided-in-root/builds/default/index.ts index 104dd3d21e35..02cb7d437fbf 100644 --- a/samples/client/petstore/typescript-angular-v18-provided-in-root/builds/default/index.ts +++ b/samples/client/petstore/typescript-angular-v18-provided-in-root/builds/default/index.ts @@ -3,4 +3,5 @@ export * from './model/models'; export * from './variables'; export * from './configuration'; export * from './api.module'; +export * from './provide-api'; export * from './param'; diff --git a/samples/client/petstore/typescript-angular-v18-provided-in-root/builds/default/provide-api.ts b/samples/client/petstore/typescript-angular-v18-provided-in-root/builds/default/provide-api.ts new file mode 100644 index 000000000000..19c762acdfe0 --- /dev/null +++ b/samples/client/petstore/typescript-angular-v18-provided-in-root/builds/default/provide-api.ts @@ -0,0 +1,15 @@ +import { EnvironmentProviders, makeEnvironmentProviders } from "@angular/core"; +import { Configuration, ConfigurationParameters } from './configuration'; +import { BASE_PATH } from './variables'; + +// Returns the service class providers, to be used in the [ApplicationConfig](https://angular.dev/api/core/ApplicationConfig). +export function provideApi(configOrBasePath: string | ConfigurationParameters): EnvironmentProviders { + return makeEnvironmentProviders([ + typeof configOrBasePath === "string" + ? { provide: BASE_PATH, useValue: configOrBasePath } + : { + provide: Configuration, + useValue: new Configuration({ ...configOrBasePath }), + }, + ]); +} \ No newline at end of file diff --git a/samples/client/petstore/typescript-angular-v19-with-angular-dependency-params/builds/default/.openapi-generator/FILES b/samples/client/petstore/typescript-angular-v19-with-angular-dependency-params/builds/default/.openapi-generator/FILES index d1d45deee73f..28bd61f23d5c 100644 --- a/samples/client/petstore/typescript-angular-v19-with-angular-dependency-params/builds/default/.openapi-generator/FILES +++ b/samples/client/petstore/typescript-angular-v19-with-angular-dependency-params/builds/default/.openapi-generator/FILES @@ -20,5 +20,6 @@ model/user.ts ng-package.json package.json param.ts +provide-api.ts tsconfig.json variables.ts diff --git a/samples/client/petstore/typescript-angular-v19-with-angular-dependency-params/builds/default/README.md b/samples/client/petstore/typescript-angular-v19-with-angular-dependency-params/builds/default/README.md index 67f609707e30..92fc8cb8eba8 100644 --- a/samples/client/petstore/typescript-angular-v19-with-angular-dependency-params/builds/default/README.md +++ b/samples/client/petstore/typescript-angular-v19-with-angular-dependency-params/builds/default/README.md @@ -58,157 +58,106 @@ Published packages are not effected by this issue. In your Angular project: ```typescript -// without configuring providers -import { ApiModule } from 'sample-angular-19-0-0-with-angular-dependency-params'; -import { HttpClientModule } from '@angular/common/http'; - -@NgModule({ - imports: [ - ApiModule, - // make sure to import the HttpClientModule in the AppModule only, - // see https://github.com/angular/angular/issues/20575 - HttpClientModule - ], - declarations: [ AppComponent ], - providers: [], - bootstrap: [ AppComponent ] -}) -export class AppModule {} -``` -```typescript -// configuring providers -import { ApiModule, Configuration, ConfigurationParameters } from 'sample-angular-19-0-0-with-angular-dependency-params'; - -export function apiConfigFactory (): Configuration { - const params: ConfigurationParameters = { - // set configuration parameters here. - } - return new Configuration(params); -} - -@NgModule({ - imports: [ ApiModule.forRoot(apiConfigFactory) ], - declarations: [ AppComponent ], - providers: [], - bootstrap: [ AppComponent ] -}) -export class AppModule {} -``` +import { ApplicationConfig } from '@angular/core'; +import { provideHttpClient } from '@angular/common/http'; +import { provideApi } from 'sample-angular-19-0-0-with-angular-dependency-params'; -```typescript -// configuring providers with an authentication service that manages your access tokens -import { ApiModule, Configuration } from 'sample-angular-19-0-0-with-angular-dependency-params'; - -@NgModule({ - imports: [ ApiModule ], - declarations: [ AppComponent ], +export const appConfig: ApplicationConfig = { providers: [ - { - provide: Configuration, - useFactory: (authService: AuthService) => new Configuration( - { - basePath: environment.apiUrl, - accessToken: authService.getAccessToken.bind(authService) - } - ), - deps: [AuthService], - multi: false - } + // ... + provideHttpClient(), + provideApi() ], - bootstrap: [ AppComponent ] -}) -export class AppModule {} +}; ``` +**NOTE** +If you're still using `AppModule` and haven't [migrated](https://angular.dev/reference/migrations/standalone) yet, you can still import an Angular module: ```typescript -import { DefaultApi } from 'sample-angular-19-0-0-with-angular-dependency-params'; - -export class AppComponent { - constructor(private apiGateway: DefaultApi) { } -} +import { ApiModule } from 'sample-angular-19-0-0-with-angular-dependency-params'; ``` -Note: The ApiModule is restricted to being instantiated once app wide. -This is to ensure that all services are treated as singletons. - -### Using multiple OpenAPI files / APIs / ApiModules - -In order to use multiple `ApiModules` generated from different OpenAPI files, -you can create an alias name when importing the modules -in order to avoid naming conflicts: +If different from the generated base path, during app bootstrap, you can provide the base path to your service. ```typescript -import { ApiModule } from 'my-api-path'; -import { ApiModule as OtherApiModule } from 'my-other-api-path'; -import { HttpClientModule } from '@angular/common/http'; - -@NgModule({ - imports: [ - ApiModule, - OtherApiModule, - // make sure to import the HttpClientModule in the AppModule only, - // see https://github.com/angular/angular/issues/20575 - HttpClientModule - ] -}) -export class AppModule { +import { ApplicationConfig } from '@angular/core'; +import { provideHttpClient } from '@angular/common/http'; +import { provideApi } from 'sample-angular-19-0-0-with-angular-dependency-params'; -} +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideHttpClient(), + provideApi('http://localhost:9999') + ], +}; ``` -### Set service base path - -If different than the generated base path, during app bootstrap, you can provide the base path to your service. - ```typescript -import { BASE_PATH } from 'sample-angular-19-0-0-with-angular-dependency-params'; +// with a custom configuration +import { ApplicationConfig } from '@angular/core'; +import { provideHttpClient } from '@angular/common/http'; +import { provideApi } from 'sample-angular-19-0-0-with-angular-dependency-params'; -bootstrap(AppComponent, [ - { provide: BASE_PATH, useValue: 'https://your-web-service.com' }, -]); +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideHttpClient(), + provideApi({ + withCredentials: true, + username: 'user', + password: 'password' + }) + ], +}; ``` -or - ```typescript -import { BASE_PATH } from 'sample-angular-19-0-0-with-angular-dependency-params'; - -@NgModule({ - imports: [], - declarations: [ AppComponent ], - providers: [ provide: BASE_PATH, useValue: 'https://your-web-service.com' ], - bootstrap: [ AppComponent ] -}) -export class AppModule {} -``` - -### Using @angular/cli - -First extend your `src/environments/*.ts` files by adding the corresponding base path: +// with factory building a custom configuration +import { ApplicationConfig } from '@angular/core'; +import { provideHttpClient } from '@angular/common/http'; +import { provideApi, Configuration } from 'sample-angular-19-0-0-with-angular-dependency-params'; -```typescript -export const environment = { - production: false, - API_BASE_PATH: 'http://127.0.0.1:8080' +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideHttpClient(), + { + provide: Configuration, + useFactory: (authService: AuthService) => new Configuration({ + basePath: 'http://localhost:9999', + withCredentials: true, + username: authService.getUsername(), + password: authService.getPassword(), + }), + deps: [AuthService], + multi: false + } + ], }; ``` -In the src/app/app.module.ts: +### Using multiple OpenAPI files / APIs + +In order to use multiple APIs generated from different OpenAPI files, +you can create an alias name when importing the modules +in order to avoid naming conflicts: ```typescript -import { BASE_PATH } from 'sample-angular-19-0-0-with-angular-dependency-params'; +import { provideApi as provideUserApi } from 'my-user-api-path'; +import { provideApi as provideAdminApi } from 'my-admin-api-path'; +import { HttpClientModule } from '@angular/common/http'; import { environment } from '../environments/environment'; -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ ], - providers: [{ provide: BASE_PATH, useValue: environment.API_BASE_PATH }], - bootstrap: [ AppComponent ] -}) -export class AppModule { } +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideHttpClient(), + provideUserApi(environment.basePath), + provideAdminApi(environment.basePath), + ], +}; ``` ### Customizing path parameter encoding diff --git a/samples/client/petstore/typescript-angular-v19-with-angular-dependency-params/builds/default/index.ts b/samples/client/petstore/typescript-angular-v19-with-angular-dependency-params/builds/default/index.ts index 104dd3d21e35..02cb7d437fbf 100644 --- a/samples/client/petstore/typescript-angular-v19-with-angular-dependency-params/builds/default/index.ts +++ b/samples/client/petstore/typescript-angular-v19-with-angular-dependency-params/builds/default/index.ts @@ -3,4 +3,5 @@ export * from './model/models'; export * from './variables'; export * from './configuration'; export * from './api.module'; +export * from './provide-api'; export * from './param'; diff --git a/samples/client/petstore/typescript-angular-v19-with-angular-dependency-params/builds/default/provide-api.ts b/samples/client/petstore/typescript-angular-v19-with-angular-dependency-params/builds/default/provide-api.ts new file mode 100644 index 000000000000..19c762acdfe0 --- /dev/null +++ b/samples/client/petstore/typescript-angular-v19-with-angular-dependency-params/builds/default/provide-api.ts @@ -0,0 +1,15 @@ +import { EnvironmentProviders, makeEnvironmentProviders } from "@angular/core"; +import { Configuration, ConfigurationParameters } from './configuration'; +import { BASE_PATH } from './variables'; + +// Returns the service class providers, to be used in the [ApplicationConfig](https://angular.dev/api/core/ApplicationConfig). +export function provideApi(configOrBasePath: string | ConfigurationParameters): EnvironmentProviders { + return makeEnvironmentProviders([ + typeof configOrBasePath === "string" + ? { provide: BASE_PATH, useValue: configOrBasePath } + : { + provide: Configuration, + useValue: new Configuration({ ...configOrBasePath }), + }, + ]); +} \ No newline at end of file diff --git a/samples/client/petstore/typescript-angular-v19/builds/deep-object/.openapi-generator/FILES b/samples/client/petstore/typescript-angular-v19/builds/deep-object/.openapi-generator/FILES index ccf56e44302e..3bb6b9437e52 100644 --- a/samples/client/petstore/typescript-angular-v19/builds/deep-object/.openapi-generator/FILES +++ b/samples/client/petstore/typescript-angular-v19/builds/deep-object/.openapi-generator/FILES @@ -14,5 +14,6 @@ model/models.ts ng-package.json package.json param.ts +provide-api.ts tsconfig.json variables.ts diff --git a/samples/client/petstore/typescript-angular-v19/builds/deep-object/README.md b/samples/client/petstore/typescript-angular-v19/builds/deep-object/README.md index 6ba9dab015b8..80c671b7b7b6 100644 --- a/samples/client/petstore/typescript-angular-v19/builds/deep-object/README.md +++ b/samples/client/petstore/typescript-angular-v19/builds/deep-object/README.md @@ -58,157 +58,106 @@ Published packages are not effected by this issue. In your Angular project: ```typescript -// without configuring providers -import { ApiModule } from 'sample-angular-19-0-0-deep-object'; -import { HttpClientModule } from '@angular/common/http'; - -@NgModule({ - imports: [ - ApiModule, - // make sure to import the HttpClientModule in the AppModule only, - // see https://github.com/angular/angular/issues/20575 - HttpClientModule - ], - declarations: [ AppComponent ], - providers: [], - bootstrap: [ AppComponent ] -}) -export class AppModule {} -``` -```typescript -// configuring providers -import { ApiModule, Configuration, ConfigurationParameters } from 'sample-angular-19-0-0-deep-object'; - -export function apiConfigFactory (): Configuration { - const params: ConfigurationParameters = { - // set configuration parameters here. - } - return new Configuration(params); -} - -@NgModule({ - imports: [ ApiModule.forRoot(apiConfigFactory) ], - declarations: [ AppComponent ], - providers: [], - bootstrap: [ AppComponent ] -}) -export class AppModule {} -``` +import { ApplicationConfig } from '@angular/core'; +import { provideHttpClient } from '@angular/common/http'; +import { provideApi } from 'sample-angular-19-0-0-deep-object'; -```typescript -// configuring providers with an authentication service that manages your access tokens -import { ApiModule, Configuration } from 'sample-angular-19-0-0-deep-object'; - -@NgModule({ - imports: [ ApiModule ], - declarations: [ AppComponent ], +export const appConfig: ApplicationConfig = { providers: [ - { - provide: Configuration, - useFactory: (authService: AuthService) => new Configuration( - { - basePath: environment.apiUrl, - accessToken: authService.getAccessToken.bind(authService) - } - ), - deps: [AuthService], - multi: false - } + // ... + provideHttpClient(), + provideApi() ], - bootstrap: [ AppComponent ] -}) -export class AppModule {} +}; ``` +**NOTE** +If you're still using `AppModule` and haven't [migrated](https://angular.dev/reference/migrations/standalone) yet, you can still import an Angular module: ```typescript -import { DefaultApi } from 'sample-angular-19-0-0-deep-object'; - -export class AppComponent { - constructor(private apiGateway: DefaultApi) { } -} +import { ApiModule } from 'sample-angular-19-0-0-deep-object'; ``` -Note: The ApiModule is restricted to being instantiated once app wide. -This is to ensure that all services are treated as singletons. - -### Using multiple OpenAPI files / APIs / ApiModules - -In order to use multiple `ApiModules` generated from different OpenAPI files, -you can create an alias name when importing the modules -in order to avoid naming conflicts: +If different from the generated base path, during app bootstrap, you can provide the base path to your service. ```typescript -import { ApiModule } from 'my-api-path'; -import { ApiModule as OtherApiModule } from 'my-other-api-path'; -import { HttpClientModule } from '@angular/common/http'; - -@NgModule({ - imports: [ - ApiModule, - OtherApiModule, - // make sure to import the HttpClientModule in the AppModule only, - // see https://github.com/angular/angular/issues/20575 - HttpClientModule - ] -}) -export class AppModule { +import { ApplicationConfig } from '@angular/core'; +import { provideHttpClient } from '@angular/common/http'; +import { provideApi } from 'sample-angular-19-0-0-deep-object'; -} +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideHttpClient(), + provideApi('http://localhost:9999') + ], +}; ``` -### Set service base path - -If different than the generated base path, during app bootstrap, you can provide the base path to your service. - ```typescript -import { BASE_PATH } from 'sample-angular-19-0-0-deep-object'; +// with a custom configuration +import { ApplicationConfig } from '@angular/core'; +import { provideHttpClient } from '@angular/common/http'; +import { provideApi } from 'sample-angular-19-0-0-deep-object'; -bootstrap(AppComponent, [ - { provide: BASE_PATH, useValue: 'https://your-web-service.com' }, -]); +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideHttpClient(), + provideApi({ + withCredentials: true, + username: 'user', + password: 'password' + }) + ], +}; ``` -or - ```typescript -import { BASE_PATH } from 'sample-angular-19-0-0-deep-object'; - -@NgModule({ - imports: [], - declarations: [ AppComponent ], - providers: [ provide: BASE_PATH, useValue: 'https://your-web-service.com' ], - bootstrap: [ AppComponent ] -}) -export class AppModule {} -``` - -### Using @angular/cli - -First extend your `src/environments/*.ts` files by adding the corresponding base path: +// with factory building a custom configuration +import { ApplicationConfig } from '@angular/core'; +import { provideHttpClient } from '@angular/common/http'; +import { provideApi, Configuration } from 'sample-angular-19-0-0-deep-object'; -```typescript -export const environment = { - production: false, - API_BASE_PATH: 'http://127.0.0.1:8080' +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideHttpClient(), + { + provide: Configuration, + useFactory: (authService: AuthService) => new Configuration({ + basePath: 'http://localhost:9999', + withCredentials: true, + username: authService.getUsername(), + password: authService.getPassword(), + }), + deps: [AuthService], + multi: false + } + ], }; ``` -In the src/app/app.module.ts: +### Using multiple OpenAPI files / APIs + +In order to use multiple APIs generated from different OpenAPI files, +you can create an alias name when importing the modules +in order to avoid naming conflicts: ```typescript -import { BASE_PATH } from 'sample-angular-19-0-0-deep-object'; +import { provideApi as provideUserApi } from 'my-user-api-path'; +import { provideApi as provideAdminApi } from 'my-admin-api-path'; +import { HttpClientModule } from '@angular/common/http'; import { environment } from '../environments/environment'; -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ ], - providers: [{ provide: BASE_PATH, useValue: environment.API_BASE_PATH }], - bootstrap: [ AppComponent ] -}) -export class AppModule { } +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideHttpClient(), + provideUserApi(environment.basePath), + provideAdminApi(environment.basePath), + ], +}; ``` ### Customizing path parameter encoding diff --git a/samples/client/petstore/typescript-angular-v19/builds/deep-object/index.ts b/samples/client/petstore/typescript-angular-v19/builds/deep-object/index.ts index 104dd3d21e35..02cb7d437fbf 100644 --- a/samples/client/petstore/typescript-angular-v19/builds/deep-object/index.ts +++ b/samples/client/petstore/typescript-angular-v19/builds/deep-object/index.ts @@ -3,4 +3,5 @@ export * from './model/models'; export * from './variables'; export * from './configuration'; export * from './api.module'; +export * from './provide-api'; export * from './param'; diff --git a/samples/client/petstore/typescript-angular-v19/builds/deep-object/provide-api.ts b/samples/client/petstore/typescript-angular-v19/builds/deep-object/provide-api.ts new file mode 100644 index 000000000000..19c762acdfe0 --- /dev/null +++ b/samples/client/petstore/typescript-angular-v19/builds/deep-object/provide-api.ts @@ -0,0 +1,15 @@ +import { EnvironmentProviders, makeEnvironmentProviders } from "@angular/core"; +import { Configuration, ConfigurationParameters } from './configuration'; +import { BASE_PATH } from './variables'; + +// Returns the service class providers, to be used in the [ApplicationConfig](https://angular.dev/api/core/ApplicationConfig). +export function provideApi(configOrBasePath: string | ConfigurationParameters): EnvironmentProviders { + return makeEnvironmentProviders([ + typeof configOrBasePath === "string" + ? { provide: BASE_PATH, useValue: configOrBasePath } + : { + provide: Configuration, + useValue: new Configuration({ ...configOrBasePath }), + }, + ]); +} \ No newline at end of file diff --git a/samples/client/petstore/typescript-angular-v19/builds/default/.openapi-generator/FILES b/samples/client/petstore/typescript-angular-v19/builds/default/.openapi-generator/FILES index d1d45deee73f..28bd61f23d5c 100644 --- a/samples/client/petstore/typescript-angular-v19/builds/default/.openapi-generator/FILES +++ b/samples/client/petstore/typescript-angular-v19/builds/default/.openapi-generator/FILES @@ -20,5 +20,6 @@ model/user.ts ng-package.json package.json param.ts +provide-api.ts tsconfig.json variables.ts diff --git a/samples/client/petstore/typescript-angular-v19/builds/default/README.md b/samples/client/petstore/typescript-angular-v19/builds/default/README.md index 5a836f509281..2aedaf8b75cf 100644 --- a/samples/client/petstore/typescript-angular-v19/builds/default/README.md +++ b/samples/client/petstore/typescript-angular-v19/builds/default/README.md @@ -58,157 +58,106 @@ Published packages are not effected by this issue. In your Angular project: ```typescript -// without configuring providers -import { ApiModule } from 'sample-angular-19-0-0'; -import { HttpClientModule } from '@angular/common/http'; - -@NgModule({ - imports: [ - ApiModule, - // make sure to import the HttpClientModule in the AppModule only, - // see https://github.com/angular/angular/issues/20575 - HttpClientModule - ], - declarations: [ AppComponent ], - providers: [], - bootstrap: [ AppComponent ] -}) -export class AppModule {} -``` -```typescript -// configuring providers -import { ApiModule, Configuration, ConfigurationParameters } from 'sample-angular-19-0-0'; - -export function apiConfigFactory (): Configuration { - const params: ConfigurationParameters = { - // set configuration parameters here. - } - return new Configuration(params); -} - -@NgModule({ - imports: [ ApiModule.forRoot(apiConfigFactory) ], - declarations: [ AppComponent ], - providers: [], - bootstrap: [ AppComponent ] -}) -export class AppModule {} -``` +import { ApplicationConfig } from '@angular/core'; +import { provideHttpClient } from '@angular/common/http'; +import { provideApi } from 'sample-angular-19-0-0'; -```typescript -// configuring providers with an authentication service that manages your access tokens -import { ApiModule, Configuration } from 'sample-angular-19-0-0'; - -@NgModule({ - imports: [ ApiModule ], - declarations: [ AppComponent ], +export const appConfig: ApplicationConfig = { providers: [ - { - provide: Configuration, - useFactory: (authService: AuthService) => new Configuration( - { - basePath: environment.apiUrl, - accessToken: authService.getAccessToken.bind(authService) - } - ), - deps: [AuthService], - multi: false - } + // ... + provideHttpClient(), + provideApi() ], - bootstrap: [ AppComponent ] -}) -export class AppModule {} +}; ``` +**NOTE** +If you're still using `AppModule` and haven't [migrated](https://angular.dev/reference/migrations/standalone) yet, you can still import an Angular module: ```typescript -import { DefaultApi } from 'sample-angular-19-0-0'; - -export class AppComponent { - constructor(private apiGateway: DefaultApi) { } -} +import { ApiModule } from 'sample-angular-19-0-0'; ``` -Note: The ApiModule is restricted to being instantiated once app wide. -This is to ensure that all services are treated as singletons. - -### Using multiple OpenAPI files / APIs / ApiModules - -In order to use multiple `ApiModules` generated from different OpenAPI files, -you can create an alias name when importing the modules -in order to avoid naming conflicts: +If different from the generated base path, during app bootstrap, you can provide the base path to your service. ```typescript -import { ApiModule } from 'my-api-path'; -import { ApiModule as OtherApiModule } from 'my-other-api-path'; -import { HttpClientModule } from '@angular/common/http'; - -@NgModule({ - imports: [ - ApiModule, - OtherApiModule, - // make sure to import the HttpClientModule in the AppModule only, - // see https://github.com/angular/angular/issues/20575 - HttpClientModule - ] -}) -export class AppModule { +import { ApplicationConfig } from '@angular/core'; +import { provideHttpClient } from '@angular/common/http'; +import { provideApi } from 'sample-angular-19-0-0'; -} +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideHttpClient(), + provideApi('http://localhost:9999') + ], +}; ``` -### Set service base path - -If different than the generated base path, during app bootstrap, you can provide the base path to your service. - ```typescript -import { BASE_PATH } from 'sample-angular-19-0-0'; +// with a custom configuration +import { ApplicationConfig } from '@angular/core'; +import { provideHttpClient } from '@angular/common/http'; +import { provideApi } from 'sample-angular-19-0-0'; -bootstrap(AppComponent, [ - { provide: BASE_PATH, useValue: 'https://your-web-service.com' }, -]); +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideHttpClient(), + provideApi({ + withCredentials: true, + username: 'user', + password: 'password' + }) + ], +}; ``` -or - ```typescript -import { BASE_PATH } from 'sample-angular-19-0-0'; - -@NgModule({ - imports: [], - declarations: [ AppComponent ], - providers: [ provide: BASE_PATH, useValue: 'https://your-web-service.com' ], - bootstrap: [ AppComponent ] -}) -export class AppModule {} -``` - -### Using @angular/cli - -First extend your `src/environments/*.ts` files by adding the corresponding base path: +// with factory building a custom configuration +import { ApplicationConfig } from '@angular/core'; +import { provideHttpClient } from '@angular/common/http'; +import { provideApi, Configuration } from 'sample-angular-19-0-0'; -```typescript -export const environment = { - production: false, - API_BASE_PATH: 'http://127.0.0.1:8080' +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideHttpClient(), + { + provide: Configuration, + useFactory: (authService: AuthService) => new Configuration({ + basePath: 'http://localhost:9999', + withCredentials: true, + username: authService.getUsername(), + password: authService.getPassword(), + }), + deps: [AuthService], + multi: false + } + ], }; ``` -In the src/app/app.module.ts: +### Using multiple OpenAPI files / APIs + +In order to use multiple APIs generated from different OpenAPI files, +you can create an alias name when importing the modules +in order to avoid naming conflicts: ```typescript -import { BASE_PATH } from 'sample-angular-19-0-0'; +import { provideApi as provideUserApi } from 'my-user-api-path'; +import { provideApi as provideAdminApi } from 'my-admin-api-path'; +import { HttpClientModule } from '@angular/common/http'; import { environment } from '../environments/environment'; -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ ], - providers: [{ provide: BASE_PATH, useValue: environment.API_BASE_PATH }], - bootstrap: [ AppComponent ] -}) -export class AppModule { } +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideHttpClient(), + provideUserApi(environment.basePath), + provideAdminApi(environment.basePath), + ], +}; ``` ### Customizing path parameter encoding diff --git a/samples/client/petstore/typescript-angular-v19/builds/default/index.ts b/samples/client/petstore/typescript-angular-v19/builds/default/index.ts index 104dd3d21e35..02cb7d437fbf 100644 --- a/samples/client/petstore/typescript-angular-v19/builds/default/index.ts +++ b/samples/client/petstore/typescript-angular-v19/builds/default/index.ts @@ -3,4 +3,5 @@ export * from './model/models'; export * from './variables'; export * from './configuration'; export * from './api.module'; +export * from './provide-api'; export * from './param'; diff --git a/samples/client/petstore/typescript-angular-v19/builds/default/provide-api.ts b/samples/client/petstore/typescript-angular-v19/builds/default/provide-api.ts new file mode 100644 index 000000000000..19c762acdfe0 --- /dev/null +++ b/samples/client/petstore/typescript-angular-v19/builds/default/provide-api.ts @@ -0,0 +1,15 @@ +import { EnvironmentProviders, makeEnvironmentProviders } from "@angular/core"; +import { Configuration, ConfigurationParameters } from './configuration'; +import { BASE_PATH } from './variables'; + +// Returns the service class providers, to be used in the [ApplicationConfig](https://angular.dev/api/core/ApplicationConfig). +export function provideApi(configOrBasePath: string | ConfigurationParameters): EnvironmentProviders { + return makeEnvironmentProviders([ + typeof configOrBasePath === "string" + ? { provide: BASE_PATH, useValue: configOrBasePath } + : { + provide: Configuration, + useValue: new Configuration({ ...configOrBasePath }), + }, + ]); +} \ No newline at end of file