Tree shaking and dead code removal in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Angular's tree shaking affect unused components?

Consider an Angular app where a component is declared but never used in any template or routing. What happens to this component during the build process with tree shaking enabled?

A The component is removed from the final bundle because it is not referenced anywhere.

B The component remains in the bundle but is marked as deprecated.

C The component causes a build error because it is declared but unused.

D The component is included in the bundle but its template is removed.

💡 Hint

Think about what tree shaking means for unused code.

Tree shaking removes code that is not referenced anywhere in the app. Since the component is never used, it is removed from the final bundle, reducing bundle size.

📝 Syntax

intermediate

Which import style helps Angular's tree shaking?

Given a utility library with many functions, which import style allows Angular's build tools to remove unused functions effectively?

A const utils = require('library');

B import * as utils from 'library';

C import 'library';

D import { usefulFunction } from 'library';

💡 Hint

Consider how named imports vs namespace imports affect static analysis.

Named imports allow the build tools to detect exactly which functions are used and remove the rest. Namespace imports or side-effect imports prevent effective tree shaking.

🔧 Debug

advanced

Why is dead code not removed in this Angular service?

Look at this Angular service code snippet:

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

Despite unusedMethod never being called, it remains in the final bundle. Why?

A Because the service is provided in root and the whole class is included.

B Because Angular cannot tree shake methods inside classes.

C Because the build configuration disables tree shaking.

D Because the method is public and thus always included.

💡 Hint

Think about how Angular includes services provided in root.

When a service is provided in root, Angular includes the entire class in the bundle. Tree shaking does not remove unused methods inside classes because the class is referenced as a whole.

🧠 Conceptual

advanced

What role does Angular's Ivy compiler play in dead code removal?

How does Angular's Ivy compiler improve tree shaking and dead code removal compared to the previous View Engine?

A Ivy disables tree shaking to improve runtime performance.

B Ivy bundles all components into a single file, preventing dead code removal.

C Ivy generates code that is more modular and easier for build tools to analyze and remove unused parts.

D Ivy requires manual configuration to enable dead code removal.

💡 Hint

Think about how code generation affects static analysis.

Ivy generates smaller, more modular code that allows build tools to detect and remove unused components and code more effectively than the older View Engine.

❓ state_output

expert

What is the final bundle size effect of importing a large unused Angular module?

In an Angular app, you import a large feature module but never use any of its components or services. What happens to the final bundle size after build with tree shaking?

A The module is completely removed from the bundle, no size increase.

B The entire module and its code remain in the bundle, increasing size significantly.

C The module code is included but minified to zero size.

D Only the module's metadata is included, but code is removed.

💡 Hint

Consider how Angular treats imported modules even if unused.

Importing a module causes Angular to include its code in the bundle. Tree shaking cannot remove the module because it is referenced by the import statement, even if its components are unused.