LazyLoading and config angular NgModule

Question

I have a module 'DevicePreview' that have some routes and can be displayed both from root and from inside another module 'Content'.

When called from root DevicePreview has routes /a, /b and /c available, when called from Content it has /a, /b and /z.

Right now I'm exporting 2 arrays of routes like this (names are faked):

export const DEVICE_ROOT_ROUTES: Routes = [
  {
    path: 'a',
    component: DeviceAComponent
  },  {
    path: 'b',
    component: DeviceBComponent
  },  {
    path: 'c',
    component: DeviceCComponent
  }
];

export const DEVICE_CONTENT_ROUTES: Routes = [
  {
    path: 'a',
    component: DeviceAComponent
  },  {
    path: 'b',
    component: DeviceBComponent
  },  {
    path: 'z',
    component: DeviceZComponent
  }
];

Now I want to move this to lazy loaded module. AFAIK to lazy load modules I have to do this:

 {
    path: 'device',
    loadChildren: 'app/+device/device.module#DeviceModule'
  }

As I don't want to enable Z in root nor C in Component and neither generating 2 different modules I'm thinking of configuring DeviceModule when loading through a .forChild(options)

How could I call forChild when lazy loading? I may consider other approaches too.

Thanks!

I created a dynamic form (render dynamically components) here: http://stackoverflow.com/questions/43143956/angular2-use-pipe-to-render-templates-dynamically It may help you to have a different perspective on how to render dynamically a component — SrAxi, Apr 27 '17 at 14:35
I'm not sure I understand the question, but even with lazy loading all routes are merged into one set managed by the single router instance. To answer your question, when doing lazy loading use loadchildren instead of children. — DeborahK, Apr 27 '17 at 14:35
it's not a problem of dynamically loading elements but of reusing a whole router tree on 2 different modules with small changes — subarroca, Apr 27 '17 at 14:41
There's a petition in github to cope with it: https://github.com/angular/angular/issues/15304 — subarroca, Apr 28 '17 at 11:43

score 0 · Answer 1 · answered May 14 '18 at 20:58

I'm not sure i follow what you are trying to accomplish but, have you heard of the AuthGuard? You can use for example to verify if a route can be accessed by using canActivate.

Ex:

{ 
        path: 'device', 
        loadChildren: 'app/+device/device.module#DeviceModule', 
        canActivate: [AuthGuard] 
},

And then:

@Injectable()
export class AuthGuard implements CanActivate {

constructor() {}

 canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) 
 {
   //Your logic here to check if for example the module trying
   //to access the route is actually allowed to do that

 }
}

docs: https://angular.io/api/router/CanActivate

sorry, I'm not on that project anymore so I cannot provide any feedback about the usefulness. But my problem was not about Auth, I wanted to use the same subtree in 2 different parts of the app, once you were already logged in — subarroca, May 16 '18 at 13:33

LazyLoading and config angular NgModule

1 Answers1