Tree shaking and dead code removal in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to enable tree shaking in an Angular standalone component.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-sample',
  template: `<p>Hello Angular!</p>`,
  standalone: [1]
})
export class SampleComponent {}

Drag options to blanks, or click blank then click option'

Afalse

Bnull

Ctrue

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Setting standalone to false disables tree shaking benefits.

Leaving standalone undefined causes Angular to treat it as a module component.

Setting standalone: true enables Angular to treat the component as standalone, which helps with tree shaking by avoiding unnecessary module imports.

2fill in blank

medium

Complete the code to import a module only if it is used, aiding dead code removal.

Angular

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

@NgModule({
  imports: [
    [1]
  ]
})
export class AppModule {}

Drag options to blanks, or click blank then click option'

AFormsModule

BUnusedModule

CCommonModule

DBrowserModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing unused modules increases bundle size.

Forgetting to import BrowserModule causes app errors.

Only importing BrowserModule when needed helps Angular remove unused modules during build.

3fill in blank

hard

Fix the error in the Angular service to allow dead code removal by marking it as injectable only when used.

Angular

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: [1]
})
export class DataService {
  fetchData() { return 'data'; }
}

Drag options to blanks, or click blank then click option'

A'root'

B'any'

Cnull

D'platform'

Attempts:

3 left

💡 Hint

Common Mistakes

Using null disables tree shaking for the service.

Using 'any' or 'platform' changes the injector scope.

Using providedIn: 'root' makes the service tree-shakable by Angular, removing it if unused.

4fill in blank

hard

Fill both blanks to create a lazy-loaded Angular module that helps with tree shaking and dead code removal.

Angular

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'feature', loadChildren: () => import('./feature/feature.module').[1](m => m.[2]) }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Drag options to blanks, or click blank then click option'

Athen

Bcatch

Cdefault

Dload

Attempts:

3 left

💡 Hint

Common Mistakes

Using catch instead of then causes errors.

Trying to call load() is not valid syntax.

Using then to access the default export enables lazy loading of the module, which helps Angular remove unused code.

5fill in blank

hard

Fill all three blanks to create a conditional import in Angular that supports tree shaking and dead code removal.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<ng-container *ngIf="showFeature">
    <ng-container *ngComponentOutlet="([1] | async)"></ng-container>
  </ng-container>`
})
export class AppComponent {
  showFeature = true;
  featureComponent = import('./feature/feature.component').[2](m => m.[3]);
}

Drag options to blanks, or click blank then click option'

AfeatureComponent

Bthen

Cdefault

Dcatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using catch instead of then causes runtime errors.

Not binding the imported component to a variable breaks the template.

Using import() with then() to get the default export and binding it to featureComponent allows Angular to load the component only when needed, enabling tree shaking.

Practice

1. What is the main purpose of tree shaking in Angular?

easy

A. To remove unused code and imports during the build process

B. To add extra debugging information to the app

C. To increase the size of the final bundle

D. To automatically update Angular dependencies

Solution

1. Step 1: Understand tree shaking concept

   Tree shaking is a process that removes unused code and imports from the final build.

2. Step 2: Identify its effect in Angular

   In Angular, tree shaking helps reduce app size by excluding code that is never used.

3. Final Answer:

   To remove unused code and imports during the build process -> Option A

4. Quick Check:

   Tree shaking = remove unused code [OK]

Hint: Tree shaking removes unused code to shrink app size [OK]

Common Mistakes:

• Thinking tree shaking adds code instead of removing
• Confusing tree shaking with debugging tools
• Believing tree shaking updates dependencies automatically

2. Which syntax correctly imports a module that can be tree shaken in Angular?

easy

A. import * as Component from '@angular/core';

B. import Component from '@angular/core';

C. require('@angular/core').Component;

D. import { Component } from '@angular/core';

Solution

1. Step 1: Recognize ES module import syntax

   Angular uses ES module syntax: import { NamedExport } from 'module';

2. Step 2: Identify correct import for Component

   The correct syntax is importing Component as a named export inside curly braces.

3. Final Answer:

   import { Component } from '@angular/core'; -> Option D

4. Quick Check:

   Correct ES module import = import { Component } from '@angular/core'; [OK]

Hint: Use curly braces for named imports in Angular [OK]

Common Mistakes:

• Using default import syntax for named exports
• Using CommonJS require instead of ES import
• Importing everything as a namespace unnecessarily

3. Given this Angular service code, what will be removed by tree shaking if unusedMethod() is never called anywhere?

export class DataService {
  fetchData() { return 'data'; }
  unusedMethod() { return 'not used'; }
}

medium

A. Only fetchData will be kept; unusedMethod will be removed

B. Both fetchData and unusedMethod will be kept

C. Only unusedMethod will be kept; fetchData will be removed

D. Neither method will be removed

Solution

1. Step 1: Identify used and unused methods

   fetchData is assumed used; unusedMethod is never called anywhere.

2. Step 2: Apply tree shaking effect

   Tree shaking removes unused code like unusedMethod to reduce bundle size.

3. Final Answer:

   Only fetchData will be kept; unusedMethod will be removed -> Option A

4. Quick Check:

   Unused code removed = Only fetchData will be kept; unusedMethod will be removed [OK]

Hint: Unused methods get removed by tree shaking [OK]

Common Mistakes:

• Assuming all methods stay regardless of usage
• Confusing tree shaking with runtime errors
• Thinking tree shaking removes used code

4. You notice your Angular app bundle size is large despite removing unused components. What is a likely cause related to tree shaking?

medium

A. Your code uses only arrow functions

B. You are importing entire modules instead of specific components

C. You forgot to run the production build command

D. You are using lazy loading for modules

Solution

1. Step 1: Understand tree shaking limitations

   Tree shaking works best when importing specific parts, not whole modules.

2. Step 2: Identify import style impact

   Importing entire modules prevents tree shaking from removing unused parts, increasing bundle size.

3. Final Answer:

   You are importing entire modules instead of specific components -> Option B

4. Quick Check:

   Whole module imports block tree shaking = You are importing entire modules instead of specific components [OK]

Hint: Import specific parts, not whole modules, for tree shaking [OK]

Common Mistakes:

• Ignoring production build optimizations
• Thinking arrow functions affect tree shaking
• Believing lazy loading increases bundle size

5. How can you ensure a utility function in Angular is not removed by tree shaking even if it appears unused?

hard

A. Define it inside a component class without export

B. Mark it with a special comment like /* keep */

C. Export it and use it in a component or service

D. Use it only in test files

Solution

1. Step 1: Understand tree shaking criteria

   Tree shaking removes code not referenced anywhere in the app.

2. Step 2: Prevent removal by usage

   Exporting and using the function in components or services marks it as used, so it stays.

3. Final Answer:

   Export it and use it in a component or service -> Option C

4. Quick Check:

   Used code is kept by tree shaking = Export it and use it in a component or service [OK]

Hint: Use exported functions in app code to keep them [OK]

Common Mistakes:

• Thinking comments prevent tree shaking
• Defining functions without export to keep them
• Using functions only in tests to keep them