https://github.com/lab5e/ng-userapi
Angular User API client
https://github.com/lab5e/ng-userapi
Last synced: 4 days ago
JSON representation
Angular User API client
- Host: GitHub
- URL: https://github.com/lab5e/ng-userapi
- Owner: lab5e
- License: bsd-2-clause
- Created: 2021-04-08T10:19:28.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2022-06-30T09:18:49.000Z (almost 4 years ago)
- Last Synced: 2025-02-28T22:39:11.155Z (over 1 year ago)
- Language: TypeScript
- Size: 56.6 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## @lab5e/ng-userapi@1.3.13
### Building
To install the required dependencies and to build the typescript sources run:
```
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:_
```
npm install @lab5e/ng-userapi@1.3.13 --save
```
_without publishing (not recommended):_
```
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:
```
npm link
```
In your project:
```
npm link @lab5e/ng-userapi
```
__Note for Windows users:__ The Angular CLI has troubles to use linked npm packages.
Please refer to this issue https://github.com/angular/angular-cli/issues/8284 for a solution / workaround.
Published packages are not effected by this issue.
#### General usage
In your Angular project:
```
// without configuring providers
import { ApiModule } from '@lab5e/ng-userapi';
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 {}
```
```
// configuring providers
import { ApiModule, Configuration, ConfigurationParameters } from '@lab5e/ng-userapi';
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 {}
```
```
// configuring providers with an authentication service that manages your access tokens
import { ApiModule, Configuration } from '@lab5e/ng-userapi';
@NgModule({
imports: [ ApiModule ],
declarations: [ AppComponent ],
providers: [
{
provide: Configuration,
useFactory: (authService: AuthService) => new Configuration(
{
basePath: environment.apiUrl,
accessToken: authService.getAccessToken.bind(authService)
}
),
deps: [AuthService],
multi: false
}
],
bootstrap: [ AppComponent ]
})
export class AppModule {}
```
```
import { DefaultApi } from '@lab5e/ng-userapi';
export class AppComponent {
constructor(private apiGateway: DefaultApi) { }
}
```
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:
```
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 {
}
```
### Set service base path
If different than the generated base path, during app bootstrap, you can provide the base path to your service.
```
import { BASE_PATH } from '@lab5e/ng-userapi';
bootstrap(AppComponent, [
{ provide: BASE_PATH, useValue: 'https://your-web-service.com' },
]);
```
or
```
import { BASE_PATH } from '@lab5e/ng-userapi';
@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:
```
export const environment = {
production: false,
API_BASE_PATH: 'http://127.0.0.1:8080'
};
```
In the src/app/app.module.ts:
```
import { BASE_PATH } from '@lab5e/ng-userapi';
import { environment } from '../environments/environment';
@NgModule({
declarations: [
AppComponent
],
imports: [ ],
providers: [{ provide: BASE_PATH, useValue: environment.API_BASE_PATH }],
bootstrap: [ AppComponent ]
})
export class AppModule { }
```