How to use System.import with webpack

[zolekm]

1. OS Mac OSX (El Capitan)
2. Versions. Please run ng --version. If there's nothing outputted, please run
   in a Terminal: node --version and paste the result here:
   angular-cli: 1.0.0-beta.15
   node: 6.2.2

Is there any good example how import some node_module in runtime, or/and which is right way to import dependency/reference in runtime.

With SystemJs i do that in runtime directly from node_module but with webpack i think i need to add somehow that to webpack bundle?

Example what i'm trying:

System.import('demopackage').then((data)=>{
//here i want to use that import, that already work in SystemJs version
});

Error i got:

error_handler.js:45 EXCEPTION: Cannot find module 'demopackage'

If i use demopack module with classic import statement than everything works

Main reason to do that and not use import 'dep' from 'some_module' is because i want to read imports from config.

[talsi]

hi,
have a look here - Dynamic System.import with webpack.
did it helped solve your problem?

[zolekm]

@talsi tnx for help but i use webpack 2 and webpack 2 already support System.import the issue is because bundle generated with webpack doesnt find my 'demopackage' module in created bundle

[talsi]

@zolekm - your code should work.

System.import('demopackage').then((data)=>{
//here i want to use that import, that already work in SystemJs version
});

are you are doing your dynamic import like this ?

var module = "demopackage";
System.import(module).then((data)=>{ });

in that case, webpack needs context.
until #1656 i suggest try changing it into something like this

var module = getDynamicModuleName(); // 'demopackage';
switch (module){
  case 'demopackage':
    System.import('demopackage').then(data=> { });
    break;
}

[zolekm]

@talsi tnx make sense, but problem is that i don't know which modules will need to be imported because they are defined in config which can be updated/changed. But your point is correct i already tested it and you are right, do you have any idea how to make it dynamic? Load array of dependencies which can be dynamic?

[talsi]

@zolekm

Hi, That's a good question. I have the same problem. The way i see things you have two options.

1. Make your own webpcak build and use a plugin to handle that. (I don't like this option so much). Detailed explanation here: Add an option to create context from the webpack config, i.e. via a plugin webpack/webpack#2783
2. Include system.js (the lib itself) and workaround webpack so you will use the actual dynamic loader and not webpack's static analysis system.import

[TheLarkInn]

workaround webpack so you will use the actual dynamic loader and not webpack's static analysis system.import

Working around static analysis is an anti-pattern to the optimization that is trying to be accomplished at build time.

If the files you are 'dynamically' are referencing are in your project somewhere at build time, then you do NOT want a module loader for it, you want to use static analysis. And through the future add-on system we will add for users the ability to set additional properties for context. (for webpack).

[talsi]

I agree its an anti-pattern, thats why i said workaround.
That being said, we need a working solutation (now) for our projects.

Any other suggestions on how to dynamically load modules?

[zolekm]

@TheLarkInn and @talsi tnx i currently use what @talsi suggest but in future i expect some changes in webpack so that wont be problem anymore because it is workaround, or if angular-cli will support context configuration for webpack what do you think about that @talsi?

[talsi]

@zolekm i think that currently thats the least-bad choice.

fyi, it seems like the angular-cli team has decided to design an addon system (instead of exposing the webpack config) that would allow such a thing but for the time being they won't expose it.
you can read the full disscussion here #1656

[filipesilva]

The CLI depends on Webpack2 for for it's System.import implementation, so I would prefer this discussion take place there. I appreciate the solutions put forward though.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}