Swagger-codegen: [typescript-angular] generated package/ApiModule is not AOT-compatible

[JohannesHoppe]

Description

Angular-Typescript code does break the AOT compilation of the consuming app. AOT compilation is going to be the default in near future.
I tested the generated code together with angular-cli 1.4.4 and angular 4.4.5.

ng serve is now complaining the following:

ERROR in Error: Error encountered resolving symbol values statically.
Calling function 'ApiModule', function calls are not supported.
Consider replacing the function or lambda with a reference to an exported function....

Swagger-codegen version

v3.0.0-20171009.075709-6 (snapshot) but also applies to v2.3.0

Command line used for generation

So I created an angular-typescript client (3.0.0-branch) with the following config:

{
  "npmName": "my-client-package",
  "npmVersion": "0.0.1",
  "snapshot": true,
  "ngVersion": "4.4.5"
}

```
java -jar swagger-codegen-cli.jar generate -i http://localhost:5000/swagger/v1/swagger.json -l typescript-angular -c config.json -o client-ts/
cd client-ts
npm pack

##### Steps to reproduce

Install the package via `npm install my-client-package` to a fresh Angular-CLI application.
Include the generated module:

```ts
export function getApiConfig() {
  return new Configuration({
    basePath:  environment.API_BASE_PATH ,
  });
}

@NgModule({

  imports: [
    ApiModule.forConfig(getApiConfig)
  ]
})
export class AppModule { }

Suggest a fix/enhancement

switch from tsc to ngc
see this: https://github.com/swagger-api/swagger-codegen/blob/026426e50cf411631b1ed40fe0852a71f46c1d98/modules/swagger-codegen/src/main/resources/typescript-angular/package.mustache#L13

Long story short: tsc is not enough. Code must be generated via ngc so that the package has metadata. If there is no metadata, the NgModule can't be included, and the compiler rejects with a misleading message. In a perfect world the result conforms to the Angular Package Format v4.0, too.
See http://blog.mgechev.com/2017/01/21/distributing-an-angular-library-aot-ngc-types/ for an introduction to the topic.

Current workaround

Don't use the generated @NgModule. Copy its content into the application, e.g:

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { Configuration, MyService } from 'my-client-package';

/*
 * Workaround that replaces the ApiModule from  'my-client-package'
 * --> makes code AOT-compatible again
 *
 * Reason:
 * tsc does not generate *.metadata.json which breaks compatibility with angular’s AOT compiler
 *
 * avoids:
 * ERROR in Error: Error encountered resolving symbol values statically.
 * Calling function 'ApiModule', function calls are not supported.
 * Consider replacing the function or lambda with a reference to an exported function
 */
@NgModule({
  imports:      [ CommonModule, HttpClientModule ],
  declarations: [],
  exports:      [],
  providers:    [ MyService ]
})
export class ApiWorkaroundModule {
    public static forConfig(configurationFactory: () => Configuration): ModuleWithProviders {
        return {
            ngModule: ApiWorkaroundModule,
            providers: [ {provide: Configuration, useFactory: configurationFactory}]
        };
    }
}

Now you can use:

  imports: [
    ApiWorkaroundModule.forConfig(getApiConfig)
  ]

Code compiles again, since ApiWorkaroundModule is now a part of the main compilation.

[wing328]

cc @TiFu @taxpon @sebastianhaas @kenisteward @Vrolijkx

[JohannesHoppe]

I updated my workaround snippet to address https://github.com/swagger-api/swagger-codegen/issues/6727

[sebastianhaas]

I have given this much thought last week. I actually prepared a PR on the matter. In fact, I took a look at https://medium.com/@trekhleb/how-to-create-aot-jit-compatible-angular-4-library-with-external-scss-html-templates-9da6e68dac6e and also Angular's material components.

But yeah, in the end, just compile through ngc rather than tsc should be sufficient. Furthermore, we need to include the dist folder with the npm package. Oh and maybe we want to ignore those .ngfactory files, they should not be included in a library distribution.

[kenisteward]

@sebastianhaas I recently made a library that can properly support aot that
generates fesms for es2015 es5 and umd. It is correct we want to ignore
ngfactory and only include metadata.json + d.ts + fesms with our dist. We
should follow https://youtu.be/unICbsPGFIA and the angular library package
spec mentioned in the video.

If you would like I can work on this with you.

On Wed, Oct 18, 2017, 7:23 AM Sebastian Haas [e-mail]
wrote:

I have given this much thought last week. I actually prepared a PR on the
matter. In fact, I took a look at
https://medium.com/@trekhleb/how-to-create-aot-jit-compatible-angular-4-library-with-external-scss-html-templates-9da6e68dac6e
and also Angular's material components.

But yeah, in the end, just compile through ngc rather than tsc should be
sufficient. Furthermore, we need to include the dist folder with the npm
package. Oh and maybe we want to ignore those .ngfactory files, they
should not be included in a library distribution.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/swagger-api/swagger-codegen/issues/6722#issuecomment-337559610,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AMPLteA_V9umUD55z0EQ5N-_5Xlceosvks5std_JgaJpZM4P87XS
.

[kenisteward]

As a note if you simply publish all the TS you don't get aot compilation
issues .

On Wed, Oct 18, 2017, 7:41 AM Kenneth Steward [e-mail]
wrote:

@sebastianhaas I recently made a library that can properly support aot
that generates fesms for es2015 es5 and umd. It is correct we want to
ignore ngfactory and only include metadata.json + d.ts + fesms with our
dist. We should follow https://youtu.be/unICbsPGFIA and the angular
library package spec mentioned in the video.

If you would like I can work on this with you.

On Wed, Oct 18, 2017, 7:23 AM Sebastian Haas [e-mail]
wrote:

I have given this much thought last week. I actually prepared a PR on the
matter. In fact, I took a look at
https://medium.com/@trekhleb/how-to-create-aot-jit-compatible-angular-4-library-with-external-scss-html-templates-9da6e68dac6e
and also Angular's material components.

But yeah, in the end, just compile through ngc rather than tsc should be
sufficient. Furthermore, we need to include the dist folder with the npm
package. Oh and maybe we want to ignore those .ngfactory files, they
should not be included in a library distribution.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/swagger-api/swagger-codegen/issues/6722#issuecomment-337559610,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AMPLteA_V9umUD55z0EQ5N-_5Xlceosvks5std_JgaJpZM4P87XS
.

[JohannesHoppe]

Furthermore, we need to include the dist folder with the npm package.

I agree. Doing the compilation on install is dangerous. I would put the README.md and package.json into /dist and just publish the bundles. TS files are not required.

maybe we want to ignore those .ngfactory files, they should not be included in a library distribution

I agree, too. We have no components inside.

  "angularCompilerOptions": {
    "skipTemplateCodegen": true
  }

... should do the trick.

Funny enough I already get errors with a simple ng serve (no --aot required). I bet it's because of the bogus compilation.

[sebastianhaas]

One more note from my side, I wasted 2 hours trying to figure out why AOT compilation (plain project created using ng new) with a codegen-produced npm package whouldn't work and found the 'module' property is missing in the generated package.json. It seems like webpack is using it to resolve the module's location. So I think it should be done like here: https://github.com/trekhleb/angular-library-seed/blob/master/package.json#L6

[JohannesHoppe]

Great finding! THIS explains a lot! 👍

[kenisteward]

You have to make sure what it points to is a built es5 module if you are
putting it there for webpack!!!

On Wed, Oct 18, 2017, 8:47 AM Johannes Hoppe [e-mail]
wrote:

Great finding! THIS explains a lot! 👍

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/swagger-api/swagger-codegen/issues/6722#issuecomment-337578768,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AMPLtdqVtOT9TNFKGMg-lkhM6jWTGqLMks5stfNGgaJpZM4P87XS
.

[sebastianhaas]

I've just created a PR to make discussing this a bit easier. #6735

[mariuszbeltowski]

FYI I've managed to compile typescript-angular AOT-compatible using ng-packagr https://github.com/dherges/ng-packagr (v2.0.0-rc.11)

[kenisteward]

@bmariusz Thanks for the info. I bleive @sebastianhaas still has his PR still open so we can discuss more there #6735

There I also have my suggested details from following the Angular Library standard