Angular - Determine whether to use BrowserAnimationsModule or NoopAnimationsModule at runtime by importing both and utilizing Ahead of Time compilation

Question

Angular - Determine whether to use BrowserAnimationsModule or NoopAnimationsModule at runtime by importing both and utilizing Ahead of Time compilation

The issue at hand is:

I am trying to selectively import the NoopAnimationsModule only when I'm using Internet Explorer. In my app.module's imports array, I currently have:

imports: [AppConfig.IS_IE ? NoopAnimationsModule : BrowserAnimationsModule, .... ]

While this setup works during development, it encounters problems in production. I suspect that AOT compilation may be causing issues, placing the import before reaching the browser.

After some deliberation, I realized that importing both modules and configuring them at runtime might be a viable solution to determine which module's providers to use.

It's important to note that both of these modules offer similar services but differ in how they handle animations in Angular.

Is there a way to successfully implement this approach?

angular typescript jit aot

Answer 1

Answer №1

That is quite intriguing. Indeed, while AoT used to prevent this issue, it seems that with Ivy, the ability to execute it in your preferred manner should already exist. However, a dynamic value like that may not currently work as intended.

_{I just confirmed through testing that indeed, with a dynamic value, the functionality does not perform as expected at the moment.}

If you are using Angular 9 or later, try implementing the following approach:

Assuming that your AppConfig.IS_IE is defined before importing the animation module, you could potentially achieve the desired outcome by creating a customized animations module. This solution leverages a specific property called ɵinj, which is not part of the public API and thus may change in future versions:

@NgModule({
  exports: [BrowserModule],
})
export class ConfigAnimationsModule {
  static forRoot(isIE: boolean) {
    return {
      ngModule: ConfigAnimationsModule,
      providers: isIE
        ? NoopAnimationsModule.ɵinj.providers
        : BrowserAnimationsModule.ɵinj.providers
    };
  }
}

Once implemented, you can import it as follows:

imports: [
  ConfigAnimationsModule.forRoot(AppConfig.IS_IE),
  //...
]

For Angular versions up to 8, you may utilize the private property ngInjectorDef. Please note that this method has not been tested extensively, so results may vary:

@NgModule({
  exports: [BrowserModule],
})
export class ConfigAnimationsModule {
  static forRoot(isIE: boolean) {
    return {
      ngModule: ConfigAnimationsModule,
      providers: isIE
        ? NoopAnimationsModule['ngInjectorDef'].providers
        : BrowserAnimationsModule['ngInjectorDef'].providers
    };
  }
}

Answer 2

That is quite intriguing. Indeed, while AoT used to prevent this issue, it seems that with Ivy, the ability to execute it in your preferred manner should already exist. However, a dynamic value like that may not currently work as intended.

_{I just confirmed through testing that indeed, with a dynamic value, the functionality does not perform as expected at the moment.}

If you are using Angular 9 or later, try implementing the following approach:

Assuming that your AppConfig.IS_IE is defined before importing the animation module, you could potentially achieve the desired outcome by creating a customized animations module. This solution leverages a specific property called ɵinj, which is not part of the public API and thus may change in future versions:

@NgModule({
  exports: [BrowserModule],
})
export class ConfigAnimationsModule {
  static forRoot(isIE: boolean) {
    return {
      ngModule: ConfigAnimationsModule,
      providers: isIE
        ? NoopAnimationsModule.ɵinj.providers
        : BrowserAnimationsModule.ɵinj.providers
    };
  }
}

Once implemented, you can import it as follows:

imports: [
  ConfigAnimationsModule.forRoot(AppConfig.IS_IE),
  //...
]

For Angular versions up to 8, you may utilize the private property ngInjectorDef. Please note that this method has not been tested extensively, so results may vary:

@NgModule({
  exports: [BrowserModule],
})
export class ConfigAnimationsModule {
  static forRoot(isIE: boolean) {
    return {
      ngModule: ConfigAnimationsModule,
      providers: isIE
        ? NoopAnimationsModule['ngInjectorDef'].providers
        : BrowserAnimationsModule['ngInjectorDef'].providers
    };
  }
}

Angular - Determine whether to use BrowserAnimationsModule or NoopAnimationsModule at runtime by importing both and utilizing Ahead of Time compilation

Answer №1

Similar questions

Issue in Angular 6: TS2339 error - The property 'scrollUp' is not found on type 'JQueryStatic'

Establishing the correct data type to be returned from a fetch function in order to align with a specific custom type

Unresolved peer dependencies in Angular 2

Delaying the tap after emitting an action in the Ngrx store

steps for signing in to garmin account with javascript

Best practices for organizing an array of objects in JavaScript

The inability to load tsc.ps1 is due to the system's script running restrictions

The ForbiddenError has struck again, this time wreaking havoc in the realms of Node.js, Express.js

When the request's credentials mode is set to 'include', the 'Access-Control-Allow-Origin' header value in the response should not be the wildcard character '*'

`Understanding the outcome type by assessing the (potential) attributes with TypeScript`

What is the best way to arrange a list in Angular2 using AngularFire2's FirebaseListObservable?

What is the best way to choose a slug page using the useRouter in Next

"Error: The ionic-angular tabs module could not be located

Easy steps for importing node modules in TypeScript

The 'subscribe' property is not found in the type 'OperatorFunction<Response, Recipe[]>'

Using Nginx and Tomcat to Serve a Spring and Angular Application

The Next Js version "next" is at "14.2.3", indicating that the page is experiencing issues

Angular Component Provider based on conditions

Issues arise with transferring React component between different projects

The subcategory was not factored into my npm package