Adding a route prefix for an outside module's routes?

Question

In my app.module.ts file , I import (eagerly) LoginModule which has its own routing module (login-routing.module.ts - let's say I can't change it)

I also import another routing module (AppRoutingModule - which deals with all lazy modules) .

app.module.ts:

    @NgModule({
                  bootstrap   : [AppComponent],
                  imports     : [
                      ...
                      LoginModule,
                      AppRoutingModule
                      ...
                  ]...

The login-routing.module.ts file has its own routing :

login-routing.module.ts :

  const LoginRoutes: Routes = [
    {
        path     : 'welcome',
        component: WelcomeComponent
    },
    {
        path     : 'loginSms',
        component: LoginSmsComponent
    },
    {
        path     : 'loginPassword',
        component: LoginPasswordComponent
    },
    {
        path     : 'passwordExpired',
        component: PasswordExpiredComponent
    }
];


@NgModule({
            ...
          })
export class LoginRoutingModule
    {
    }

And AppRoutingModule has :

const routes: Routes = [
    /* {    path      : "",    redirectTo: "/welcome",    pathMatch : "full"},*/
    {
        path    : 'app',
        children: [
            {
                path        : "home",
                loadChildren: "~/modules/home/home.module#HomeModule"
            },
            {
                path        : "payments",
                loadChildren: "~/modules/payments/payments.module#PaymentsModule"
            }
        ]
    }
 ...

Please notice that I've used ComponentLess route with prefix app just to organize routes.

So where is the problem?

I want to add the Login routes to "app routes" , so that I will access login routes as : app/login/...

In other words - now - AppRoutingModule should be :

  path    : 'app',
            children: [
                {
                    path        : "home",
                    loadChildren: "~/modules/home/home.module#HomeModule"
                },
                {
                    path        : "payments",
                    loadChildren: "~/modules/payments/payments.module#PaymentsModule"
                },
                {
                    path        : "login",
                     //but how o I load all `login-routing.module.ts` routes here ?

                },

            ]

But LoginModule should be eager loaded and not lazy loaded , so I can't use loadChildern.

Question:

In short , how can I access the login module routes as :

app/login/loginPassword

instead of

/loginPassword

?

If the real reason for doing it this way, is to have the LoginModule eagerly loaded, you can also use the `preloadingStrategy` of the router — Poul Kruijt, Jun 13 '18 at 11:05
@PierreDuc Oh. So you mean to add it as if it was lazy ( `loadChildren`) , and just to add the `preloadingStrategy ` hint ? — Royi Namir, Jun 13 '18 at 11:06
@PierreDuc No thanks. I got it. BTW I saw this `answer` [here also](https://stackoverflow.com/a/41021387/859154) - but he loaded only the array routes and not the route **module** . I don't use in my app - plain routes array. I use routing **modules** everywhere. — Royi Namir, Jun 13 '18 at 11:07
That's also possible, the main difference will be that your initial bundle on load will be bigger if you do it that way — Poul Kruijt, Jun 13 '18 at 11:08
@PierreDuc mmmm Are you sure that `PreloadAllModules` === as if I was loading it like I did ? becuase they say : ["as quickly as possible"](https://angular.io/api/router/PreloadAllModules) — Royi Namir, Jun 13 '18 at 11:11
`PreloadAllModules` will load all your lazy modules. That's not what you want. If you want, when the application is loaded, to load the login module bundle, you have to use a custom preloading strategy. If you want the LoginModule to be part of your initial bundle, then you just add the routes from the module to the app module (like in the other question) — Poul Kruijt, Jun 13 '18 at 11:14
@PierreDuc But I can't load the login routes array just like that.. The Login [routes are in a module](https://i.imgur.com/NGfl8Gx.jpg) . I can't just import this array. it is exported along with the `LoginRoutingModule` — Royi Namir, Jun 13 '18 at 11:20
You cannot use the `LoginRoutingModule` with the second option :) can't see a way to make it work. You should just import the routes in your `AppRoutingModule` and inside your `LoginModule` remove the `LoginRoutingModule`. And if that's not an option, you should use a custom preloadingStrategy — Poul Kruijt, Jun 13 '18 at 11:24

score 0 · Answer 1 · answered Jun 13 '18 at 11:09

0

did you add RouterModule.forRoot([ { path: '', redirectTo: 'login', pathMatch: 'full' } like this in app.module

answered Jun 13 '18 at 11:09

linto johny

137
1
2
9

This will not help . the issue is not the inital redirection. but the whole login routes should be prefixed from now on. Also - this should be a comment – Royi Namir Jun 13 '18 at 11:12

Adding a route prefix for an outside module's routes?

1 Answers1