0

When we use 'ngc' to compile source with skipTemplateCodegen set to false, so that ngc generates .ngfactory.js and when there is a angular module import where the imported module has entry components results component factories generated for those entry components as well and import statements are generated with relative paths.

What we've is, ngc to compile angular code (with factories generated) and bundle them into UMD using rollupjs; because of the additional component factories of entry components as mentioned above, bundled UMD is kind of polluted because of the import statements with relative paths to generated component factories of entry component of an imported angular module.

Any clue how to avoid/workaround this ?

Use https://github.com/iamrakesh/ng-extensions repo for reproduction. Generated UMD JavaScript can be looked at 'platform/assets/sample-ext.module.umd.js'

UPDATE: Actual project setup is based on https://github.com/maximusk/extension-mechanism-demo and https://github.com/lmeijdam/angular-umd-dynamic-example

UPDATE: Updated github repo to a different one with complete concept implementation.

iamrakesh
  • 219
  • 4
  • 16
  • Is Rendering components dynamically in the DOM, the end goal of generating factories. – Akshay Rajput Dec 28 '18 at 07:09
  • factories are generated by ngc for module classes, component class, etc when you do a AOT build. When you do JIT build, factories are generated at runtime on the browser and this is done by Angular compiler – iamrakesh Dec 28 '18 at 07:53
  • I know when they are generated, components that are instantiated dynamically must be added to EntryComponents of a module or hosting component. At the time of compile angular treats the components added in entry components differently (so that we can create a view of the same using component FactoryResolver) and inject in the dom. So if you don't need to follow up the above process, you can simply remove those components from entry components – Akshay Rajput Dec 28 '18 at 08:11
  • That is true, but when I build a (AOTed library) project with a 3rd party dependency (with an Angular module having entry components); I expect the generated UMD JavaScript to have only project's code not the factories for 3rd party dependency. – iamrakesh Dec 28 '18 at 08:19
  • If you use AOT compilation it usually means that you don’t have a compiler instance at runtime. However, there is no reason you cannot load the compiler to a browser and use it. It requires a bit of a setup, but nothing fancy. You need to import JITCompilerFactory in that component which renders another component dynamically, as you mentioned it is from a 3rd party, unless and until you have access to change their code I guess it's not possible. I might be wrong as I haven't played with the third-party libraries rendering components dynamically – Akshay Rajput Dec 28 '18 at 08:32
  • Probably my question is not that clear;I know and have setup to use Angular compiler directly, but I would like to do a AOT build for a library project and generate a UMD for it using RollupJs and load this UMD using a container application at runtime. It is not (just) about dynamically creating components. – iamrakesh Dec 28 '18 at 08:37

1 Answers1

0

Another alternative approach to achieve the same is to use combination of AOT and JIT compilation. AOT for container application and JIT for dynamic loaded extensions. Basic implementation of this concept can be found at https://github.com/iamrakesh/ng-extensions-aot-and-jit

iamrakesh
  • 219
  • 4
  • 16