[typescript-angular] AOT-compatible API client (via ng-packagr and ngc) #7984

JohannesHoppe · 2018-04-06T14:12:54Z

PR checklist

Read the contribution guidelines.
Ran the shell script under ./bin/ to update Petstore sample so that CIs can verify the change.
Filed the PR against the correct branch.
Copied the technical committee to review the pull request if your PR is targeting a particular programming language. @macjohnny

Description of the PR

This PR is a follow-up of PR #6735. It fixes #6722.
This solution simplifies the compilation drastically, by leveraging ng-packagr.
ng-packagr creates a complete new angular-package into dist - which can be easily published via npm publish dist (see generated README.md)

Depending on the angular version three different styles are generated:

it uses ngc when targeting Angular 2 (as seen in Initial step towards an AOT-compatible API client. #6735)
it uses ng-packagr 1 when targeting Angular 4
it uses ng-packagr 2 when targeting Angular 5

To stress this a little bit, I tested a package with Angular 6.0.0-beta.5 and it works, too.

FYI
@taxpon @kenisteward @TiFu @Vrolijkx @sebastianhaas @macjohnny

TODO
We might want to fiddle around with the different TypeScript versions, each Angular Compiler has own requirements to the allowed range of TypeScript version. Right now compilation gives us a warnings, but the generated bundles are still fine.

see #6722 see #6735

- uses ngc when targeting Angular 2 (as seen in #6735) - uses ng-packagr 1 when targeting Angular 4 - uses ng-packagr 2 when targeting Angular 5

JohannesHoppe · 2018-04-06T14:21:10Z

During my journey I also wrote everything down.
You can read my raw (and unpublished) article here: Generate Angular API clients with Swagger
Feedback and corrections are very much appreciated! 😄:thumbsup: --> fork it on github

kenisteward · 2018-04-06T14:22:20Z

We definitely need to mess with proper ts version generation as different versions of ng have different ts compatibility bases. This is great work and highly appreciated.

This reverts commit 471d248.

JohannesHoppe · 2018-04-06T14:33:58Z

@kenisteward I agree. But as far as I know this only leets to a nasty warning. After everything is bundled, the final webpack build of the consuming project does not care about typescript at all. It's "just" a devDependency of the angular-lib.

kenisteward · 2018-04-06T14:36:23Z

For using ngc with 2.7 ts and ng 4 ( I think) aot compilation doesn't work at all from when I was doing it by hand. So we should be careful to make sure all of our settings generate proper libs is all.

…

On Fri, Apr 6, 2018, 9:34 AM Johannes Hoppe ***@***.***> wrote: @kenisteward <https://github.com/kenisteward> I agree. But as far as I know this only leets to a nasty warning. After everything is bundled, the final webpack build of the consuming project does not care about typescript at all. It's "just" a devDependency of the angular-lib. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#7984 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMPLtZd0cs5cC6zfI8O99y1UZZqC7e0hks5tl3zhgaJpZM4TKH2M> .

JohannesHoppe · 2018-04-06T14:48:10Z

Honestly, a lot of black-magic is done here! When using ng-packagr 1 it somehow creates those bundles for angular 4. I confirm that everything is nicely compilable via npm run build. Don't ask my why it works! 😉

kenisteward · 2018-04-06T14:57:07Z

Interesting!

…

On Fri, Apr 6, 2018, 9:48 AM Johannes Hoppe ***@***.***> wrote: Honestly, a lot of black-magic is done here! When using ng-packagr 1 it somehow creates those bundles for angular 4. I confirm that everything is nicely compilable via npm run build. Don't ask my why it works! 😉 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#7984 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMPLtSSaQfPFjHy-cwgzZ03HkgXeTKo4ks5tl4A0gaJpZM4TKH2M> .

and i feel generally better when `npm run build` is called explicitly. - for ng-packagr 2 is doesn't matter, since the final package.json does not have any scripts - for old ng-packagr 1 it matters, scripts are copied to the final package.json which breaks installation via `npm install {{npmName}} --save` (it runs `npm run build` again)

macjohnny

thanks for this PR. looks good

macjohnny · 2018-04-06T15:03:03Z

...agger-codegen/src/main/java/io/swagger/codegen/languages/TypeScriptAngularClientCodegen.java

        additionalProperties.put(NG_VERSION, ngVersion);
        additionalProperties.put("injectionToken", ngVersion.atLeast("4.0.0") ? "InjectionToken" : "OpaqueToken");
        additionalProperties.put("injectionTokenTyped", ngVersion.atLeast("4.0.0"));
        additionalProperties.put("useHttpClient", ngVersion.atLeast("4.3.0"));
        if (!ngVersion.atLeast("4.3.0")) {
            supportingFiles.add(new SupportingFile("rxjs-operators.mustache", getIndexDirectory(), "rxjs-operators.ts"));
        }
+
+        // the current text makes only sence when using it as an npm/angular package
+        supportingFiles.add(new SupportingFile("README.mustache", getIndexDirectory(), "README.md"));


the current text makes only sence when using it as an npm/angular package

yes, that's true, but I would still generate it also for non-npm packages, because this README should be extended to be a Readme on how to use the generated code, too.
E.g. in #7965 information is added on how to set the base path with an observable.

So I would revert this change and generate the README in any case

I agree. I will change that.

macjohnny · 2018-04-06T15:05:03Z

modules/swagger-codegen/src/main/resources/typescript-angular/README.mustache


 ```
-npm install PATH_TO_GENERATED_PACKAGE --save
+npm install PATH_TO_GENERATED_PACKAGE/dist --save
 ```

 _using `npm link`:_


add a note about an issue in angular CLI that prevents using linked libraries on Windows, see angular/angular-cli#8284

macjohnny · 2018-04-06T15:14:58Z

@JohannesHoppe your article is excellent! you should add it as a Readme somewhere. @wing328 is there a place to publish language-specific help? wiki?

macjohnny · 2018-04-09T06:31:57Z

@JohannesHoppe just wanted to point out that the newest angular cli version supports generating libraries: https://github.com/angular/angular-cli/releases/tag/v6.0.0-rc.2

maybe this could be useful here?

JohannesHoppe · 2018-04-09T07:53:26Z

Yes, and no. 😄

Yes:

This would be another option to generate a angular-library in the "angular package format"
most people are familiar with the cli

No:

we would need to follow the angular-cli file structure, which means even more boilerplate files
I'm not sure if this will work in older Angular versions (Angular 2)
ng-packagr == rollup, angular-cli == webpack. it is said that rollup is much more faster
the RCs of angular-cli are super-unstable.

Generally, we have a lot of different petstore samples, which shows the amount of complexity. I would vote to skip Angular 2 and Angular 4.0-4.2 and to skip the "no npm package" part sooner or later. (But not in this PR!)

macjohnny · 2018-04-09T08:53:10Z

@JohannesHoppe ok I agree, ng-packagr can be used with only one configuration file and without any additional changes, which is nice.

I would also agree to skip angular < 4.3

JohannesHoppe · 2018-04-09T21:21:04Z

@macjohnny I added both improvements from your review. We are ready to merge, aren't we?

macjohnny · 2018-04-10T07:25:45Z

@JohannesHoppe thanks for the changes.
I think you need to re-generate the samples, as you changed the Readme.md
But apart from that, the PR seems fine from my point of view.

JohannesHoppe · 2018-04-10T15:51:33Z

I was hoping that nobody will notice that... 😎 I will do it after work...

JohannesHoppe · 2018-04-12T20:29:31Z

FYI:

ng g library <name>
It generates a new folder inside an Angular CLI project, ready to be built with ng-packagr.

https://twitter.com/juristr/status/984501406660022272

kenisteward · 2018-04-12T20:36:06Z

Doesn't that requires us to refactor to make sure we fully confirm to the generated package? Or do we already confirm? I love me some angular cli haha. It makes our ut functional easier to generate as well.

…

On Thu, Apr 12, 2018, 4:29 PM Johannes Hoppe ***@***.***> wrote: FYI: ng g library <name> It generates a new folder inside an Angular CLI project, ready to be built with ng-packagr. https://twitter.com/juristr/status/984501406660022272 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#7984 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMPLtVh4Xc4NKefBatF2RdA-dLai9Tqgks5tn7k_gaJpZM4TKH2M> .

JohannesHoppe · 2018-04-12T21:59:54Z

This means that we won't go for angular-cli as @macjohnny suggested. Because we would have this pipeline

you pull sagger-codegen and compile with mnv clean package
swagger-codegen generates an angular-cli project
ng g library generates ng-packagr project
ng-packagr compiles a NPM package in "Angular package format"

With my PR we have:

you pull sagger-codegen and compile with mnv clean package
swagger-codegen generates ng-packagr project
ng-packagr compiles a NPM package in "Angular package format"

... people will think we are completely crazy doing 4 steps! 😆

kenisteward · 2018-04-13T00:06:44Z

Hahaha

…

On Thu, Apr 12, 2018, 6:00 PM Johannes Hoppe ***@***.***> wrote: This means that the wo won't go for angular-cli as @macjohnny <https://github.com/macjohnny> suggested. Because we would have this pipeline 1. you pull sagger-codegen and compile with mnv clean package 2. swagger-codegen generates an angular-cli project 3. ng g library generates ng-packagr project 4. ng-packagr project compiles NPM package in "Angular package format" With my PR we have: 1. you pull sagger-codegen and compile with mnv clean package 2. swagger-codegen generates ng-packagr project 3. ng-packagr project compiles NPM package in "Angular package format" ... people will think we are completely crazy doing having 4 steps! 😆 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#7984 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMPLtReTUXD4CbG314Cv7WZgOln81koLks5tn85qgaJpZM4TKH2M> .

wing328 · 2018-04-13T13:26:38Z

If no further feedback/question on this PR, I'll merge it into master on the coming weekend.

damianmigo · 2018-09-30T02:58:43Z

Did someone have to copy the metadata.json to the dist folder manually before publishing it?

I can’t build the project that depends on my client library with AOT because the decorators are missing.

hypery2k · 2019-09-17T20:22:46Z

I've tried to use it with Angular 8 and AoT enabled. For this some change are need see here

Any feedback is welcome

JohannesHoppe added 5 commits April 6, 2018 01:21

typescript-angular: uses ng-packagr for the build

4dfdef5

see #6722 see #6735

this should make everybody happy: Angular 2/4/5 AOT support

79991ea

- uses ngc when targeting Angular 2 (as seen in #6735) - uses ng-packagr 1 when targeting Angular 4 - uses ng-packagr 2 when targeting Angular 5

removes bogus import

b0a3240

cleans / updates Petstore samples, adds a new sample for Angular 5

471d248

typo in README

4c75546

fixes broken travis build. adds pom.xml files again

cc5132f

This reverts commit 471d248.

macjohnny approved these changes Apr 6, 2018

View reviewed changes

JohannesHoppe mentioned this pull request Apr 6, 2018

Initial step towards an AOT-compatible API client. #6735

Closed

6 tasks

typescript-angular: small improvements as suggested by @macjohnny

52b2d34

wing328 added Client: TypeScript Enhancement: Compatibility labels Apr 11, 2018

wing328 added this to the v2.4.0 milestone Apr 11, 2018

angular-typescript: updated petstore samples, 3rd try

c86434f

wing328 merged commit 9a6a265 into swagger-api:master Apr 16, 2018

pmacouin mentioned this pull request Jul 11, 2018

[typescript-angular] Packaging with ngPackagr has been lost between 2.0 and 3.0 swagger-api/swagger-codegen-generators#120

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[typescript-angular] AOT-compatible API client (via ng-packagr and ngc) #7984

[typescript-angular] AOT-compatible API client (via ng-packagr and ngc) #7984

JohannesHoppe commented Apr 6, 2018 •

edited

Loading

JohannesHoppe commented Apr 6, 2018

kenisteward commented Apr 6, 2018

JohannesHoppe commented Apr 6, 2018

kenisteward commented Apr 6, 2018 via email

JohannesHoppe commented Apr 6, 2018

kenisteward commented Apr 6, 2018 via email

macjohnny left a comment

macjohnny Apr 6, 2018

JohannesHoppe Apr 6, 2018

macjohnny Apr 6, 2018

JohannesHoppe Apr 6, 2018

macjohnny commented Apr 6, 2018 •

edited

Loading

macjohnny commented Apr 9, 2018

JohannesHoppe commented Apr 9, 2018 •

edited

Loading

macjohnny commented Apr 9, 2018

JohannesHoppe commented Apr 9, 2018

macjohnny commented Apr 10, 2018

JohannesHoppe commented Apr 10, 2018

JohannesHoppe commented Apr 12, 2018

kenisteward commented Apr 12, 2018 via email

JohannesHoppe commented Apr 12, 2018 •

edited

Loading

kenisteward commented Apr 13, 2018 via email

wing328 commented Apr 13, 2018

damianmigo commented Sep 30, 2018

hypery2k commented Sep 17, 2019

[typescript-angular] AOT-compatible API client (via ng-packagr and ngc) #7984

[typescript-angular] AOT-compatible API client (via ng-packagr and ngc) #7984

Conversation

JohannesHoppe commented Apr 6, 2018 • edited Loading

PR checklist

Description of the PR

JohannesHoppe commented Apr 6, 2018

kenisteward commented Apr 6, 2018

JohannesHoppe commented Apr 6, 2018

kenisteward commented Apr 6, 2018 via email

JohannesHoppe commented Apr 6, 2018

kenisteward commented Apr 6, 2018 via email

macjohnny left a comment

Choose a reason for hiding this comment

macjohnny Apr 6, 2018

Choose a reason for hiding this comment

JohannesHoppe Apr 6, 2018

Choose a reason for hiding this comment

macjohnny Apr 6, 2018

Choose a reason for hiding this comment

JohannesHoppe Apr 6, 2018

Choose a reason for hiding this comment

macjohnny commented Apr 6, 2018 • edited Loading

macjohnny commented Apr 9, 2018

JohannesHoppe commented Apr 9, 2018 • edited Loading

macjohnny commented Apr 9, 2018

JohannesHoppe commented Apr 9, 2018

macjohnny commented Apr 10, 2018

JohannesHoppe commented Apr 10, 2018

JohannesHoppe commented Apr 12, 2018

kenisteward commented Apr 12, 2018 via email

JohannesHoppe commented Apr 12, 2018 • edited Loading

kenisteward commented Apr 13, 2018 via email

wing328 commented Apr 13, 2018

damianmigo commented Sep 30, 2018

hypery2k commented Sep 17, 2019

JohannesHoppe commented Apr 6, 2018 •

edited

Loading

macjohnny commented Apr 6, 2018 •

edited

Loading

JohannesHoppe commented Apr 9, 2018 •

edited

Loading

JohannesHoppe commented Apr 12, 2018 •

edited

Loading