Load Angular 2 Module only when a condition is met

Viewed 981

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.

1 Answers
Related