延迟加载模块angular 2和asp-net核心

Question

我正在使用asp-net core和angular 2一个web项目。我想在当前的应用程序中实现模块延迟加载的概念，但它不适用于我尝试几乎所有可用的解决方案。

ClientApp \程序\分量\家\ home.routing.module.ts

const routes: Routes = [ 
    { 
     path: 'home', component: HomeComponent, 
     children: [ 
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' }, 
      { path: 'dashboard', component: DashboardComponent } 
     ] 
    } 
] 

export const routableComponents = [DashboardComponent] 
@NgModule({ 
    imports: [CommonModule, RouterModule.forChild(routes)], 
    exports: [RouterModule], 
    declarations: [routableComponents] 
}) 
export class HomeRoutingModule { 
} 

应用路由-module.ts

const routes: Routes = [ 
    { path: '', redirectTo: 'login', pathMatch: 'full' }, 
    { path: 'login', component: LoginComponent }, 
    { path: 'register-user', component: RegisterUserComponent }, 
    { path: 'home', loadChildren: "./components/home/home.routing.module#HomeRoutingModule" }, 
    { path: '**', redirectTo: 'login' } 

我收到这与上述代码错误

EXCEPTION: Uncaught (in promise): TypeError: webpack_require.i(...) is not a function TypeError: webpack_require.i(...) is not a function

也采用这种封装按照建议here

"angular2-router-loader": "0.3.4" 

webpack.config.js

const sharedConfig = { 
     stats: { modules: false }, 
     context: __dirname, 
     resolve: { extensions: ['.js', '.ts'] }, 
     output: { 
      filename: '[name].js', 
      publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix 
     }, 
     module: { 
      rules: [ 
       { 
        test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader', 
        'angular2-router-loader'] 
       }, 
       { test: /\.html$/, use: 'html-loader?minimize=false' }, 
       { test: /\.css$/, use: ['to-string-loader', 'css-loader'] }, 
       { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' } 
      ] 
     }, 
     plugins: [new CheckerPlugin()] 
    } 

请建议我在做什么错。

Answer 1

检查你的WebPack配置应该是这样的，也许你错过了的WebPack

// Configuration in common to both client-side and server-side bundles 
var sharedConfig = { 
    context: __dirname, 
    resolve: { extensions: [ '', '.js', '.ts' ] }, 
    output: { 
     filename: '[name].js', 
     publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix 
    }, 
    module: { 
     loaders: [ 
      { test: /\.ts$/, include: /ClientApp/, loaders: ['ts-loader?silent=true', 'angular2-template-loader', 'angular2-router-loader'] }, 
      { test: /\.html$/, loader: 'html-loader?minimize=false' }, 
      { test: /\.css$/, loader: 'to-string-loader!css-loader' }, 
      { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url-loader', query: { limit: 25000 } }, 
      { test: /\.json$/, loader: 'json-loader' } 
     ] 
    }