代码之家 › 专栏 › 技术社区 › brevleq

角度与网页包-loadChildren无法找到模块

lazy-loading webpack typescript angular

brevleq · 技术社区 · 8 年前

我正在尝试加载我买的一个与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:“/”,错误:错误:找不到模块 ./src/main/weba}错误:错误:找不到模块 ./src/main/webapp/admin/app-lazy递归 ( http://localhost:8080/admin/app/main.bundle.js:6:1 ), :5:9) 在ZoneDelegate。援引 (网页包-internal:///./node_modules/zone.js/dist/zone.js:391:26)在对象onInvoke公司 (网页包-internal:///./node_modules/@角度/核心/@角度/核心。es5.js:4094:33) (网页包-internal:///./node_modules/zone.js/dist/zone.js:390:32)在 (网页包-internal:///./node_modules/zone.js/dist/zone.js:141:43)在评估(网页包-internal:///./node_modules/zone.js/dist/zone.js:831:57) 在ZoneDelegate。调用任务 (网页包-internal:///./node_modules/zone.js/dist/zone.js:424:31)在对象onInvokeTask (网页包-internal:///./node_modules/@角度/核心/@角度/核心。es5.js:4085:33) 在ZoneDelegate。调用任务 (网页包-internal:///./node_modules/zone.js/dist/zone.js:191:47)id: 1 url:“/”

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

我的网页包配置正在使用它来处理typescript:

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

有什么我没有注意到的错误吗?

3 回复 | 直到 8 年前

brijmcq 8 年前

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'},\

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

brevleq 8 年前

我发现可以使用函数导入,而不是使用模块路径导入。它是这样工作的:

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

-1

Michael Kang 8 年前

如果您使用的是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' }
];

推荐文章

Brandon Mulas · 如何在electronic+webpack中从Main进程获取javascript对象到Renderer进程

1 年前