feat(animations): add support for disabling animations through BrowserAnimationsModule.withConfig#40731
feat(animations): add support for disabling animations through BrowserAnimationsModule.withConfig#40731crisbeto wants to merge 2 commits intoangular:masterfrom
Conversation
47c1f81 to
e15f294
Compare
There was a problem hiding this comment.
I suppose this is problematic for the AOT compiler. The generic type of ModuleWithProviders has to be a simple type reference, as the compiler needs to statically know the NgModule import graph. The type union and dynamic switching as implemented here is therefore not supported.
The way I think this could work is to always return BrowserAnimationsModule here, but using the noop providers:
static forRoot(config: BrowserAnimationsModuleConfig): ModuleWithProviders<BrowserAnimationsModule> {
return {
ngModule: BrowserAnimationsModule,
providers: config.disableAnimations ? BROWSER_NOOP_ANIMATIONS_PROVIDERS : BROWSER_ANIMATIONS_PROVIDERS,
};
}This removes the dynamic nature of the import while still providing the appropriate set of providers.
Additionally, it may be worth noting that even the above suggestion would likely not work in View Engine, as it has an additional requirement that even the providers have to be statically known. This restriction has been lifted in Ivy. This can be partially worked around by capturing the BrowserAnimationsModuleConfig as a token of its own and then have useFactory providers for the other tokens that can then inject BrowserAnimationsModuleConfig. But even then you may not be able to do e.g. this:
BrowserAnimationsModule.forRoot({
disableAnimations: window.matchMedia('(prefers-reduced-motion: reduce)').matches,
})as the value for disableAnimations is not known statically, which I believe it is required to be in VE. You may want to experiment with this a bit, as I'm not entirely sure if there's a way to make it work in VE.
There was a problem hiding this comment.
I was suspecting it could be problematic, but shouldn't it have caused some of the unit tests to fail?
And yeah, the dynamic value won't work for VE in AOT mode, but I figured that it won't be a big deal given that we're in the process of removing it.
There was a problem hiding this comment.
In tests only the JIT compiler is used AFAIK. There's packages/compiler-cli/integrationtest but I have never worked with these, but it looks like the tests inside the bazel folder run the AOT compiler using both VE and Ivy.
e15f294 to
9713bf9
Compare
AndrewKushnir
left a comment
There was a problem hiding this comment.
@crisbeto thanks for creating this PR 👍
I have a couple questions/comments:
- should we consider calling the method
withConfiginstead offorRoot(since the root/child semantics from Router does not really apply here) - Since it's possible to import the
BrowserAnimationsModulefor different sub-trees (and also call theforRootnow, such that one component mightdisabledAnimations: trueand some other components might havedisableAnimations: false), I'd propose to add some tests to verify that animations are properly enabled/disabled for the corresponding parts of the tree.
Thank you.
|
I'm open to renaming
|
Yeah, I think May be we can get additional feedback from the |
|
This API can only be used at the root of the application though, right? If that's the case |
|
Not necessarily. I believe that it would work on a subtree of modules as well. |
|
If that's the case then I think that |
|
Alright, I'll change it to |
9713bf9 to
c570528
Compare
|
Changed based on the discussion @AndrewKushnir @jelbourn. |
|
You can preview d11ede6 at https://pr40731-d11ede6.ngbuilds.io/. |
AndrewKushnir
left a comment
There was a problem hiding this comment.
Thanks for the updates @crisbeto! I've left a few comments.
There was a problem hiding this comment.
| * @param config Object used to configure the behavior of the `BrowserAnimationsModule`. | |
| * @param config Object with the `BrowserAnimationsModuleConfig` shape to configure the behavior of the module. |
There was a problem hiding this comment.
Specifying what the shape of the object is supposed to be feels redundant since TS already enforces it.
There was a problem hiding this comment.
Yeah, I was thinking to provide more specific info in docs, but I guess this would be derived from the function signature?
…rAnimationsModule.withConfig
Currently the only way to disable animations is by providing the `NoopAnimationsModule`
which doesn't allow for it to be disabled based on runtime information. These changes
add support for disabling animations based on runtime information by using
`BrowserAnimationsModule.withConfig({disableAnimations: true})`.
c570528 to
6f12954
Compare
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Currently the only way to disable animations is by providing the
NoopAnimationsModulewhich doesn't allow for it to be disabled based on runtime information. These changes add support for disabling animations based on runtime information by usingBrowserAnimationsModule.withConfig({disableAnimations: true}).