Question

我有一些项目，我想使用延迟加载组件。在 app.module.ts 文件中，我从导入部分3记录中删除了我的路由到不同的组件。在我的app-routing.module.ts中，我创建了APP_ROUTES，如下所示：

const APP_ROUTES : Route[] = [
    { 
            path: '', pathMatch: 'full', 
        redirectTo: 'login'
    },
    { 
        path: 'cars', 
        loadChildren: 'app/cars/cars.module#CarsModule' 
    }
];

@NgModule({
        imports: [
            RouterModule.forRoot(APP_ROUTES)
        ],
        exports: [
            RouterModule
        ]
})

我有一个名为 cars 的主文件夹，我从 app.module.ts 粘贴 CarsRoutingModule 就像我之前说的那样进入 cars.module.ts （进口部分）。我在汽车模块中创建了ROUTES到 cars-routing.module.ts ，如下所示：

const CARS_ROUTES : Route[] = [
    {
        path: '',
        component: <any> CarsComponent,
        children: [
            {
                path: '',
                component: <any>CarsListComponent
            },
            { 
                path: ':id', 
                component: <any>CarDetailsComponent,
                resolve: { car: CarResolve }
            }
        ]
    }
];

@NgModule({
        imports: [
            RouterModule.forChild(CARS_ROUTES)
        ],
        exports: [
            RouterModule
        ]
})

我认为没关系。好的，所以我有第二个模块 login.module.ts 我从app.module.ts粘贴了LoginRoutingModule，就像我之前说的那样进入 login.module.ts （部分导入）。我创建了如下的ROUTES：

const LOGIN_ROUTES : Route[] = [
     { 
         path: 'login', 
         component: <any>LoginComponent,
        }
];

@NgModule({
        imports: [
            RouterModule.forChild(LOGIN_ROUTES)
        ],
        exports: [
            RouterModule
        ]
})

它对我来说也很好看。我编译我的项目没有错误。我有登录屏幕，所以它很好，但当我完成登录和密码，我进入仪表板 - 我没有看到像chunk.js（进入 Sources 标签），如下所示：

猜猜但是如果我错了就纠正我 - 在角度4+我们没有chunk.js文件？我检查了别的东西。当我的projekt没有延迟加载时，我的登录网站上有更多模块：

就像我们可以在左侧看到我在ng文件夹中的调试器： AppModule ， CarsModule ， CoreModule ， LoginModule ， SharedModule 。当我在同一个地方添加延迟加载时，我只有 AppModule ， CoreModule ，如下所示：

现在，我可以确定我的延迟加载效果不错吗？

Answer 1

我知道出了什么问题。代码非常好，但我使用了 ng serve 。当我使用 ng serve --aot （Ahead-of-Time）时，我有cars.module.chunk.js！

延迟加载不会在Angular

1 个答案: