延遲加載模塊angular 2和asp-net核心

我正在使用asp-net core和angular 2一個web項目。我想在當前的應用程序中實現模塊延遲加載的概念，但它不適用於我嘗試幾乎所有可用的解決方案。延遲加載模塊angular 2和asp-net核心

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()] 
    }

請建議我在做什麼錯。

來源

2017-02-09 RaviMittal

路徑的裝載機到你家的路由可能需要一些幫助。這可能是我缺乏理解，但在一個項目中，我有懶惰加載我有以下...'{路徑：'食譜'，loadChildren：'應用程序/食譜/ recipes.module＃RecipesModule'}， '注意它給出了以'app'開頭的路徑，而前面沒有'。/'。試試嗎？ – Jarvis

另外一件你沒有提及的是你正在運行的是哪個進程會導致你的錯誤。你試圖建立/編譯？你在做AoT嗎？你只是想通過npm運行本地服務器運行或什麼？ – Jarvis

用戶登錄到應用程序後，我想重定向到主頁，我通過延遲加載，這是其中不工作的地方加載的主頁 – RaviMittal

檢查你的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' } 
     ] 
    }

來源

2017-02-09 17:33:55

我喜歡它：['awesome-typecript-loader？silent = true'，'angular2-模板加載器'，'angular2-router-loader']而不是加載器 – RaviMittal

更新我的問題，你可以檢查完整配置 – RaviMittal

我使用「webpack」：「^ 2.2.0」，按照新的webpack module.loaders是現在module.rules，https://webpack.js.org/guides/migrating/ – RaviMittal

延遲加載模塊angular 2和asp-net核心

回答

相關問題