3

In my angular (v.4.1.1) applications, I am using drag-and-drop functionality. Basically, everything between tags can be moved around via drag-and-drop.

Animations and preview items work fine in newer Browsers such as Chrome and Edge but in Internet Explorer, I get massive spikes which is why I provide reduced animations and preview functionality for it. I have implemented two versions of the drag NgModule that contain components and services with the same interfaces but with different implementations. However, I don't know a smart way to conditionally import them based on the browser my application is running in.

I have created a method isInternetExplorer() which I can use in my 'imports' array in the module decorators. This solution works only for regular typescript compilation and NOT with AOT-compilation. Is there any way I can get my solution to run in an AOT-enviroment?

Here's a short excerpt to show you what I mean:

@NgModule({
   imports: [  
      isInternetExplorer() ? DragAndMockModule.forRoot() : DragModule.forRoot(), 
      ...
   ],
  ...
})

Thank your for your help.

David Brem
  • 504
  • 2
  • 6
  • 16

1 Answers1

0

I think what you are looking for is to load modules in a lazy manner. Assuming that your modules are self-contained, you can take advantage of the router guards(ROUTING & NAVIGATION) to conditionally load a module. Here is a step by step tutorial on how to achieve this: LAZY MODULE LOADING

Hope it helps.

Radu Cojocari
  • 1,759
  • 1
  • 22
  • 25