Possibility to create a single bundle for SystemJS loader in AOT mode

[mlc-mlapis]

I'm submitting a...

[x] Feature request

Current behavior

Even when possible to run in AOT mode ... explanation here #109, it means that 2 files have to be loaded ... angular-modal-gallery.umd.min.js and angular-modal-gallery.ngfactory.js. It means that it is a problem to create a single bundle with all necessary files.

Expected behavior

A single bundle with angular-modal-gallery.ngfactory.js and angular-modal-gallery.js or an easy way to do it. Right now the module format of angular-modal-gallery.js is different ... es2015 then the format for angular-modal-gallery.ngfactory.js.

The same situation when using PrimeNG components allows to create a single bundle ... for example for slider component ... bundling slider.ngfactory.js and slider.js directly without any changes because both use the same module format.

What is the motivation / use case for changing the behavior?

Easy using of angular-modal-gallery component in AOT mode.

Environment

- Node version: any
- Platform:  any
- Angular version: 5.1.0
- Browser: any

[Ks89]

Hi,
I'm sorry but I need more information.

Which versions?

• Angular (only 5.1.0 or also other versions)
• angular-modal-gallery 4.x.x or the new 5.0.0-alpha?

Are you talking about the new Angular package specifications v5.0 or 4.0?

[mlc-mlapis]

Hi, let me add some additional info ...

• The latest version of Angular ... now it means 5.1.0
• The latest angular-modal-gallery 4.x.x ... now it means 4.0.1

I am not sure if there is a difference between Angular package specifications 5.0 and 4.0 from the point of view of the described problem. If we are talking about Angular 5.1.0 it means also Package Format 5.0.

[Ks89]

Oh wait, are you talking about running SystemJS with AOT?
If yes, do you have a working example about that? I never used SystemJS in this way. Also, I'm not an expert about SystemJS. I have some examples for AOT but only with webpack and angular-cli.

[mlc-mlapis]

Yes, SystemJS with AOT app. I am not sure if there is a possibility to create a plunker demo of it. Would be enough for you a simple GitHub repo with it ... so you will have to clone it and run?

[Ks89]

Yes, please, give a link to a minimal Github repo to test this.

[mlc-mlapis]

I prepared the demo already. It contains all versions: JIT, AOT and BUNDLED AOT.

It is on GithHub here: https://github.com/mlc-mlapis/demo-angular-modal-gallery

README describes how to work with it. I hope that it'll be working for you and you can shortly find out how to enhance <angular-modal-gallery> to allow creation of a single bundle for it or include it to an app's bundle to minimize the number of requests.

[Ks89]

Ok thank u 👍 .
I will try and I'll update this issue. Please be patient

[Ks89]

I confirm this behaviour, but please give me more time because I have many things to do at the same time and I don't have enough time right now, because I want to try to understand how you achieved this result.

However it seems related to the packaging system and not to the library itself. However I'll investigate further as soon as possibile.

[mlc-mlapis]

@Ks89 ... sure, I am patient enough, ... 😄 .

What is the strange thing for me is that why angular-modal-gallery.js is not compiled and angular-modal-gallery.ngfactory.js is (as you can see in their contents) ... in comparison to other libs ... as I showed on PrimeNG component example ...

Which solution are you using for packaging of your lib?

[Ks89]

I'm using ng-packagr (the current stable version of angular-modal-gallery is built with version 1.5.0-rc.1).

If you want to help me, feel free to contribute to the project.

[mlc-mlapis]

@Ks89 ... ng-packagr sounds good. I'll try a super simple example first to confirm principle.

[mlc-mlapis]

@Ks89 ... after deeper understanding how ng-packagr works and re-reading the spec of Angular Module Format 5.0 I have to say that there is probably nothing what you can improve. Look at README or try updated repo on https://github.com/mlc-mlapis/demo-angular-modal-gallery.

[Ks89]

Ok. Thank u for the explanation. Feel free to close the issue.

However, why are you using SystemJs instead of angular-cli or a pure Webpack config?

[mlc-mlapis]

@Ks89 ... using SystemJS is a combination of historic evolution of our projects and the necessity of a shared bundle (which would contain tree-shake-able resources from Angular libs, RxJS, ...) for several standalone apps. Now CLI is not able to do that ... each application is a monolithic app (all necessary resources are included -> duplicates across those apps).

With SystemJS we can use a browser cache to share the resources (Angular libs, RxJS, ...) among those apps ... and these resources are not part of those apps.

This is a temporary solution with robust solution on the horizon -> using mono-repo and ABC concept but this is still in a bit early stage and not a real tool-set for a production environment yet.