7

I am working on an Angular library which I am making compatible with AOT compilation. I've got it up and running using some gulp tasks around ngc, but I'd prefer to use @ngtools/webpack since it allows me a more straightforward method to use SASS and PUG for my styles and templates. However, I can't find a way to get the declaration or metadata files out of its virtual file system. Is there a way to emit these files?

Daniel Schaffer
  • 56,753
  • 31
  • 116
  • 165
  • 1
    Came across couple of articles that might help you: [this](http://blog.mgechev.com/2017/01/21/distributing-an-angular-library-aot-ngc-types/) && [this](https://medium.com/@isaacplmann/getting-your-angular-2-library-ready-for-aot-90d1347bcad). > Quoting from one of the article "By default ngc generates ngfactories for the components and modules. By using skipTemplateCodegen flag we can skip this and only get *.metadata.json files." – Surender Khairwa Sep 25 '17 at 15:54

1 Answers1

0

For declarations, you have to change const lambda => export function.

That is 

const declarations = () => [
  Component
];

to

export function declarations() {
  return [
    Components
  ];
}

then replace the tsc in scripts section in your package.json with ngc.

Now from (this comment on github)

All referenced libraries must include the .metadata.json file along side any .d.ts files they produce otherwise they will not work correctly with ngc. The .metadata.json file contains the information we need that was in the original .ts file but was not included in the .d.ts file. If we don't have that information we cannot generate the factories for the library.

  • So, make sure that the _.metadata.json files are next to their associated *.d.ts files.

  • Since you're using webpack, you have to use ngc first and then webpack on the compiled code.

Sources
1. Making your Angular 2 library statically analyzable for AoT
2. Getting your Angular 2 library ready for AoT

Sagar V
  • 12,158
  • 7
  • 41
  • 68
  • 1
    Right, I can already do this. The question was regarding using @ngtools/webpack to do it, which would allow me all the benefits of using webpack. – Daniel Schaffer Sep 26 '17 at 20:58