Web workers for heavy computation in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a web worker in Angular.

Angular

const worker = new Worker([1]);

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

A'./app.worker', { type: 'module' }

B'./app.worker.ts'

C'./app.worker.js'

D'./app.worker', { type: 'classic' }

Attempts:

3 left

💡 Hint

Common Mistakes

Including the file extension in the worker path.

Omitting the module type option.

Angular web workers are created by specifying the worker file path and the module type.

2fill in blank

medium

Complete the code to send a message to the web worker.

Angular

worker.[1]('start computation');

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

Aemit

Bsend

CpostMessage

Ddispatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent methods like send or emit.

Confusing with event dispatching.

Use postMessage to send data to a web worker.

3fill in blank

hard

Fix the error in the event listener to receive messages from the worker.

Angular

worker.addEventListener('[1]', ({ data }) => {
  console.log('Result:', data);
});

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

Aonmessage

BpostMessage

CmessageReceived

Dmessage

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'onmessage' as event name instead of 'message'.

Using non-standard event names.

The event name to listen for messages from a worker is message.

4fill in blank

hard

Fill both blanks to create a worker and send a message safely.

Angular

const worker = new Worker('[1]', { [2] });
worker.postMessage('compute');

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

A./heavy.worker

B./heavy.worker.js

Ctype: 'module'

Dtype: 'classic'

Attempts:

3 left

💡 Hint

Common Mistakes

Including file extensions in the path.

Using classic type instead of module.

Use the worker file path without extension and specify type: 'module' for Angular workers.

5fill in blank

hard

Fill all three blanks to create a worker, send a message, and listen for the result.

Angular

const worker = new Worker('[1]', { [2] });
worker.[3]('start');
worker.addEventListener('message', event => {
  console.log('Data:', event.data);
});

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

A./compute.worker

Btype: 'module'

CpostMessage

D./compute.worker.js

Attempts:

3 left

💡 Hint

Common Mistakes

Including '.js' in the worker path.

Using wrong method to send messages.

Use the worker path without extension, specify module type, and send messages with postMessage.