[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:

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:

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

Line 13 in 026426e

"build": "tsc --outDir dist/",

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 #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 ***@***.***> wrote: I have given this much thought last week. I actually prepared a PR on the matter. In fact, I took a look at ***@***.***/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 <#6722 (comment)>, 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 <keni.steward@gmail.com> 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 ***@***.***> wrote: > I have given this much thought last week. I actually prepared a PR on the > matter. In fact, I took a look at > ***@***.***/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 > <#6722 (comment)>, > 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 ***@***.***> wrote: Great finding! THIS explains a lot! 👍 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6722 (comment)>, 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