Skip to content

Commit 023e6dd

Browse files
authored
typescript-angular: Angular 11 support (#7937)
* #7935 typescript-angular: support angular 11 * regenerate angular 11 sample project * Update ngVersion to 11.0.0 in typescript-angular.md
1 parent 88dc219 commit 023e6dd

51 files changed

Lines changed: 4274 additions & 6 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
generatorName: typescript-angular
2+
outputDir: samples/client/petstore/typescript-angular-v11-provided-in-root/builds/with-npm
3+
inputSpec: modules/openapi-generator/src/test/resources/2_0/petstore.yaml
4+
additionalProperties:
5+
ngVersion: 11.0.0
6+
npmVersion: 1.0.0
7+
npmName: '@openapitools/typescript-angular-petstore'
8+
npmRepository: https://skimdb.npmjs.com/registry
9+
snapshot: false
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
generatorName: typescript-angular
2+
outputDir: samples/client/petstore/typescript-angular-v11-provided-in-root/builds/default
3+
inputSpec: modules/openapi-generator/src/test/resources/2_0/petstore.yaml
4+
additionalProperties:
5+
ngVersion: 11.0.0

docs/generators/typescript-angular.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ These options may be applied as additional-properties (cli) or configOptions (pl
1919
|modelFileSuffix|The suffix of the file of the generated model (model<suffix>.ts).| |null|
2020
|modelPropertyNaming|Naming convention for the property: 'camelCase', 'PascalCase', 'snake_case' and 'original', which keeps the original name. Only change it if you provide your own run-time code for (de-)serialization of models| |original|
2121
|modelSuffix|The suffix of the generated model.| |null|
22-
|ngVersion|The version of Angular. (At least 6.0.0)| |10.0.0|
22+
|ngVersion|The version of Angular. (At least 6.0.0)| |11.0.0|
2323
|npmName|The name under which you want to publish generated npm package. Required to generate a full package| |null|
2424
|npmRepository|Use this property to set an url your private npmRepo in the package.json| |null|
2525
|npmVersion|The version of your npm package. If not provided, using the version from the OpenAPI specification file.| |1.0.0|

modules/openapi-generator/src/main/java/org/openapitools/codegen/languages/TypeScriptAngularClientCodegen.java

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ public static enum QUERY_PARAM_OBJECT_FORMAT_TYPE {dot, json, key};
6262
public static final String STRING_ENUMS_DESC = "Generate string enums instead of objects for enum values.";
6363
public static final String QUERY_PARAM_OBJECT_FORMAT = "queryParamObjectFormat";
6464

65-
protected String ngVersion = "10.0.0";
65+
protected String ngVersion = "11.0.0";
6666
protected String npmRepository = null;
6767
private boolean useSingleRequestParameter = false;
6868
protected String serviceSuffix = "Service";
@@ -131,7 +131,7 @@ public String getName() {
131131

132132
@Override
133133
public String getHelp() {
134-
return "Generates a TypeScript Angular (6.x - 10.x) client library.";
134+
return "Generates a TypeScript Angular (6.x - 11.x) client library.";
135135
}
136136

137137
@Override
@@ -258,7 +258,9 @@ private void addNpmPackageGeneration(SemVer ngVersion) {
258258
}
259259

260260
// Set the typescript version compatible to the Angular version
261-
if (ngVersion.atLeast("10.0.0")) {
261+
if (ngVersion.atLeast("11.0.0")) {
262+
additionalProperties.put("tsVersion", ">=4.0.0 <4.1.0");
263+
} else if (ngVersion.atLeast("10.0.0")) {
262264
additionalProperties.put("tsVersion", ">=3.9.2 <4.0.0");
263265
} else if (ngVersion.atLeast("9.0.0")) {
264266
additionalProperties.put("tsVersion", ">=3.6.0 <3.8.0");
@@ -288,7 +290,10 @@ private void addNpmPackageGeneration(SemVer ngVersion) {
288290
supportingFiles.add(new SupportingFile("ng-package.mustache", getIndexDirectory(), "ng-package.json"));
289291

290292
// Specific ng-packagr configuration
291-
if (ngVersion.atLeast("10.0.0")) {
293+
if (ngVersion.atLeast("11.0.0")) {
294+
additionalProperties.put("ngPackagrVersion", "11.0.2");
295+
additionalProperties.put("tsickleVersion", "0.39.1");
296+
} else if (ngVersion.atLeast("10.0.0")) {
292297
additionalProperties.put("ngPackagrVersion", "10.0.3");
293298
additionalProperties.put("tsickleVersion", "0.39.1");
294299
} else if (ngVersion.atLeast("9.0.0")) {
@@ -309,7 +314,9 @@ private void addNpmPackageGeneration(SemVer ngVersion) {
309314
}
310315

311316
// set zone.js version
312-
if (ngVersion.atLeast("9.0.0")) {
317+
if (ngVersion.atLeast("11.0.0")) {
318+
additionalProperties.put("zonejsVersion", "0.11.3");
319+
} else if (ngVersion.atLeast("9.0.0")) {
313320
additionalProperties.put("zonejsVersion", "0.10.2");
314321
} else if (ngVersion.atLeast("8.0.0")) {
315322
additionalProperties.put("zonejsVersion", "0.9.1");
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
wwwroot/*.js
2+
node_modules
3+
typings
4+
dist
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# OpenAPI Generator Ignore
2+
# Generated by openapi-generator https://github.com/openapitools/openapi-generator
3+
4+
# Use this file to prevent files from being overwritten by the generator.
5+
# The patterns follow closely to .gitignore or .dockerignore.
6+
7+
# As an example, the C# client generator defines ApiClient.cs.
8+
# You can make changes and tell OpenAPI Generator to ignore just this file by uncommenting the following line:
9+
#ApiClient.cs
10+
11+
# You can match any string of characters against a directory, file or extension with a single asterisk (*):
12+
#foo/*/qux
13+
# The above matches foo/bar/qux and foo/baz/qux, but not foo/bar/baz/qux
14+
15+
# You can recursively match patterns against a directory, file or extension with a double asterisk (**):
16+
#foo/**/qux
17+
# This matches foo/bar/qux, foo/baz/qux, and foo/bar/baz/qux
18+
19+
# You can also negate patterns with an exclamation (!).
20+
# For example, you can ignore all files in a docs folder with the file extension .md:
21+
#docs/*.md
22+
# Then explicitly reverse the ignore rule for a single file:
23+
#!docs/README.md
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.gitignore
2+
README.md
3+
api.module.ts
4+
api/api.ts
5+
api/pet.service.ts
6+
api/store.service.ts
7+
api/user.service.ts
8+
configuration.ts
9+
encoder.ts
10+
git_push.sh
11+
index.ts
12+
model/apiResponse.ts
13+
model/category.ts
14+
model/models.ts
15+
model/order.ts
16+
model/pet.ts
17+
model/tag.ts
18+
model/user.ts
19+
variables.ts
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
5.0.0-SNAPSHOT
Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
## @
2+
3+
### Building
4+
5+
To install the required dependencies and to build the typescript sources run:
6+
```
7+
npm install
8+
npm run build
9+
```
10+
11+
### publishing
12+
13+
First build the package then run ```npm publish dist``` (don't forget to specify the `dist` folder!)
14+
15+
### consuming
16+
17+
Navigate to the folder of your consuming project and run one of next commands.
18+
19+
_published:_
20+
21+
```
22+
npm install @ --save
23+
```
24+
25+
_without publishing (not recommended):_
26+
27+
```
28+
npm install PATH_TO_GENERATED_PACKAGE/dist.tgz --save
29+
```
30+
31+
_It's important to take the tgz file, otherwise you'll get trouble with links on windows_
32+
33+
_using `npm link`:_
34+
35+
In PATH_TO_GENERATED_PACKAGE/dist:
36+
```
37+
npm link
38+
```
39+
40+
In your project:
41+
```
42+
npm link
43+
```
44+
45+
__Note for Windows users:__ The Angular CLI has troubles to use linked npm packages.
46+
Please refer to this issue https://github.com/angular/angular-cli/issues/8284 for a solution / workaround.
47+
Published packages are not effected by this issue.
48+
49+
50+
#### General usage
51+
52+
In your Angular project:
53+
54+
55+
```
56+
// without configuring providers
57+
import { ApiModule } from '';
58+
import { HttpClientModule } from '@angular/common/http';
59+
60+
@NgModule({
61+
imports: [
62+
ApiModule,
63+
// make sure to import the HttpClientModule in the AppModule only,
64+
// see https://github.com/angular/angular/issues/20575
65+
HttpClientModule
66+
],
67+
declarations: [ AppComponent ],
68+
providers: [],
69+
bootstrap: [ AppComponent ]
70+
})
71+
export class AppModule {}
72+
```
73+
74+
```
75+
// configuring providers
76+
import { ApiModule, Configuration, ConfigurationParameters } from '';
77+
78+
export function apiConfigFactory (): Configuration => {
79+
const params: ConfigurationParameters = {
80+
// set configuration parameters here.
81+
}
82+
return new Configuration(params);
83+
}
84+
85+
@NgModule({
86+
imports: [ ApiModule.forRoot(apiConfigFactory) ],
87+
declarations: [ AppComponent ],
88+
providers: [],
89+
bootstrap: [ AppComponent ]
90+
})
91+
export class AppModule {}
92+
```
93+
94+
```
95+
// configuring providers with an authentication service that manages your access tokens
96+
import { ApiModule, Configuration } from '';
97+
98+
@NgModule({
99+
imports: [ ApiModule ],
100+
declarations: [ AppComponent ],
101+
providers: [
102+
{
103+
provide: Configuration,
104+
useFactory: (authService: AuthService) => new Configuration(
105+
{
106+
basePath: environment.apiUrl,
107+
accessToken: authService.getAccessToken.bind(authService)
108+
}
109+
),
110+
deps: [AuthService],
111+
multi: false
112+
}
113+
],
114+
bootstrap: [ AppComponent ]
115+
})
116+
export class AppModule {}
117+
```
118+
119+
```
120+
import { DefaultApi } from '';
121+
122+
export class AppComponent {
123+
constructor(private apiGateway: DefaultApi) { }
124+
}
125+
```
126+
127+
Note: The ApiModule is restricted to being instantiated once app wide.
128+
This is to ensure that all services are treated as singletons.
129+
130+
#### Using multiple OpenAPI files / APIs / ApiModules
131+
In order to use multiple `ApiModules` generated from different OpenAPI files,
132+
you can create an alias name when importing the modules
133+
in order to avoid naming conflicts:
134+
```
135+
import { ApiModule } from 'my-api-path';
136+
import { ApiModule as OtherApiModule } from 'my-other-api-path';
137+
import { HttpClientModule } from '@angular/common/http';
138+
139+
@NgModule({
140+
imports: [
141+
ApiModule,
142+
OtherApiModule,
143+
// make sure to import the HttpClientModule in the AppModule only,
144+
// see https://github.com/angular/angular/issues/20575
145+
HttpClientModule
146+
]
147+
})
148+
export class AppModule {
149+
150+
}
151+
```
152+
153+
154+
### Set service base path
155+
If different than the generated base path, during app bootstrap, you can provide the base path to your service.
156+
157+
```
158+
import { BASE_PATH } from '';
159+
160+
bootstrap(AppComponent, [
161+
{ provide: BASE_PATH, useValue: 'https://your-web-service.com' },
162+
]);
163+
```
164+
or
165+
166+
```
167+
import { BASE_PATH } from '';
168+
169+
@NgModule({
170+
imports: [],
171+
declarations: [ AppComponent ],
172+
providers: [ provide: BASE_PATH, useValue: 'https://your-web-service.com' ],
173+
bootstrap: [ AppComponent ]
174+
})
175+
export class AppModule {}
176+
```
177+
178+
179+
#### Using @angular/cli
180+
First extend your `src/environments/*.ts` files by adding the corresponding base path:
181+
182+
```
183+
export const environment = {
184+
production: false,
185+
API_BASE_PATH: 'http://127.0.0.1:8080'
186+
};
187+
```
188+
189+
In the src/app/app.module.ts:
190+
```
191+
import { BASE_PATH } from '';
192+
import { environment } from '../environments/environment';
193+
194+
@NgModule({
195+
declarations: [
196+
AppComponent
197+
],
198+
imports: [ ],
199+
providers: [{ provide: BASE_PATH, useValue: environment.API_BASE_PATH }],
200+
bootstrap: [ AppComponent ]
201+
})
202+
export class AppModule { }
203+
```
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { NgModule, ModuleWithProviders, SkipSelf, Optional } from '@angular/core';
2+
import { Configuration } from './configuration';
3+
import { HttpClient } from '@angular/common/http';
4+
5+
import { PetService } from './api/pet.service';
6+
import { StoreService } from './api/store.service';
7+
import { UserService } from './api/user.service';
8+
9+
@NgModule({
10+
imports: [],
11+
declarations: [],
12+
exports: [],
13+
providers: []
14+
})
15+
export class ApiModule {
16+
public static forRoot(configurationFactory: () => Configuration): ModuleWithProviders<ApiModule> {
17+
return {
18+
ngModule: ApiModule,
19+
providers: [ { provide: Configuration, useFactory: configurationFactory } ]
20+
};
21+
}
22+
23+
constructor( @Optional() @SkipSelf() parentModule: ApiModule,
24+
@Optional() http: HttpClient) {
25+
if (parentModule) {
26+
throw new Error('ApiModule is already loaded. Import in your base AppModule only.');
27+
}
28+
if (!http) {
29+
throw new Error('You need to import the HttpClientModule in your AppModule! \n' +
30+
'See also https://github.com/angular/angular/issues/20575');
31+
}
32+
}
33+
}

0 commit comments

Comments
 (0)