es6: how to add dependencies to dynamic import

Viewed 868

I want to dynamically load a (angular) library, so I use import to load the library.

import(/* webpackIgnore: true */ url).then(module => {
   console.log('Got ya!');
});

I add the /* webpackIgnore: true */ so Webpack will not attempt to add it to the bundle at build time. This seems to work, but now the imports of the library cannot be loaded. I get

TypeError: Failed to resolve module specifier "@angular/core". Relative references must start with either "/", "./", or "../".

This seems to be caused by imports of classes in the external library. For example

import {Component, EventEmitter, Input, Output} from '@angular/core';

I managed to get things working with SystemJS, but I wanted to try to achieve the same without the extra SystemJS (6.6) library. See SystemJS 6.x set/register modules or provide mapping when dynamically loading module for that solution.

But without SystemJS, is it possible to load all dependencies of the external module too? Or even better, re-use the already loaded dependencies, such as @angular/core...?

Thanks!

UPDATE

I guess I could use importmap as described here: https://medium.com/@dmnsgn/in-2020-go-bundler-free-eb29c1f05fc9 (https://github.com/guybedford/es-module-shims/blob/master/src/es-module-shims.js).

That could translate the @angular/core into something like ./node_modules/@angular/core.

The thing that still remains then is how to re-use an already loaded module from the host application. In SystemJS we could register such modules to be used instead of being fetched.

0 Answers
Related