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（eval at ./src/main/weba...}错误：错误：找不到模块 './pages/default/index/index.module'。在eval（eval at ./src/main/webapp/admin/app lazy recursive （http://localhost:8080/admin/app/main.bundle.js:6:1），：5：9）在ZoneDelegate.invoke （webpack-internal：///./node_modules/zone.js/dist/zone.js：391：26）at at Object.onInvoke （的WebPack内部：///./node_modules/@angular/core/@angular/core.es5.js：4094：33）在ZoneDelegate.invoke （webpack-internal：///./node_modules/zone.js/dist/zone.js：390：32）at at Zone.run （webpack-internal：///./node_modules/zone.js/dist/zone.js：141：43）at at eval（webpack-internal：///./node_modules/zone.js/dist/zone.js：831：57）在ZoneDelegate.invokeTask （webpack-internal：///./node_modules/zone.js/dist/zone.js：424：31）at at Object.onInvokeTask （的WebPack内部：///./node_modules/@angular/core/@angular/core.es5.js：4085：33）在ZoneDelegate.invokeTask （webpack-internal：///./node_modules/zone.js/dist/zone.js：423：36）at at Zone.runTask （webpack-internal：///./node_modules/zone.js/dist/zone.js：191：47）id： 1网址：“/”

我知道模块的路径是正确的，因为我可以在同一个文件中导入此模块而没有问题：

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' }
];

Angular with Webpack - loadChildren找不到该模块

3 个答案: