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

* typescript-angular: uses ng-packagr for the build

see #6722
see #6735

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

- 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

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

* typo in README

* fixes broken travis build. adds pom.xml files again

This reverts commit 471d248.

* makes usage of `dist` more clear

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)

* typescript-angular: small improvements as suggested by @macjohnny

* angular-typescript: updated petstore samples, 3rd try

Author: JohannesHoppe

bin/typescript-angular-petstore-all.sh

@@ -46,3 +46,7 @@ java $JAVA_OPTS -jar $executable $ags
 echo "Typescript Petstore API client (v4.3 { Adding HttpClientModule over HttpModule })"
 ags="$@ generate -i modules/swagger-codegen/src/test/resources/2_0/petstore.yaml -l typescript-angular -c bin/typescript-petstore-npm.json -o samples/client/petstore/typescript-angular-v4.3/npm --additional-properties ngVersion=4.3"
 java $JAVA_OPTS -jar $executable $ags
+
+echo "Typescript Petstore API client (v5 { Uses latest version of ng-packagr })"
+ags="$@ generate -i modules/swagger-codegen/src/test/resources/2_0/petstore.yaml -l typescript-angular -c bin/typescript-petstore-npm.json -o samples/client/petstore/typescript-angular-v5/npm --additional-properties ngVersion=5"
+java $JAVA_OPTS -jar $executable $ags

bin/typescript-angular-v5-petstore-with-npm.1.sh

@@ -0,0 +1,31 @@
+#!/bin/sh
+
+SCRIPT="$0"
+
+while [ -h "$SCRIPT" ] ; do
+  ls=`ls -ld "$SCRIPT"`
+  link=`expr "$ls" : '.*-> \(.*\)$'`
+  if expr "$link" : '/.*' > /dev/null; then
+    SCRIPT="$link"
+  else
+    SCRIPT=`dirname "$SCRIPT"`/"$link"
+  fi
+done
+
+if [ ! -d "${APP_DIR}" ]; then
+  APP_DIR=`dirname "$SCRIPT"`/..
+  APP_DIR=`cd "${APP_DIR}"; pwd`
+fi
+
+executable="./modules/swagger-codegen-cli/target/swagger-codegen-cli.jar"
+
+if [ ! -f "$executable" ]
+then
+  mvn clean package
+fi
+
+# if you've executed sbt assembly previously it will use that instead.
+export JAVA_OPTS="${JAVA_OPTS} -XX:MaxPermSize=256M -Xmx1024M -DloggerPath=conf/log4j.properties"
+ags="$@ generate -i modules/swagger-codegen/src/test/resources/2_0/petstore.yaml -l typescript-angular -c bin/typescript-petstore-npm.json -o samples/client/petstore/typescript-angular-v5/npm --additional-properties ngVersion=5"
+
+java $JAVA_OPTS -jar $executable $ags

bin/windows/typescript-angular-petstore-all.bat

@@ -3,5 +3,6 @@ call .\bin\windows\typescript-angular-v2-interfaces.bat
 call .\bin\windows\typescript-angular-v2.bat
 call .\bin\windows\typescript-angular-v4-with-npm.bat
 call .\bin\windows\typescript-angular-v4.3-with-npm.bat
+call .\bin\windows\typescript-angular-v5-with-npm.bat
 
 

bin/windows/typescript-angular-v5-with-npm.bat

@@ -0,0 +1,10 @@
+set executable=.\modules\swagger-codegen-cli\target\swagger-codegen-cli.jar
+
+If Not Exist %executable% (
+  mvn clean package
+)
+
+REM set JAVA_OPTS=%JAVA_OPTS% -Xmx1024M
+set ags=generate -i modules\swagger-codegen\src\test\resources\2_0\petstore.yaml -c bin\typescript-petstore-npm.json -l typescript-angular -o samples\client\petstore\typescript-angular-v5\npm --additional-properties ngVersion=5
+
+java %JAVA_OPTS% -jar %executable% %ags%

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

@@ -49,8 +49,9 @@ public TypeScriptAngularClientCodegen() {
         apiPackage = "api";
         modelPackage = "model";
 
-        this.cliOptions.add(new CliOption(NPM_NAME, "The name under which you want to publish generated npm package"));
-        this.cliOptions.add(new CliOption(NPM_VERSION, "The version of your npm package"));
+        this.cliOptions.add(new CliOption(NPM_NAME, "The name under which you want to publish generated npm package." +
+                " Required to generate a full angular package"));
+        this.cliOptions.add(new CliOption(NPM_VERSION, "The version of your npm package. Default is '1.0.0'"));
         this.cliOptions.add(new CliOption(NPM_REPOSITORY,
                 "Use this property to set an url your private npmRepo in the package.json"));
         this.cliOptions.add(new CliOption(SNAPSHOT,
@@ -78,7 +79,7 @@ public String getName() {
 
     @Override
     public String getHelp() {
-        return "Generates a TypeScript Angular (2.x or 4.x) client library.";
+        return "Generates a TypeScript Angular (2.x - 5.x) client library.";
     }
 
     @Override
@@ -97,8 +98,18 @@ public void processOpts() {
         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("4.3.0");
+            LOGGER.info("generating code for Angular {} ...", ngVersion);
+            LOGGER.info("  (you can select the angular version by setting the additionalProperty ngVersion)");
+        }
+
         if (additionalProperties.containsKey(NPM_NAME)) {
-            addNpmPackageGeneration();
+            addNpmPackageGeneration(ngVersion);
         }
 
         if (additionalProperties.containsKey(WITH_INTERFACES)) {
@@ -112,15 +123,6 @@ public void processOpts() {
             taggedUnions = Boolean.parseBoolean(additionalProperties.get(TAGGED_UNIONS).toString());
         }
 
-        // determine NG version
-        SemVer ngVersion;
-        if (additionalProperties.containsKey(NG_VERSION)) {
-            ngVersion = new SemVer(additionalProperties.get(NG_VERSION).toString());
-        } else {
-            ngVersion = new SemVer("4.3.0");
-            LOGGER.info("generating code for Angular {} ...", ngVersion);
-            LOGGER.info("  (you can select the angular version by setting the additionalProperty ngVersion)");
-        }
         additionalProperties.put(NG_VERSION, ngVersion);
         additionalProperties.put("injectionToken", ngVersion.atLeast("4.0.0") ? "InjectionToken" : "OpaqueToken");
         additionalProperties.put("injectionTokenTyped", ngVersion.atLeast("4.0.0"));
@@ -130,7 +132,8 @@ public void processOpts() {
         }
     }
 
-    private void addNpmPackageGeneration() {
+    private void addNpmPackageGeneration(SemVer ngVersion) {
+
         if (additionalProperties.containsKey(NPM_NAME)) {
             this.setNpmName(additionalProperties.get(NPM_NAME).toString());
         }
@@ -149,6 +152,20 @@ private void addNpmPackageGeneration() {
             this.setNpmRepository(additionalProperties.get(NPM_REPOSITORY).toString());
         }
 
+        // for Angular 2 AOT support we will use good-old ngc,
+        // Angular Package format wasn't invented at this time and building was much more easier
+        if (!ngVersion.atLeast("4.0.0")) {
+            LOGGER.warn("Please update your legacy Angular " + ngVersion + " project to benefit from 'Angular Package Format' support.");
+            additionalProperties.put("useNgPackagr", false);
+        } else {
+            additionalProperties.put("useNgPackagr", true);
+            supportingFiles.add(new SupportingFile("ng-package.mustache", getIndexDirectory(), "ng-package.json"));
+        }
+
+        // Libraries generated with v1.x of ng-packagr will ship with AoT metadata in v3, which is intended for Angular v4.
+        // Libraries generated with v2.x of ng-packagr will ship with AoT metadata in v4, which is intended for Angular v5 (and Angular v6).
+        additionalProperties.put("useOldNgPackagr", !ngVersion.atLeast("5.0.0"));
+
         //Files for building our lib
         supportingFiles.add(new SupportingFile("package.mustache", getIndexDirectory(), "package.json"));
         supportingFiles.add(new SupportingFile("typings.mustache", getIndexDirectory(), "typings.json"));

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

@@ -2,44 +2,66 @@
 
 ### Building
 
-To build an compile the typescript sources to javascript use:
+To install the required dependencies and to build the typescript sources run:
 ```
 npm install
 npm run build
 ```
 
 ### publishing
 
+{{#useNgPackagr}}
+First build the package than run ```npm publish dist``` (don't forget to specify the `dist` folder!)
+{{/useNgPackagr}}
+{{^useNgPackagr}}
 First build the package than run ```npm publish```
+{{/useNgPackagr}}
 
 ### consuming
 
-navigate to the folder of your consuming project and run one of next commando's.
+Navigate to the folder of your consuming project and run one of next commands.
 
 _published:_
 
 ```
 npm install {{npmName}}@{{npmVersion}} --save
 ```
 
-_unPublished (not recommended):_
+_without publishing (not recommended):_
 
 ```
+{{#useNgPackagr}}
+npm install PATH_TO_GENERATED_PACKAGE/dist --save
+{{/useNgPackagr}}
+{{^useNgPackagr}}
 npm install PATH_TO_GENERATED_PACKAGE --save
+{{/useNgPackagr}}
 ```
 
 _using `npm link`:_
 
+{{#useNgPackagr}}
+In PATH_TO_GENERATED_PACKAGE/dist:
+{{/useNgPackagr}}
+{{^useNgPackagr}}
 In PATH_TO_GENERATED_PACKAGE:
+{{/useNgPackagr}}
 ```
 npm link
 ```
 
 In your project:
 ```
-npm link {{npmName}}@{{npmVersion}}
+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.
+Published packages are not effected by this issue.
+
+
+#### General usage
+
 In your Angular project:
 
 

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

@@ -28,8 +28,8 @@ export class Configuration {
      * Select the correct content-type to use for a request.
      * Uses {@link Configuration#isJsonMime} to determine the correct content-type.
      * If no content type is found return the first found type if the contentTypes is not empty
-     * @param {string[]} contentTypes - the array of content types that are available for selection
-     * @returns {string} the selected content-type or <code>undefined</code> if no selection could be made.
+     * @param contentTypes - the array of content types that are available for selection
+     * @returns the selected content-type or <code>undefined</code> if no selection could be made.
      */
     public selectHeaderContentType (contentTypes: string[]): string | undefined {
         if (contentTypes.length == 0) {
@@ -47,8 +47,8 @@ export class Configuration {
      * Select the correct accept content-type to use for a request.
      * Uses {@link Configuration#isJsonMime} to determine the correct accept content-type.
      * If no content type is found return the first found type if the contentTypes is not empty
-     * @param {string[]} accepts - the array of content types that are available for selection.
-     * @returns {string} the selected content-type or <code>undefined</code> if no selection could be made.
+     * @param accepts - the array of content types that are available for selection.
+     * @returns the selected content-type or <code>undefined</code> if no selection could be made.
      */
     public selectHeaderAccept(accepts: string[]): string | undefined {
         if (accepts.length == 0) {
@@ -69,8 +69,8 @@ export class Configuration {
      *   application/json; charset=UTF8
      *   APPLICATION/JSON
      *   application/vnd.company+json
-     * @param {string} mime - MIME (Multipurpose Internet Mail Extensions)
-     * @return {boolean} True if the given MIME is JSON, false otherwise.
+     * @param mime - MIME (Multipurpose Internet Mail Extensions)
+     * @return True if the given MIME is JSON, false otherwise.
      */
     public isJsonMime(mime: string): boolean {
         const jsonMime: RegExp = new RegExp('^(application\/json|[^;/ \t]+\/[^;/ \t]+[+]json)[ \t]*(;.*)?$', 'i');

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

@@ -0,0 +1,6 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

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

@@ -7,12 +7,20 @@
     "swagger-client"
   ],
   "license": "Unlicense",
+  {{#useNgPackagr}}
+  "scripts": {
+    "build": "ng-packagr -p ng-package.json"
+  },
+  {{/useNgPackagr}}
+  {{^useNgPackagr}}
   "main": "dist/index.js",
+  "module": "dist/index.js",  
   "typings": "dist/index.d.ts",
   "scripts": {
-    "build": "tsc --outDir dist/",
+    "build": "ngc",
     "postinstall": "npm run build"
   },
+  {{/useNgPackagr}}
   "peerDependencies": {
     "@angular/core": "^{{ngVersion}}",
     "@angular/http": "^{{ngVersion}}",
@@ -24,11 +32,13 @@
     "zone.js": "^0.7.6"
   },
   "devDependencies": {
+    "@angular/compiler-cli": "^{{ngVersion}}",
     "@angular/core": "^{{ngVersion}}",
     "@angular/http": "^{{ngVersion}}",
     "@angular/common": "^{{ngVersion}}",
     "@angular/compiler": "^{{ngVersion}}",
-    "@angular/platform-browser": "^{{ngVersion}}",
+    "@angular/platform-browser": "^{{ngVersion}}",{{#useNgPackagr}}
+    "ng-packagr": {{#useOldNgPackagr}}"^1.6.0"{{/useOldNgPackagr}}{{^useOldNgPackagr}}"^2.4.1"{{/useOldNgPackagr}},{{/useNgPackagr}}
     "reflect-metadata": "^0.1.3",
     "rxjs": "^5.4.0",
     "zone.js": "^0.7.6",

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

@@ -21,5 +21,9 @@
     "filesGlob": [
         "./model/*.ts",
         "./api/*.ts"
-    ]
+    ]{{^useNgPackagr}},
+    "angularCompilerOptions": {
+       "genDir": "dist",
+       "skipTemplateCodegen": true
+    }{{/useNgPackagr}}
 }