javascript - 延迟加载不会在 Angular 中创建 chunk.js

标签 javascript node.js angular lazy-loading

我有一些项目,我想对组件使用延迟加载。在 app.module.ts 文件中,我从导入部分第三条记录中删除了我到不同组件的路由。在我的 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 的主文件夹,我将 CarsRoutingModuleapp.module.ts 粘贴到 中>cars.module.ts(部分导入)。我在我的汽车模块中创建了 ROUTES,如下所示:

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 选项卡),如下所示: Debugger screen

猜猜,但如果我错了请纠正我 - 在 angular 4+ 中我们没有 chunk.js 文件?我检查了其他东西。当我的项目中没有延迟加载时,我的登录站点上有更多模块: enter image description here

就像我们在左侧看到我的调试器在 ng 文件夹中一样,我有:AppModuleCarsModuleCoreModuleLoginModule , 共享模块。 当我在同一个地方添加延迟加载时,我只有 AppModuleCoreModule 和如下所示: enter image description here

那么现在,我可以确定我的延迟加载工作正常吗?

最佳答案

我知道哪里出了问题。代码非常好,但我使用了 ng serve。当我使用 ng serve --aot(提前)并且我有 cars.module.chunk.js!

关于javascript - 延迟加载不会在 Angular 中创建 chunk.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48459917/

相关文章:

javascript - 如何返回最大键为:value using lodash?的嵌套对象

javascript - 是否可以使用 IFRAME(无需重新加载页面)来模拟响应式设计的方向和尺寸变化?

sql - 如何使用 Sequelize 对连接表生成查询?

node.js - express 请求.isAuthenticated

javascript - 为什么 AngularJS $onChanges 没有注意到数组发生了变化?

javascript - 在自己的行中纠正数组函数的术语

javascript - node.js - 重载函数

angular 2 从服务订阅 bool 值

javascript - Anuglar2 生命周期事件作为 rxjs Observable

javascript - Angular Material 2 选项卡动态内容