Make BrowserAnimationsModule delay-loadable

[johncrim]

🚀 feature request

Relevant Package

This feature request is for @angular/platform-browser/animations

Description

To make our app start as quickly as possible, particularly on mobile, I've done a bunch of work to minimize initial bundle size. One of the approaches I'm using is async imports (eg import('../foo/foo.module').then(m => m.FooModule)) shortly after the app is loaded, for logic that isn't absolutely required for initial load + first render.

While we use angular animations extensively (because it's awesome!), we don't need it for first page view (relying on CSS animations for the first few seconds). It is currently not possible to move the BrowserAnimationsModule import to a different module from where BrowserModule is imported - because BrowserAnimationModule exports BrowserModule, and the BrowserModule constructor requires that BrowserModule hasn't been loaded in a parent injector. Also, angular won't start if BrowserModule isn't imported by the root module.

I would like the ability to delay load BrowserAnimationsModule, and I think this would be a useful ability for anyone working to speed initial load.

The easiest repro is to create a new project using ng new --strict --minimal. Next, ng build --prod gives me a main bundle size of 187kB.

If I'm going to use @angular/animations in my app, I am currently required to import BrowserAnimationsModule in the root module:

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Just doing this increases the main bundle to 258 kB (+71kB or +38%).

Describe the solution you'd like

I'd like to be able to initialize the BrowserAnimationsModule shortly after app load, and have animations work after that point:

await delay(1000); import('@angular/platform-browser/animations').then(m => m.BrowserAnimationsModule );

This will probably require that the BrowserAnimationsModule no longer re-export BrowserModule.

Describe alternatives you've considered

The current required configuration works, it just adds unnecessary size to the initial bundle.

I did try directly importing BROWSER_ANIMATIONS_PROVIDERS (which would get around the BrowserModule re-import check), but I couldn't access them.

Another alternative would be to fork the angular code and try to create a new version of BrowserAnimationsModule that doesn't have these limitations, but I haven't gotten desparate enough for that. We'll see what the Angular team thinks about this proposal.

[sod]

I suggest using css animations. There are few things you can't do that way. And it works better in safari. Is faster and the build smaller. You can user helper pipes & directives to animate ngIf & ngFor as mentioned in #36860 (comment)

[johncrim]

Thanks for the advice, @sod. We do use CSS animations wherever we can, but the :enter, :leave, and chaining support is nice to have.

We certainly could use Web Animations directly - that's an option if this feature suggestion gets shot down.

@sod, could you provide more info on the issues with safari? I saw something about "ease curves become linear" - is that it? Is that an issue with web animations or with @angular/animations?

[sod]

more info on the issues with safari? I saw something about "ease curves become linear"

Yes thats one issue. Bezier curved easings don't work in safari. But there is a bunch of issues with BrowserAnimationsModule:

• NoopAnimationsModule makes ssr 10% slower (inserts ng-star-inserted css classes everywhere)
• ivy doesn't compile the magic strings aka :enter => * anymore, so you now have that overhead in the client as well
• increases minified build by 92kb

wherever we can, but the :enter, :leave, and chaining support is nice to have

We do :enter with the [class-activate-enter] directive and :leave with the observeRemovals pipe. You can see it in action on www.rebuy.de. Add something to the cart or open the mobile menu, all animations are css.

[sod]

Here is an actual working example on stackblick how we work with native css & angular and that pipe & directive for :enter & :leave animations with *ngIf & *ngFor

https://stackblitz.com/edit/angular-ivy-bhwwjt?file=src%2Fapp%2Fapp.component.css

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[johncrim]

Whether this gets votes or not, I think the size impact of the BrowserAnimationsModule on the main bundle is a problem, particularly for mobile apps.

I ended up deciding to not use angular animations because of this, and coming up with our own thin wrappers around CSS animations.

[angular-robot]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.