Does Angular 2+ load whole module or just exported components?

user_8297111 0
Viewed 48

I have a big module but just export 1 component, when I import that module does Angular load the whole module or just the exported components so that I could control the performance? I don't want to move the component to a common module 'cos it breaks the structure. Could anyone give me an advice?

Update code example

Saying I have ModuleA with 3 components and just export 1 of them:

@NgModule({
  // ...
  exports: [
    ComponentA
  ],
  declarations: [
    ComponentA,
    ComponentB,
    ComponentC
  ]
})
export class ModuleA { }

In ModuleB, I import ModuleA so that I could use ComponentA:

@NgModule({
  // ...
  imports: [
    ModuleA
  ]
})
export class ModuleB { }

When the app load ModuleB, does it just load ComponentA or it load all components of ModuleA?

angular typescript javascript
1 Answers

So if you are saying:

module.ts

export const foo;

export const bar;

export const baz;

And then component.ts

import { foo } from './module'

I believe that while in development you will have all members available, when building production builds Angular AoT building will tree-shake the others away. It uses Webpack for doing so.

Webpacks tree shaking mechanisms are explained here: https://webpack.js.org/guides/tree-shaking/

And here are the docs to angular AoT compiler: https://angular.io/guide/aot-compiler

Anyhow, try a prod build and if everything works you should be fine :)

user_66962390
Related