0

Context

I have a basic administration page, that has two implementations, depending on a parameter in the server.

Here is the configuration I'm using for the router:

      {
        path: 'projects',
        loadChildren: 'app/...#ProjectsAModule',
        canLoad: [PluginGuard],
        data: {
          requiredPlugins: ['foo'],
        },
      },
      {
        path: 'projects',
        loadChildren: 'app/...#ProjectsBModule',
        canLoad: [PluginGuard],
        data: {
          requiredPlugins: ['bar'],
        },
      },

PluginGuard is a simple guard that calls the server to check the value of a field named plugin.

By design, both of these routes cannot load at the same time, as the plugin can only have one value at a given time.

Problem

The issue is that only the first entry is taken into account, which means that when plugin has the value foo, I can load the module ProjectsAModule but when it has the value bar, ProjectsBModule doesn't load at all, no error message neither.

My guess is that it's because two routes cannot have the same path, at all, but do we have a way to implement this kind of behavior properly? By properly I mean not using a *ngIf in a container component to show one component or another base on plugin's value.

Community
  • 1
  • 1
Supamiu
  • 8,501
  • 7
  • 42
  • 76
  • I dont think that you can have 2 separates components under the same path without "hacking" the framework. why dont you put them under same parent, which he is deciding which plugin he should use and redirect accordingly ? – dAxx_ Aug 08 '18 at 15:01
  • Angular won't support lazy loading same module with same route. You can keep one module and access the same route (/projects). But you can pass data as query params. In CanLoad AuthGuard, you can use NavigationEnd and read the query param and proceed furthur – Suresh Kumar Ariya Aug 08 '18 at 15:08

0 Answers0