Dynamically load modules with Webpack using Typescript

Question

I\'m trying to build a web app which supports plugins, the environment is Angular 2 (so far), Typescript 2.1 and Webpack 2. I have some extension points (slots) where plugin

Answer 1

In Webpack.config.js update below code.

The resolver is used to load files relative to the src root and by resolving app folder in webpack.config.js, file within that folder can be accessed by absolute path as shown above.

resolve: {
    extensions: ['.ts', '.js', 'css'],
    "modules": [
        "./node_modules",
        "src"
    ]
},

output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
        publicPath: 'dist/',
    }

And in your system.import as below: where app is the folder inside your src folder

System.import('app/+ url').then(fileInstance=> {          
    console.log(fileInstance);            
});