Angular redirect to parameter in lazy loaded module

Question

I have some lazy loaded routes as following:

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'
    }
];

When I open the page with this url: http://localhost:4200/en it works fine. But the user doesn't know to add en parameter to the url, so the page doesn't load without parameter. So, I must redirect it to /en. But when I use redirectTo: "en" I get the following errors:

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

I found something about this error, but doesn't relate to my case. Any idea?

When do you want to redirect to /en? Is it when the user is already on /en or on another language route (/fr for example)? No. So redirectTo must not be set on the ':lang' route. It must be set on another route with an empty path. That's when the user should be redirected to /en. — JB Nizet
– JB Nizet, Commented Mar 17, 2019 at 14:27
@JBNizet No, when the user opens domain.com, I want to redirect to domain.com/en. Thanks. setting it to another route with an empty path make it work. — Vahid Najafi
– Vahid Najafi, Commented Mar 17, 2019 at 14:34
@JBNizet If you would post your comment as an answer, I could accept it. Thanks. — Vahid Najafi
– Vahid Najafi, Commented Mar 17, 2019 at 15:01

JB Nizet · Accepted Answer · 2019-03-17 15:03:51Z

4

Setting redirectTo on the route :lang means: if the user is on that route, it should be redirected to /en. That's not what you want. You want to redirect the user to /enwhen the path is the root path. So you need to add an empty path route and redirect from there:

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

answered Mar 17, 2019 at 15:03

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Wandrille · Accepted Answer · 2019-03-17 14:27:15Z

1

First, there is a conflict in your route bewteen :lang and :id.

Can you try:

theObjectOfYourIds/:id/customers

and

languages/:lang

And for your problem,

You can't have a redirectTo with a loaChildren.

If you want to go to 'en', do the strategy inside your components (app.component.ts for example).

answered Mar 17, 2019 at 14:27

Wandrille

6,9274 gold badges27 silver badges46 bronze badges

Collectives™ on Stack Overflow

Angular redirect to parameter in lazy loaded module

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related