Skip to content

Commit

Permalink
[TypeScript - Angular] Add syntax highlighting to code blocks and cor…
Browse files Browse the repository at this point in the history
…rect heading levels in README.mustache (OpenAPITools#19837)

* Improve typescript-angular README.mustache

- Add syntax highlighting to code blocks
- Correct heading levels

* Add space between heading and convert bare url to angle brackets link

* Update samples
  • Loading branch information
bameyrick authored Oct 10, 2024
1 parent a84946b commit 368b9b7
Show file tree
Hide file tree
Showing 17 changed files with 544 additions and 442 deletions.
Original file line number Diff line number Diff line change
@@ -1,34 +1,35 @@
## {{npmName}}@{{npmVersion}}
# {{npmName}}@{{npmVersion}}

{{{appDescription}}}

{{#version}}The version of the OpenAPI document: {{{.}}}{{/version}}

### Building
## Building

To install the required dependencies and to build the typescript sources run:
```

```console
npm install
npm run build
```

### publishing
## Publishing

First build the package then run ```npm publish dist``` (don't forget to specify the `dist` folder!)
First build the package then run `npm publish dist` (don't forget to specify the `dist` folder!)

### consuming
## 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
```

Expand All @@ -37,26 +38,26 @@ _It's important to take the tgz file, otherwise you'll get trouble with links on
_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 https://github.com/angular/angular-cli/issues/8284 for a solution / workaround.
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
### General usage

In your Angular project:


```
```typescript
// without configuring providers
import { {{apiModuleClassName}} } from '{{npmName}}';
import { HttpClientModule } from '@angular/common/http';
Expand All @@ -75,7 +76,7 @@ import { HttpClientModule } from '@angular/common/http';
export class AppModule {}
```

```
```typescript
// configuring providers
import { {{apiModuleClassName}}, {{configurationClassName}}, {{configurationParametersInterfaceName}} } from '{{npmName}}';

Expand All @@ -95,7 +96,7 @@ export function apiConfigFactory (): {{configurationClassName}} {
export class AppModule {}
```

```
```typescript
// configuring providers with an authentication service that manages your access tokens
import { {{apiModuleClassName}}, {{configurationClassName}} } from '{{npmName}}';

Expand All @@ -120,7 +121,7 @@ import { {{apiModuleClassName}}, {{configurationClassName}} } from '{{npmName}}'
export class AppModule {}
```

```
```typescript
import { DefaultApi } from '{{npmName}}';

export class AppComponent {
Expand All @@ -131,11 +132,13 @@ export class AppComponent {
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
### 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';
Expand All @@ -154,20 +157,21 @@ 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({
Expand All @@ -179,19 +183,20 @@ import { BASE_PATH } from '{{npmName}}';
export class AppModule {}
```

### Using @angular/cli

#### 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';

Expand Down Expand Up @@ -219,6 +224,7 @@ pass an arrow-function or method-reference to the `encodeParam` property of the
(see [General Usage](#general-usage) above).

Example value for use in your Configuration-Provider:

```typescript
new Configuration({
encodeParam: (param: Param) => myFancyParamEncoder(param),
Expand Down
Original file line number Diff line number Diff line change
@@ -1,34 +1,35 @@
## @
# @

No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)

The version of the OpenAPI document: 1.0.0

### Building
## Building

To install the required dependencies and to build the typescript sources run:
```

```console
npm install
npm run build
```

### publishing
## Publishing

First build the package then run ```npm publish dist``` (don't forget to specify the `dist` folder!)
First build the package then run `npm publish dist` (don't forget to specify the `dist` folder!)

### consuming
## Consuming

Navigate to the folder of your consuming project and run one of next commands.

_published:_

```
```console
npm install @ --save
```

_without publishing (not recommended):_

```
```console
npm install PATH_TO_GENERATED_PACKAGE/dist.tgz --save
```

Expand All @@ -37,26 +38,26 @@ _It's important to take the tgz file, otherwise you'll get trouble with links on
_using `npm link`:_

In PATH_TO_GENERATED_PACKAGE/dist:
```

```console
npm link
```

In your project:
```

```console
npm link
```

__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.
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
### General usage

In your Angular project:


```
```typescript
// without configuring providers
import { ApiModule } from '';
import { HttpClientModule } from '@angular/common/http';
Expand All @@ -75,7 +76,7 @@ import { HttpClientModule } from '@angular/common/http';
export class AppModule {}
```

```
```typescript
// configuring providers
import { ApiModule, Configuration, ConfigurationParameters } from '';

Expand All @@ -95,7 +96,7 @@ export function apiConfigFactory (): Configuration {
export class AppModule {}
```

```
```typescript
// configuring providers with an authentication service that manages your access tokens
import { ApiModule, Configuration } from '';

Expand All @@ -120,7 +121,7 @@ import { ApiModule, Configuration } from '';
export class AppModule {}
```

```
```typescript
import { DefaultApi } from '';

export class AppComponent {
Expand All @@ -131,11 +132,13 @@ export class AppComponent {
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
### 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:
```

```typescript
import { ApiModule } from 'my-api-path';
import { ApiModule as OtherApiModule } from 'my-other-api-path';
import { HttpClientModule } from '@angular/common/http';
Expand All @@ -154,20 +157,21 @@ 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 '';

bootstrap(AppComponent, [
{ provide: BASE_PATH, useValue: 'https://your-web-service.com' },
]);
```

or

```
```typescript
import { BASE_PATH } from '';

@NgModule({
Expand All @@ -179,19 +183,20 @@ import { BASE_PATH } from '';
export class AppModule {}
```

### Using @angular/cli

#### 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 '';
import { environment } from '../environments/environment';

Expand Down Expand Up @@ -219,6 +224,7 @@ pass an arrow-function or method-reference to the `encodeParam` property of the
(see [General Usage](#general-usage) above).

Example value for use in your Configuration-Provider:

```typescript
new Configuration({
encodeParam: (param: Param) => myFancyParamEncoder(param),
Expand Down
Loading

0 comments on commit 368b9b7

Please sign in to comment.