Question

我有一些延迟加载的路由，如下所示：

const routes: Routes = [
    {
        path: ':lang',
        loadChildren: './components/home/home.module#HomeModule',
        // redirectTo: "en"
    },
    {
        path: ':id/customers',
        loadChildren: './components/customers/customers.module#CustomersModule'
    },
    {
        path: 'products',
        loadChildren: './components/products/products.module#ProductsModule'
    }
];

当我使用以下网址打开页面时：http://localhost:4200/en，它可以正常工作。但是用户不知道将en参数添加到url中，因此该页面不会在没有参数的情况下加载。因此，我必须将其重定向到/en。但是当我使用redirectTo: "en"时，出现以下错误：

Error: Invalid configuration of route ':lang': redirectTo and loadChildren cannot be used together

我发现了有关此错误的信息，但与我的情况无关。有想法吗？

Answer 1

在路由:lang上设置redirectTo表示：如果用户在该路由上，则应将其重定向到/en。那不是你想要的。当路径为根路径时，您要将用户重定向到/en。因此，您需要添加一个空路径路由并从此处重定向：

{
    path: '',
    redirectTo: '/en',
    pathMatch: 'full'
}

Answer 2

首先，您的路线之间：lang和：id之间存在冲突。

您可以尝试：

theObjectOfYourIds/:id/customers

和

languages/:lang

对于您的问题，

您不能使用带有loaChildren的redirectTo。

如果要转到'en'，请在组件内部执行策略（例如app.component.ts）。

角度重定向到延迟加载模块中的参数

2 个答案: