javascript – Angular 5,在路由器中使用Angular cli非延迟加载模块

构建angular5应用程序.该应用程序需要一些备用布局.

我的方法是处理主app模块路由文件中的高级路由.所述文件将路由映射到模块.对于非必要的速度驱动页面,模块将延迟加载,而不是为速度关键页面延迟加载：

app-layout-router.module.ts文件：

import {NgModule} from '@angular/core';
import {PreloadAllModules,RouterModule,Routes} from '@angular/router';
import {PublicLayoutModule} from '@modules/layouts/public/public-layout.module';
import {AuthenticatedLayoutModule} from '@modules/layouts/authenticated/authenticated-layout.module';

const routes: Routes = [{
    path: '',loadChildren: () => PublicLayoutModule,},{
    path: 'dashboard',loadChildren: () => AuthenticatedLayoutModule,}];

@NgModule({
    imports: [RouterModule.forRoot(
        routes,{
            useHash: false,preloadingStrategy: PreloadAllModules
        }
    )],exports: [RouterModule],})

export class AppLayoutRouter {
}

不在仪表板下的所有路线都将根据SEO原因进行预渲染.但是,在经过身份验证的布局中,我可以选择通过延迟加载后续模块来中断应用程序.例如,这是经过身份验证的模块路由器文件的内容：

import {NgModule} from '@angular/core';
import {RouterModule,Routes} from '@angular/router';
import {AuthenticatedLayoutComponent} from './authenticated-layout.component';

const routes: Routes = [{
    path: '',component: AuthenticatedLayoutComponent,children: [{
        path: '',loadChildren: '../../dashboard/dashboard.module#DashboardModule'
    }]
}];

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

export class AuthenticatedLayoutRoutingModule {
}

理论上这是有效的,但在实践中我遇到了错误.预期的结果是角度cli webpack将为仪表板模块创建一个块,应用程序将通过延迟加载来获取它.实际上,结果是路由器无法加载仪表板模块,因为它认为模块的路径不正确.

这是抛出的错误：

Error: Cannot find module '../../dashboard/dashboard.module'.
    at eval (eval at ../../../../../src/$$_lazy_route_resource lazy recursive (main.bundle.js:6),


我可以通过将所有模块路由设置为延迟加载(即延迟加载所有内容)来解决此问题…但我不想为面向公众的页面(例如登录页面)执行此操作.我可以预先渲染页面,用户将获得一个预先渲染的index.html文件用于登录..但是无法与页面交互,直到路由器通过延迟加载从后端获取模块. .
还有其他人解决了这个问题吗？如果是这样怎么样？
这是有问题的代码失败：https://github.com/jdcrecur/ang5ModuleRouting


最佳答案
我遇到了同样的问题.这可能是angular-cli的错误.我仍然不确定错误是在cli中还是在我们的代码中！
正如Gerrit在另一个问题here中提到的那样,仍然可以使用aot：ng serve –aot进行编译
我还通过将github中提到的angular-cli从1.7.2降级到1.6.8来解决了这个问题,这是最后一个似乎适用于我们案例的CLI版本.
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

javascript – Angular 5,在路由器中使用Angular cli非延迟加载模块

相关推荐