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.