0

I'm trying to make my bundle size as small as possible. I have an application that all routes are lazy loaded.

My AppModule looks like this:

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        routing,
        CommonModule
    ],
    providers: [
    ]
})
export class AppModule { }

And I got a lazy loaded module that looks like this:


@NgModule({
  declarations: [
    LoginComponent
  ],
  exports: [
    LoginComponent
  ],
  imports: [
    CommonModule,
    ModalsModule,
    FormsModule,
    ReactiveFormsModule
  ]
})
export class LoginModalModule {
}

My only dependency on FormsModule comes from lazy-loaded feature modules like this one, that only loads on some user interaction - like a click/touch event. But when I look in main.js, angular always bundles @angular/forms, even when the modules that uses it haven't been imported yet.

Is is possible to load @angular/forms only when a module that uses it is created?

I'm using Angular 9 under Ivy.

lucaswxp
  • 2,031
  • 5
  • 23
  • 34
  • Yes you can move import logic to any function call. Its the same exact syntax but is the first parm. – JWP Mar 18 '20 at 23:59
  • Can you elaborate? From my understanding, since `@angular/forms` is in `node_modules`, there's nothing I can do about it. – lucaswxp Mar 19 '20 at 00:00

0 Answers0