Declarations, imports, and exports in Angular - Performance & Optimization

Performance: Declarations, imports, and exports

MEDIUM IMPACT

This concept affects the initial bundle size and module loading time, impacting how fast the Angular app starts and renders.

Organizing Angular modules to optimize app startup

Angular

import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [ComponentA],
  imports: [CommonModule],
  exports: [ComponentA]
})
export class ComponentAModule {}

Only imports and declares what is needed for a specific feature, enabling lazy loading and smaller bundles.

📈 Performance GainSaves 100kb+ in bundle size, reduces blocking time by 50-100ms

Organizing Angular modules to optimize app startup

Angular

import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [ComponentA, ComponentB, ComponentC],
  imports: [CommonModule, FormsModule, ReactiveFormsModule, HttpClientModule, RouterModule],
  exports: [ComponentA, ComponentB, ComponentC]
})
export class SharedModule {}

Importing and declaring many modules and components in one module causes a large bundle and slower initial load.

📉 Performance CostAdds 150kb+ to initial bundle, blocks rendering for 100-200ms on slow devices

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Large shared module with many imports/exports	N/A	N/A	High due to delayed script execution	[X] Bad
Small focused module with minimal imports/exports	N/A	N/A	Low, scripts load and execute faster	[OK] Good

Rendering Pipeline

Angular processes declarations, imports, and exports during compilation and bundling. Large imports increase bundle size, delaying script parsing and execution, which delays rendering.

→Bundle Parsing

→Script Execution

→Initial Render

⚠️ BottleneckBundle Parsing and Script Execution

Core Web Vital Affected

LCP

This concept affects the initial bundle size and module loading time, impacting how fast the Angular app starts and renders.

Optimization Tips

1Only declare components, directives, and pipes you use in a module.

2Import Angular modules selectively to avoid bloated bundles.

3Use lazy loading to split code and improve initial load speed.

Performance Quiz - 3 Questions

How does importing many modules in a single Angular module affect page load?

A It increases bundle size and delays initial rendering

B It decreases bundle size and speeds up rendering

C It has no effect on performance

D It only affects server-side rendering

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, filter by JS files, check bundle sizes and load times.

What to look for: Look for large initial bundles and long download or parse times indicating heavy imports.

Practice

1. In Angular, what is the main purpose of the declarations array inside an NgModule?

easy

A. To list components, directives, and pipes that belong to this module

B. To import other modules into this module

C. To export components to be used in other modules

D. To configure services for dependency injection

Solution

1. Step 1: Understand the role of declarations in NgModule

   The declarations array is used to tell Angular which components, directives, and pipes belong to this module.

2. Step 2: Differentiate declarations from imports and exports

   Imports bring in other modules, exports share parts with other modules, and declarations define what is inside this module.

3. Final Answer:

   To list components, directives, and pipes that belong to this module -> Option A

4. Quick Check:

   Declarations = Own components/directives/pipes [OK]

Hint: Declarations list what belongs inside the module [OK]

Common Mistakes:

• Confusing declarations with imports
• Thinking declarations export components
• Mixing declarations with service providers

2. Which of the following is the correct way to import the CommonModule into an Angular module?

easy

A. declarations: [CommonModule]

B. imports: [CommonModule]

C. exports: [CommonModule]

D. providers: [CommonModule]

Solution

1. Step 1: Identify where modules are added

   Other modules like CommonModule are added inside the imports array to bring their features in.

2. Step 2: Confirm correct syntax

   Using imports: [CommonModule] is the correct syntax to import a module.

3. Final Answer:

   imports: [CommonModule] -> Option B

4. Quick Check:

   Modules go in imports [OK]

Hint: Modules go inside imports array [OK]

Common Mistakes:

• Putting modules in declarations instead of imports
• Using exports to import modules
• Adding modules to providers

3. Given this Angular module snippet:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyComponent } from './my.component';

@NgModule({
  declarations: [MyComponent],
  imports: [CommonModule],
  exports: []
})
export class MyModule {}

Which of the following is true about MyComponent?

medium

A. It can be used in templates of components declared in other modules without importing MyModule

B. It is automatically exported to all modules because it is declared

C. It can only be used inside templates of components declared in MyModule

D. It must be added to imports to be used

Solution

1. Step 1: Check declarations and exports

   MyComponent is declared but not exported in MyModule.

2. Step 2: Understand component visibility

   Declared components are only usable inside the module unless exported. Since MyComponent is not exported, other modules cannot use it.

3. Final Answer:

   It can only be used inside templates of components declared in MyModule -> Option C

4. Quick Check:

   Declared but not exported = local use only [OK]

Hint: Only exported components are usable outside the module [OK]

Common Mistakes:

• Assuming declarations export components automatically
• Thinking imports export components
• Confusing imports with declarations

4. What is wrong with this Angular module code?

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyComponent } from './my.component';

@NgModule({
  declarations: [],
  imports: [BrowserModule, MyComponent],
  exports: [MyComponent]
})
export class AppModule {}

medium

A. exports cannot include components

B. BrowserModule cannot be imported

C. MyComponent should be in providers

D. MyComponent should be in declarations, not imports

Solution

1. Step 1: Identify where components belong

   Components like MyComponent must be listed in declarations, not imports.

2. Step 2: Check imports and exports usage

   Modules go in imports, components go in declarations. Exporting components is allowed.

3. Final Answer:

   MyComponent should be in declarations, not imports -> Option D

4. Quick Check:

   Components belong in declarations [OK]

Hint: Components go in declarations, modules in imports [OK]

Common Mistakes:

• Putting components inside imports
• Thinking exports can't include components
• Confusing providers with declarations

5. You have two Angular modules: SharedModule declares and exports a component ButtonComponent. You want to use ButtonComponent inside FeatureModule. Which is the correct way to set this up?

hard

A. Import SharedModule in FeatureModule without declaring ButtonComponent again

B. Import SharedModule in FeatureModule and add ButtonComponent to declarations in FeatureModule

C. Add ButtonComponent to declarations in FeatureModule only

D. Export FeatureModule from SharedModule

Solution

1. Step 1: Understand exports and imports

   SharedModule exports ButtonComponent, so importing SharedModule in FeatureModule makes ButtonComponent available.

2. Step 2: Avoid redeclaring exported components

   Do not redeclare ButtonComponent in FeatureModule; just import SharedModule.

3. Final Answer:

   Import SharedModule in FeatureModule without declaring ButtonComponent again -> Option A

4. Quick Check:

   Import module exporting component, no redeclaration needed [OK]

Hint: Import module exporting component, no redeclare [OK]

Common Mistakes:

• Redeclaring exported components in importing module
• Not importing the module that exports the component
• Trying to export the importing module instead