如何使用angular4和webpack ngtools / webpack捆绑手动延迟加载的模块

时间:2017-09-28 07:30:42

标签: angular typescript webpack aot

我在应用程序中有多个模块。我做了一些模块,手动延迟加载如下

 this.moduleLoader.load('Infor.MinglePortal/tsScripts/usersettings/usersettings.module#UserSettingsModule')
        .then((moduleFactory: NgModuleFactory<any>) => {
            const vcRef = this.vcRef;
            const ngModuleRef = moduleFactory.create(vcRef.parentInjector);
            const comp = ngModuleRef.injector.get(LazyLoadConfig).component;
            const compFactory = ngModuleRef.componentFactoryResolver.resolveComponentFactory(comp);
            this.compRef = vcRef.createComponent(compFactory, 0, ngModuleRef.injector);
            let info = {
                componentRef: this.compRef,
                factory: compFactory,
                moduleRef: ngModuleRef
            };


        });

我无法将其与webpack3,ngtools / webpack和aot捆绑在一起。

这是我的tsconfig和webpack.config.js

enter code{
"compilerOptions": {
  "module": "es2015",
  "moduleResolution": "node",
  "target": "es5",
  "noImplicitAny": false,
  "sourceMap": true,
  "mapRoot": "",
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "lib": [
    "es2015",
    "dom"
  ],
  "outDir": "lib",
  "skipLibCheck": true,
  "baseUrl": ".",


},
"exclude":["./Abc.AbcPortal/tsScripts/abc-aot.ts", "./build/*", "./dist/*","node_modules"],
"angularCompilerOptions": {
  "debug": true,
  "entryModule":"./Infor.AbcPortal/tsScripts/abc/abc.module#abcModule"
}

}

webpack.config.js

const ngToolsWebpack = require("@ngtools/webpack");
const path = require("path");

module.exports = {
  resolve: {
    extensions: [".ts", ".js"]
  },
  node: {
    net: "empty",
    tls: "empty"
  },
  entry: "./abc.abcPortal/tsScripts/main.ts",
  output: {
    path: path.resolve(__dirname, "./build/"),
    publicPath: "/build/",
    filename: "[name].bundle.js",
    chunkFilename: "[id].chunk.js"
  },
  plugins: [
    new ngToolsWebpack.AotPlugin({
      tsConfigPath: "./tsconfig-web3.json"
    })
  ],
  module: {
    loaders: [
      { test: /\.css$/, loader: "raw-loader" },
      { test: /\.html$/, loader: "raw-loader" },
      { test: /\.ts$/, loader: ["@ngtools/webpack"] }
    ]
  }

我的问题是我无法使用webpack + aot + ngtools / webpack加载延迟加载的模块。

当我加载延迟加载的模块时,我收到以下错误。

main.bundle.js:2387 ERROR错误:未捕获(在承诺中):错误:找不到模块&abc.MinglePortal / tsScripts / usersettings / usersettings.module.ngfactory&#39;。 错误:找不到模块&#39; abc.MinglePortal / tsScripts / usersettings / usersettings.module.ngfactory&#39;。

请帮帮我。

0 个答案:

没有答案