Webpack與Angular-loadChildren找不到模塊

Question

我正在嘗試加載我購買的與Angular4兼容的管理員，但是在配置項目以使其與Webpack一起運行時遇到了一些麻煩：

const routes: Routes = [
{
    "path": "",
    "component": ThemeComponent,
    "canActivate": [AuthGuard],
    "children": [
        {
            "path": "index",
            "loadChildren": './pages/default/index/index.module#IndexModule'
        }
    ],
    {
        "path": "**",
        "redirectTo": "404",
        "pathMatch": "full"
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class ThemeRoutingModule {}

當我運行該應用程序時，我在控制台中收到以下消息：

NavigationError {id：1，url：“ /”，錯誤：錯誤：找不到模塊'./pages/default/index/index.module'。 在eval時（在./src/main/weba…處為eval）錯誤：錯誤：在eval時（在./src/main/webapp/admin/處為eval，找不到模塊'./pages/default/index/index.module'。在ZoneDelegate.invoke（webpack-internal：///./node_modules/zone）上進行應用程序懶惰遞歸（ http：// localhost：8080 / admin / app / main.bundle.js：6：1 ）：5：9）。 js / dist / zone.js：391：26）在ZoneDelegate.invoke上的Object.onInvoke（webpack-internal：///./node_modules/@angular/core/@angular/core.es5.js：4094：33） （webpack-internal：///./node_modules/zone.js/dist/zone.js：390：32）在Zone.run（webpack-internal：///./node_modules/zone.js/dist/zone。 js：141：43）在ZoneDelegate.invokeTask（webpack-internal：///./node_modules/）的評估（webpack-internal：///../node_modules/zone.js/dist/zone.js：831：57）在ZoneDelegate上的Object.onInvokeTask（webpack-internal：///./node_modules/@angular/core/@angular/core.es5.js：4085：33）上的zone.js / dist / zone.js：424：31） .invokeTask（webpack-internal：///../node_modules/zone.js/dist/zone.js：423：36）在Zone.runTask（webpack-internal：///./node_modules/zone。 js / dist / zone.js：191：47）id：1 url：“ /”

我知道該模塊的路徑是正確的，因為我可以毫無問題地將該模塊導入同一文件中：

import {IndexModule} from './pages/default/index/index.module';

我的Webpack配置使用它來處理打字稿：

module: {
    rules: [{
        test: /\.ts$/,
        enforce: 'pre',
        loaders: 'tslint-loader',
        exclude: ['node_modules', new RegExp('reflect-metadata\\' + path.sep + 'Reflect\\.ts')]
    },
    {
        test: /\.ts$/,
        loaders: [
            'awesome-typescript-loader',
            'angular-router-loader?debug=true',
            'angular2-template-loader'
        ]
    }

我沒有注意到我在做錯什么嗎？

Answer 1

延遲加載的模塊的位置應從app文件夾開始。 嘗試像這樣將app關鍵字添加到您的字符串中

loadChildren: 'app/theme/pages/default/index/index.module#IndexModule'},

我也覺得你在這里缺少花括號

{
    "path": "",
    "component": ThemeComponent,
    "canActivate": [AuthGuard],
    "children": [
        {
            "path": "index",
             loadChildren: 'app/theme/pages/default/index/index.module#IndexModule'},\

        }
    ]
} <-------- ,

Answer 2

我發現可以使用函數導入，而不是使用模塊路徑導入。 這樣工作：

{
    "path": "index",
    "loadChildren": () => IndexModule
}

Answer 3

如果您使用的是webpack，則需要angular-router-loader ：

loaders: [
  {
    test: /\.ts$/,
    loaders: [
      'awesome-typescript-loader',
      'angular-router-loader'
    ]
  }
]

創建一個加載其他路由的模塊：

const routeModule:ModuleWithProviders = RouterModule.forChild(routes);
@NgModule({
    imports:      [ routeModule ],
    declarations: [ ... ]
})
export class InboxModule{ }

創建路由並引用延遲加載的模塊（路徑是相對的）：

import { Routes } from '@angular/router';

export const routes: Routes = [
  { path: 'index', loadChildren: './theme/pages/default/index/index.module#IndexModule' }
];