Question

我有一条用户从电子邮件输入的路由，并且他们第一次点击该应用程序时，大约有90％的机会使他们被重定向到通配符捕获，而不是他们应该点击的特定路由。

如果它们刷新，或再次通过相同的链接进入站点，则很有可能他们将转到应该加载的组件。我想每次加载路由，不知道loadChildren偶尔运行得太慢还是路由器只是随机推倒。这是路由：

export const ROUTES: Routes = [
    {
        path: 'login',
        loadChildren: 'LoginModule', // assume this is correct
        data: { routeIndex: 1 }
    },
    { path: '', pathMatch: 'full', redirectTo: 'login/head' },
    { path: '**', redirectTo: 'login/head' }
];

登录模块具有符合以下条件的路由

export const LOGIN_ROUTES: Routes = [
    {
        path: 'first-page',
        component: FirstPageComponent
    },
    {
        path: '',
        component: LoginComponent,
        children: [
            {
                path: 'somewhereelse',
                component: BlahBlahComponent,
                data: { routeIndex: 0 }
            }
        ]
    },
    { path: '', pathMatch: 'full', redirectTo: 'login/head' },
    { path: '**', redirectTo: 'login/head' }
]

它们发送到的路由是：“ / login / first-page” ，但是相反，它们在第一次加载时就被发送到“ / login / head” 的应用程序。

谁能告诉我为什么会发生这种情况以及如何解决？

我还应该注意，这似乎仅在将其部署在服务器上而不运行本地主机时才会发生。就我的测试而言，它始终会在本地进行。

Answer 1

这是您如何在角度8中延迟加载路线

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then(mod => mod.CustomersModule)
  },
  {
    path: 'orders',
    loadChildren: () => import('./orders/orders.module').then(mod => mod.OrdersModule)
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

对于以前的版本

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'lazymodule', loadChildren: './lazymodule/lazymodule.module#LazyModuleModule' }
];

您需要为要延迟加载的模块添加正确的路径

Update尝试像这样更新路由，以查看其是否有效

export const LOGIN_ROUTES: Routes = [
    {
        path: 'first-page',
        component: FirstPageComponent
    },
    {
        path: '',
        component: LoginComponent,
        children: [
            {
                path: 'somewhereelse',
                component: BlahBlahComponent,
                data: { routeIndex: 0 }
            }
        ]
    },
    { path: '**', pathMatch: 'full', redirectTo: 'login/head' }
]

Angular loadChildren路由随机失败，默认为通配符

1 个答案: