使用共享供应商（webpack 2＆amp; Angular 2）加载webpack 2库的问题

Question

我有一个正常的角度2应用程序正在使用webpack 2（工作）编译，我正在编译一个单独的webpack库（工作）引用相同版本的角度，但将在运行时使用脚本加载器加载。

我加载已编译的库，它开始执行，但随后会遇到以下内容：

  

无法读取属性＆＃39;组件＆＃39;未定义的

＆＃39;组件＆＃39;它试图加载的是@ angular / core在调用的角度2应用程序中提供的（这是在根应用程序正在使用它时加载的）。

import { Component } from "@angular/core";

据我所知，在加载已编译的库时，内部webpack_require未与根应用程序同步并通知它已加载@angular组件。

我的webpack配置：

module.exports = [
  {
    entry: {
      app: "./src/app/main.ts",      // The root application
      vendor: "./src/app/vendor.ts"  // The file containing the @angular vendor files
    },
    module: ...,
    resolve: {
      extensions: [".ts", ".js"]
    },
    output: {
      filename: "[name].js",
      path: path.resolve(__dirname, "../build/dev")
    },
    plugins: [
      new webpack.optimize.CommonsChunkPlugin({
        names: ["app", "polyfills"]
      }),
      new webpack.ContextReplacementPlugin(
        /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
        "./src",
        {}
      ),
      new ExtractTextPlugin("styles.css"),
      new HtmlWebpackPlugin({
        template: "src/index.html"
      })
    ]
  },

  {
    entry: {
      "module/dashboard/dashboard": "./src/module/dashboard/dashboard.module.ts"
    },
    externals: [
      "@angular/common",
      "@angular/compiler",
      "@angular/core",
      "@angular/forms",
      "@angular/http",
      "@angular/platform-browser",
      "@angular/platform-browser-dynamic",
      "@angular/router"
    ],
    module: ...,
    resolve: {
      extensions: ['.ts', '.js', '.json']
    },
    output: {
      filename: "[name].js",
      path: path.resolve(__dirname, "../build/dev"),
      library: "DashboardModuleLibrary",
      libraryTarget: "umd"
    },
    plugins: [
      new webpack.ContextReplacementPlugin(
        /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
        "./src",
        {}
      ),
      new ExtractTextPlugin("styles.css"),
    ]
  }

非常感谢任何帮助