Lazy загрузочные модули угловые 2 и ядро ​​asp-net

Question

Я использую asp-net core и угловой 2 веб-проект. Я хочу реализовать модульную ленивую концепцию загрузки в своем текущем приложении, но ее не работающая для меня попытка почти всех доступных решений.

ClientApp \ App \ компоненты \ главная \ 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' } 
     ] 
    }