Failed 🔬🧪 Angular service for on-demand loading modules

[colemanw]

Overview

Just thought I'd leave this here for posterity. Is it possible to lazy-load AngularJS modules on-demand? The short answer is "no".

The use-case was subsearches. Where e.g. we have a crm-search-display-table with a subsearch of a different type, say crm-search-display-list embedded in it. If crmSearchDisplayList module wasn't present at page-load, this code would helpfully load it for us.

It doesn't work.

In some circumstances, it is possible to lazy-load modules. In fact we already do it when we popup a new Afform. The Afform itself is a new AgularJS module that wasn't necessarily present when the page first loaded. This PR was piggybacking on that mechanism.

But the reason the popup scenario works and this one doesn't is because we bootstrap a new instance of Angular within the popup, and it initializes its compiler with all available modules (including the one we just loaded). However, any existing <crm-angular-js> blocks on the page with Angular already bootstrapped will not get the new module, because their compiler has already set up its injector with the old list of modules.

And there's not much to be done about that without ripping into the guts of AngularJS's $compiler/injector. Not worth it IMO.

[civibot]

🤖 Thank you for contributing to CiviCRM! ❤️ We will need to test and review this PR. 👷

Introduction for new contributors...

• If this is your first PR, an admin will greenlight automated testing with the command ok to test or add to whitelist.
• A series of tests will automatically run. You can see the results at the bottom of this page (if there are any problems, it will include a link to see what went wrong).
• A demo site will be built where anyone can try out a version of CiviCRM that includes your changes.
• If this process needs to be repeated, an admin will issue the command test this please to rerun tests and build a new demo site.
• Before this PR can be merged, it needs to be reviewed. Please keep in mind that reviewers are volunteers, and their response time can vary from a few hours to a few weeks depending on their availability and their knowledge of this particular part of CiviCRM.
• A great way to speed up this process is to "trade reviews" with someone - find an open PR that you feel able to review, and leave a comment like "I'm reviewing this now, could you please review mine?" (include a link to yours). You don't have to wait for a response to get started (and you don't have to stop at one!) the more you review, the faster this process goes for everyone 😄
• To ensure that you are credited properly in the final release notes, please add yourself to contributor-key.yml
• For more information about contributing, see CONTRIBUTING.md.

Quick links for reviewers...

• ➡️ PR Demo site (can be rebuilt with the command test this please).
• 📖 Review standards
• 🗒️ Review template (brief or verbose)

➡️ Online demo of this PR 🔗

[ufundo]

Hmm.

I was thinking an approach could be to add the required subsearch modules to the dependency graph in advance.

Something like:

• look at the dynamic afform angular modules
• look for search displays in them
• check for subsearch columns with different display types
• add the requisite modules for those display types to the requirements of the parent afform module (e.g. afsearchMySearch)

It will only work where the search is being used embedded in an afform type module though? 🤔

How is the necessary module for the search display loaded when a search display isn't inside an afform?

[colemanw]

@ufundo How is the necessary module for the search display loaded when a search display isn't inside an afform?

Manually.

But I ended up deciding not to fight against AngularJS here: it really wants all modules up-front, and this gives it what it wants. The performance cost is probably negligible and not worth spending more time on, since our real objective is to move toward WebComponents and we're already building a much better lazy loader for those.