webpack with multiple angular 2 modules

Question

I have an ASP.NET Core site with 2 pages, the page routing is done via MVC, not Angular 2. Each of those pages has its own Angular 2 "app". I am having a real hard time trying to get this to work with webpack.

If I bootstrap both of the components into one module, then I get a The selector "xxx" did not match any elements error. However, if I try to create multiple entrys in the webpack.config.js then the polyfills freaks out because it is unable to find the other module.

How do I get this to work? Is the only option available to me here is to be forced to use the Angular 2 router and create a SPA?

Here's the relevant portion of my webpack.config.js:

entry: {
    "polyfills": "./App/polyfills.ts",
    "vendor": "./App/vendor.ts",
    "firstapp": "./App/bootfirst.ts",
    "secondapp": "./App/bootsecond.ts"
},
resolve: {
    extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html']
},
output: {
    path: process.cwd() + "/wwwroot",
    publicPath: "/js/",
    filename: "js/[name].js"
},

Answer 1

Sadly, I've had to use this atrocity to keep going. Please someone help me find the right solution to this.

entry: {
    "polyfills": "./App/polyfills.ts",
    "vendor": "./App/vendor.ts",
    "app": "./App/bootfirst.ts"
    //"app": "./App/bootsecond.ts"
},
resolve: {
    extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html']
},
output: {
    path: process.cwd() + "/wwwroot",
    publicPath: "/js/",
    filename: "js/[name].first.js"
    //filename: "js/[name].second.js"
},