2

I am using Ivy latest rc candidate so far.

Use Case: I want to provide several modules which are compiled separately loadable via the import statement on runtime without using the loadchildren from the router module.

Context: I have created a library called nodes via "ng generate library nodes". "ng build nodes" generates under dist the desired bundles etc. Nothing special so far.

In my app I want to instantiate the NodesComponent as follows:

const modulePath = '/Users/modules/nodes/nodes.umd.js'; return await import(modulePath).then(...)

This does not work as the Ivy compiler somehow does not recognize the module to be loaded on demand.

When calling

import('/Users/modules/nodes/nodes.umd.js').then(...) it works as expected.

Question:

Is it possible to load an arbitrary module file from a location with import WITHOUT specifying the modulePath @compile time ?

It should be possible with Ivy to lazy load modules from any location without specifying them on compilation time.

Jeff Mercado
  • 129,526
  • 32
  • 251
  • 272
Kai Schwidder
  • 31
  • 1
  • Maybe it works when you do `export const modulePath = '/Users/modules/nodes/nodes.umd.js';` – Poul Kruijt Jan 30 '20 at 17:20
  • It does not work. It seems that import is not capable to load from any kind of destination though.... My use case is similar to load umd files from remote server locations. This would be awesome to have in the core library to truly have loadable modules. – Kai Schwidder Jan 30 '20 at 18:35

1 Answers1

0

i needed to register Classes into a dictionary by ClassName string for dynamic loaded components & Modules. After searching for days on ivy i found that using ${} to take out a name from a json object and replace the text in the const import string by looping over an array of classname definition loads the components lazy and dynamic. The widgets array can be send from backend so then it becomes really dynamic. The components that reside in widgets and module directory will be compiled as seperate javascript chunk files. Put the functions inside a service and call them when you need to load a specific component or module by sending that module/component name in an array

initwidgetscomponents(){
      const widgets = [{type:'bar'},{type:'xxx'}];
      widgets.map(widget => {
           import(`../widgets/${widget.type}/${widget.type}.component`).then(x => {
            this.register(widget.type,x.default);
             });
        });
  }

initmodules(){
    const modules = [{name:'svg'},{name:'relationmanagement'}];
    modules.map(module => {
         import(`../modules/${module.name}/${module.name}.module`).then(x => {
             console.log(x);
           });
      });
}

then add in include section of tsconfig the directories like

"./src/lib/widgets/**/*.component.ts",
"./src/lib/modules/**/*.module.ts",
"./src/lib/modules/**/*.action.ts",
"./src/lib/modules/**/*.model.ts",
"./src/lib/modules/**/*.component.ts",
"./src/lib/modules/**/*.state.ts"
Rene Pijnacker
  • 1