Sandbox

Create the sandbox file and the configuration

To start, you first have to create the sandbox for the component, this is indispensable to be able to test a component. Inside component folder create a new file with the extension .component.sandbox.ts. The image on the right is an example of the code that the file should carry, you can learn more about sandbox configuration at Angular Playground - Sandbox API.

Component folder

Sandbox file

Note: In Mocks, Services and Providers it is explained in detail how to configure the WebMap provider.

Add component declaration to application module

Remember that Angular needs to know about the existence of this component. Add it to app.module.ts as a declaration:

App module

Component module and Playground configuration

The WebForms WebMap components some libraries to work correctly (those shown in the image on the left, in the imports section). Since playground works as a separate project, it also needs to know about these references so you have to add them in the modules section, in the configure method.

Each WebMap component has its own special module. This module can be created or taken directly from the migrated project where the component is located. Include component module in the component folder. At main.playground.ts add it in modules section at configure method.

We already have the sandbox configured for the component we want to test but we still need to configure the WebMapServices to be able to simulate the component in the playground. See the next page.