Show how fast it is to get a component written and on the screen. Time to component (ttc). Create component within .sandbox.ts file.

I'd like to add an html5 <details> element has the option to "Show Scenario Config". When expanded, it would display a pretty-printed version of the scenario configuration - template, context, styles, etc. This would be helpful for people using angular-playground to get code samples.

If you like the idea, I can submit a PR.

Versions

angular-playground version 3.4.0

Output from: ng --version:

Angular CLI: 1.6.0
Node: 9.2.1
OS: linux x64
Angular: 

Output from: npm --version

5.6.0

Repro steps

• Download a fresh copy of Angular Playground and set up the cli-example
• cd examples/cli-example
• npm i
• rename the angular-playground config file to something else to make it missing
• mv angular-playground.json foo.json
• Try starting playground
• npm run playground

Observed Behavior

Quits without an error message or error code.

> [email protected] playground /var/www/html/angular-playground/examples/cli-example
> node ./node_modules/angular-playground/dist/bin/index.js

Desired Behavior

> [email protected] playground /var/www/html/angular-playground-config-fix/examples/cli-example
> node ./node_modules/angular-playground/dist/bin/index.js

Failed to load config file /var/www/html/angular-playground-config-fix/examples/cli-example/angular-playground.json

Details

The issue may have something to do with my setup, but I thought I'd submit this issue in case it's widespread.

There does exist a passing test case for missing configuration file throwing an error here.

The error is being correctly thrown in a function in configure.ts

I think in my case, the thrown error doesn't print because the of the asynchronous function in run.ts. Because run() is an async function, the error is caught by the promise that run() returns, and never reaches the user.

Adding a catch block to this promise fixes the issue on my setup. I made a pull request that shows this #94. I'm not convinced it's the cleanest way to solve the issue, but maybe it will be a lead to something useful.

This is also the first time I've attempted contributing to an open source project, so I might be making a mistake in this process. Thanks for the patience.

Thanks for sharing this great tooling. I really like the idea and trying to get it up and running for my project. I started by experimenting on the simple angular tutorial Heros app. Stuck on the step four two way binding. To use angular two way binding you need to import FormsModule from Angular. There is no mention in your tutorial of where to input this module. Dig into angular-playground source code, I found my-playground.module.ts and used it as the starting point, but still got the same not recognized error. There is no declared section in the my-playground.module.ts, and the AppComponent is already declared in PlaygroundCommon module, so this could be by design. Anyway, I am just trying to follow the official Angular Heros tutorial in step three and trying to get this playground working, but stuck here. If I commented out the two way binding in the hero template, it will work, but un-comment will generate errors. Here are the code snippets:

Heroes.Component.html:

heroes works!

my-playground.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { PlaygroundCommonModule } from 'angular-playground';
import { AppComponent } from 'angular-playground';
import { FormsModule } from '@angular/forms';

@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
PlaygroundCommonModule,
FormsModule
],
bootstrap: [AppComponent]
})
export class MyPlaygroundModule {}

main.playground.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { initializePlayground, PlaygroundModule } from 'angular-playground';
import { MyPlaygroundModule } from './my-playground.module';

initializePlayground('app-root');
platformBrowserDynamic().bootstrapModule(MyPlaygroundModule);

Any help to get pass this hurdle will be appreciated.

Thanks. Frank

Add the keybinding for the up arrow to the text box to be able to cycle to the bottom in the list. Right now, all you can do is go down to start. Might not be needed, but I find myself hitting the up arrow (guess I do that in other IDE's/editors so it is muscle memory).

Need to provide a tab target so when a "keyboard warrior" changes focus to the browser that there is a way for them to tab into the viewport so the Playground shortcuts can be picked up. Right now, if you keyboard back to the browser there is no way to keyboard into the viewport (to give it focus), therefore you can't use the Playground keyboard shortcuts without clicking on the viewport first.

Create a CLI schematics package for Playground to add easier project structuring and templates for sandbox files.

https://github.com/angular/devkit

The section tag's background-color is set to white which currently overrides our global styles that are imported in the playground.

The only styles that should be applied to the

When I install the library without the global (-g) option:

$ npm i -D angular-playground
+ [email protected]

I can see that the library is added to node modules, but no angular-playground command is created and linked to the ./node_modules/angular-playground/dist/bin/cli.js

On the other hand, adding the -g option (installing it globally, which maybe is not what you want), the alias gets created

$ npm i -D angular-playground -g
/Users/me/.nvm/versions/node/v8.6.0/bin/angular-playground -> /Users/me/.nvm/versions/node/v8.6.0/lib/node_modules/angular-playground/dist/bin/cli.js

Initial concept:

Have a way to pass in plugins as NgModule classes to the initializePlayground() function. Also have a way to pass in header and footer template strings that could have components from the NgModule. This could allow for including rendering custom stuff around the sandboxed components. And these would get applied to each isolated view so you don't need to add it to each sandboxOf call.

I am trying to sandbox a large component. It requires a parent component to input it data as well as angular service. It needs to pass the service as an input to the component template. How can this be done?

I'd like the option to pass a string instead of a component to the sandboxOf function so that it wouldn't automatically declare the component. I have a bunch of shared ui components that depend on each other and I'd like to just import the whole SharedModule in my sandboxes. If I do that, however, the component that I'm sandboxing is declared in the HostModule and the SharedModule, which is a no-no.

If this sounds like a good feature, I can work on a PR.

Versions

angular-playground version: 3.1.0

Angular CLI: 1.5.5
Node: 6.12.0
OS: darwin x64
Angular: 5.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.5
@angular-devkit/build-optimizer: 0.0.34
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.38
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.5
@schematics/angular: 0.1.8
@schematics/schematics: error
typescript: 2.4.2
webpack: 3.8.1

Repro steps

1. followed official installation from http://www.angularplayground.it/docs/getting-started/angular-cli
2. here is a code snippet of app.module.ts

import { InlineSVGModule } from 'ng-inline-svg';

@NgModule({
  declarations: [
    ...
    // list of component
  ],
  imports: [
    ...
    InlineSVGModule,
  ],
  providers: [
    ApiService,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

one of test component.html

<div class="icon" [inlineSVG]="iconUrl"></div>

and it throws

Template parse errors:
Can't bind to 'inlineSVG' since it isn't a known property of 'div'.

I feel like I need to setup proper custom playground module to bind it. But, I am struggling with this. Would you be able to help me to resolve this issue?

I'm getting the error env: node\r: No such file or directory when trying to run angular-playground in a freshly installed angular-cli app.

To reproduce (using angular-cli: 1.0.0-beta.28.3):

$ ng new angular-cli-playground
$ cd angular-cli-playground
$ npm install --save-dev angular-playground
$ ./node_modules/.bin/angular-playground
env: node\r: No such file or directory

The error seems to be gone when the following file is converted using fromdos tool (brew install tofrodos).

fromdos ./node_modules/angular-playground/dist/bin/cli.js

Edit

I'm running on macOS Sierra, node 7.5.0 with npm 4.1.2 .

After doing the fromdos step I followed the guide and got it working. Will further explore the playground tomorrow! 👍

Hello, thanks for this amazing component.
How can I load bootstrap.css into sandboxes? I have installed it and added to angular-cli.json but I was unlucky.

The only way I could find, was to add it to the component styleUrls.

Thanks in advance.

I might be doing it wrong, but following the steps layed out in http://www.angularplayground.it/docs/getting-started/angular-cli I yield the following when running npm run playground:

[ng serve]:
ERROR in /my_project/src/sandboxes.ts (14,14): Expression expected.
ERROR in /my_project/src/sandboxes.ts (14,20): Unreachable code detected.
ERROR in /my_project/src/sandboxes.ts (14,88): Property 'then' does not exist on type '"./app/my-widget/my-widget.component.sandbox"'.

The file in src/sandboxes.ts looks like

export function getSandboxMenuItems() {
  return [{
    'key': './app/my-widget/my-widget.component.sandbox',
    'searchKey': 'MyWidgetComponent',
    'name': 'MyWidgetComponent',
    'label': '',
    'scenarioMenuItems': [{'key': 1, 'description': 'with simple text'}]
  }];
}

export function getSandbox(path: string) {
  switch (path) {
    case './app/my-widget/my-widget.component.sandbox':
      return import('./app/my-widget/my-widget.component.sandbox').then(sandbox => { return sandbox.default.serialize('./app/my-widget/my-widget.component.sandbox'); });
  }
}

I did change the module to esnext in src/tsconfig.app.json.

Versions:

$ cat package-lock.json | grep @angular/cli
    "@angular/cli": {
      "resolved": "https://registry.npmjs.org//@angular/cli/-/cli-1.5.0.tgz",
$ cat package-lock.json | grep angular-playground
    "angular-playground": {
      "resolved": "https://registry.npmjs.org/angular-playground/-/angular-playground-3.0.0.tgz",

Add in a proxy configuration option.

Currently when I try to pass in --proxy-config proxy.js to the angularCli.args option in the angular-playground.json I get a line in the console saying The option '--proxy-config proxy.js' is not registered with the serve command .... Our ng serve command in our package.json has exactly the same option passed in and it works.

If I separate the value from the command arg, args:["--proxy-config", "proxy.js"] it seems to execute, however in this case, since we are using ssl, it throws an error because we are using a prompt package to allow us to enter the password for our user certificate. process.stdin.setRawMode is not a function is the error. Not sure if that has something to do with exposing the console to the process or what.

I'm assuming the args property expects just boolean arguments. This should be either expanded to accept values or the arguments that expect values should be an option in the playground.json to take the values.

With @angular/[email protected] or @angular/[email protected], when you run angular-playground angular-playground.json, you get the following error message:

[ng serve]: Tried to find bootstrap code, but could not. Specify either statically analyzable bootstrap code or pass in an entryModule to the p
lugins options.

Running npm start works just fine.

I reproduced by taking your example-app-angular-cli, updating the @angular/cli version and running npm i && npm run playground.

Thanks.

Idea

• Ability to import css/scss from external files and add them to the styles?:[string] parameter of ScenarioConfig, e.g. something like:

// Would a webpack loader here work? 
import style from "./my-feature.component.sandbox.scss"

import {sandboxOf} from 'angular-playground';
import {MyFeature} from './my-feature.component';

export default sandboxOf(MyFeature, {prependText: 'navigation.'})
  .add('default',
    {
      template: `<my-feature>text for my feature!</my-feature>`,
      styles: [
             // Styles from external file.
            style,
             // Mixed with inline styles
            `
                :host{
                     background-color:red;
                }
            `]
    }
);

Angular allows you to override the ErrorHandler service with your own implementation. However, only the app root can provide this override. Since PlaygroundModule is the app root, it's not possible to provide an override for the ErrorHandler service.

I believe the only workaround is to provide a static method on PlaygroundModule that allows you to include an optional array of providers.

Storyboo is currently working on support for Angular 2. Perhaps you should combine efforts? There are a lot of things todo with playground that are already there in storybook (like plugins).

When I run angular-playground, the first build always fails with a message "PlaygroundModule is not an NgModule". If I save any file, webpack rebuilds successfully.

This is a minor annoyance when running angular-playground because it automatically triggers a rebuild. When you run with -no-serve and manually run with ng serve -a playground you have to know to save a file manually in order to make it build. This could confuse new users.

@jschwarty Wanted to get your thoughts on a wiki entry, or perhaps adding to PlaygroundModule.

Recently I migrated over to using this library. One of the downsides to using it was the inability to get HMR working with it.
One of the most common loaders for adding HMR is AngularClass/angular2-hmr. This loader requires you to have access to the AppModule to add specific functions that properly wire up the HMR lifecycles. Since the PlaygroundModule is owned by the framework, I was unable to add the required functions.

So, I spent some time researching and created a reusable function to wrap the PlaygroundModule, and provide the required HMR hooks.

https://gist.github.com/cgatian/2e70a3e6721550e70dd9b23f16fa0513

Usage:

import { hmrBootstrap } from './hmr';

const main = () => {
  return platformBrowserDynamic().bootstrapModule(PlaygroundModule);
};

hmrBootstrap(module, main);

We have been using the playground for a little bit on our macs, but recently we needed to do some testing on internet explorer and while the playground compiles and runs we cant use it because both ctrl + o and F1 are reserved key commands and make it so the app is unusable.

To get this to work we had to go in and change the app to use F2 instead.

Can you please look into adding atleast one more key command that is usable in Internet Explorer

Thanks,
PS I apologize for this i would never use Internet explorer if it were not for work.

Hey, cool project!

I've set this up in my project following your getting started instructions.
It is successfully creating sandboxes.ts at ./src/sandboxes.ts.
However when I try run, I get the following:

ERROR in ./~/angular-playground/dist/src/app/load-sandboxes.js
Module not found: Error: Can't resolve 'sandboxes' in 'C:\foo\node_modules\angular-playground\dist\src\app'
 @ ./~/angular-playground/dist/src/app/load-sandboxes.js 2:11-31
 @ ./~/angular-playground/dist/src/app/playground.module.js
 @ ./~/angular-playground/dist/index.js
 @ ./src/main.browser.ts
 @ multi main

Here is my angular-playground.json:

{
  "sourceRoot": "./src"
}

It seems as though inside PlaygroundModule it tries to provide via loadSandboxes, which does require('sandboxes').default. What is meant to resolve sandboxes? I am using WebPack 2, and tried manually adding an alias to resolve this:

resolve: {
        extensions: ['.ts', '.js', '.json'],
        alias: {
            'sandboxes': root('src/app/sandboxes.ts')
        }
    }

However this did not work.

I am running version 1.1.7

Any suggestions?

Hello,

Thank you for the project, looks very interesting, unfortunately I cannot run playground app with latest @angular/cli.

I am getting the following errors:

ERROR in /.../demo-app/node_modules/angular-playground/dist/src/app/playground.module.ts (13,36): Cannot find name 'require'.

ERROR in ./~/angular-playground/dist/src/app/playground.module.ts
Module not found: Error: Can't resolve 'sandboxes' in '/Users/..../demo-app/node_modules/angular-playground/dist/src/app'
 @ ./~/angular-playground/dist/src/app/playground.module.ts 18:33-53
 @ ./~/angular-playground/dist/index.js
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

I have angular-playground.json (/src/angular-playground.json)

{
  "sourceRoot": "./src",
  "angularCli": {
    "appName": "demo-app"
  }
}

I created sandboxes folder in demo-app/src/app/sandboxes and placed hello-world.component.sandbox.ts with

import { sandboxOf } from 'angular-playground';
import { HelloWorldComponent } from '../../../../src/components/hello-world/hello-world.component';

export default sandboxOf(HelloWorldComponent)
  .add('with default message', {
    template: `<hello-world></hello-world>`
  });

but getting the errors above.

Thanks

VSCode uses F1 for their Command Pallete, and it's become second nature for me. CTRL+O works, but wanted to see your thoughts on adding F1 as well.

Add Option to Specify base-href When Building Playground

e.g.

angular-playground --build --base-href=material-example/

The section element is given a z-index of 1. Is this actually necessary?

line of code

Reason for removal: Other dev tools such as the hammerjs-touchemulator append themselves to the DOM as the last child to the body. Typically element layout would render these elements higher based on DOM order. Since section has a z-index of 1, any child elements appended to the DOM do not render properly unless given a higher z-index.

Removing the z-index on section doesn't seem to have any negative side effects.

Versions

<!--
angular-playground version
-->
```"angular-playground": "^3.4.0"

node: 6.9.5
os: win32 x64

### Repro steps
<!--
Simple steps to reproduce this bug.
Please include: commands run, packages added, related code changes.
A link to a sample repo would help too.
-->
* Step 1
Just downloaded the code and ran the application and it works
* Step 2
Changes made to the template  and added from element i.e.

  <form #someForm="ngForm">
</form>
* Step 3
Run the app and open the related component on browser

### Observed Behavior

### Desired Behavior

There is no directive with "exportAs" set to "ngForm" ("

### Any other details that may be useful (optional)

First, thanks for your work on angular-playground. I was looking for a DEVCARDS solution in angular2-land.

As far as i can tell, there is no solution for some basic needs:

• i can not easily discover what compoments i have sandboxed.
• i can not easily view the same sandboxed component in its different states.

To solve this, i would like to create a component that can host multiple sandboxed components - how can i do that?

Versions

~3.4.0

Angular CLI: 1.6.5

Repro steps

Take any playground sandbox, import StoreModule from ngrx to it, see that the label is not working.

Like this:

export default sandboxOf(TabNavComponent, {
  imports: [
    RouterModule,
    RouterTestingModule,
    StoreModule.forRoot(reducers),
  ],
  providers: [
  ],
  label: 'libs'
})

Observed Behavior

label doesn't show up anymore

Desired Behavior

label shows up

Any other details that may be useful (optional)

Remove StoreModule import, label shows up:

  imports: [
    RouterModule,
    RouterTestingModule,
  ],
  providers: [
  ],
  label: 'libs'
})

Versions

angular-playground 3.4.0

Repro steps

• Navigate to component
• Hold Alt and press cursor key up/down without having the command bar open
• Observe that next time command bar is opened, command bar is still transparent

Desired Behavior

Command bar should should be opaque when the alt shortcut is not in use.

Versions

angular-playground version 3.4.0

Output from: ng --version:

Angular CLI: 1.6.0
Node: 9.2.1
OS: linux x64
Angular: 

Output from: npm --version

5.6.0

Repro steps

• Download a fresh copy of Angular Playground and set up the cli-example
• cd examples/cli-example
• npm i
• delete the line that has the appName configuration option in angular-playground.json
• Try starting playground
• npm run playground

Observed Behavior

Hangs without any message

$ npm run playground

> [email protected] playground /var/www/html/angular-playground/examples/cli-example
> node ./node_modules/angular-playground/dist/bin/index.js

Successfully compiled sandbox files.

Desired Behavior

$ npm run playground

> [email protected] playground /var/www/html/angular-playground/examples/cli-example
> node ./node_modules/angular-playground/dist/bin/index.js

Successfully compiled sandbox files.
Please provide Playground's appName in your angular-playground.json file.

Details

This is basically the same issue as #93, where a thrown error doesn't surface to the user. I don't think it's as important a bug because in the case where appName is present but misspelled there is a error message. Only when the appName field is completely missing from the config file does this happen.

Need to add a z-index or something to make the command bar always on top of the component being rendered.

Add entryComponents and schemas.

I need to open it on iPad. I don't know how to do it.

Right now you can make use of ng build with the AngularCLI to build an instance of the Playground that can be served up separate from the dev process. But, when using the --prod flag the minification/uglify process runs and the sandboxed component names, which come from the type, are converted. So they show up in the command bar as a single character for the component type name.

Not sure yet if this can be solved by updating the sandboxOf function code to get that name or if that is too late and it needs to be done in the playground cli code that writes out the sandboxes.ts file (to write the name out as a property in the object literal just like how the file path is written out).

1. Run --build (with or without service workers) to build app
2. Run http-server on build output
3. Run verify-sandboxes on served application

@jschwarty I don't know if angular-playground should be responsible for adding the animation module.

It would be convenient if the PlaygroundModule could accept an array of modules it would import for each scenario. Currently, I create a shared/common module and then import this in every test scenario.

export default sandboxOf(LoginComponent, {
  imports: [
    SharedModule
  ],
  providers: [],
  declareComponent: false
})
  .add('Login', {
    template: '<app-login></app-login>',
  })

I'm bringing this up because I recently updated to @angular/Material-beta.3 and they require the animations module. I thought it was a little magically this module was being imported by the sandboxes.ts.

I have a git project that contains a packages directory with different modules that are used to build a component library with ng-packagr and lerna.

Outside of that directory I have an "documentation web" that has a symlink to the directories in packages where the components are. Like this:

component-library
|--packages/
|   `--package1/
|    |   `--src/    
|    |       |--component1/
|    |       |    |--xxx.component.ts
|    |       |    |--xxx.component.html
|    |       |    |--xxx.component.sandbox.ts
|    |       |    `-- ...
|    |       |--component2/ ...
|    |       `--package1.module.ts
|    `--package2/ ...
|--doc-web/
     `--src/
         |--app/
         |--symlink to packages/package1/src/
         |--symlink to packages/package2/src/
         `--doc-web components...

I'm trying to get Angular playground in the doc-web to recognise the component sandboxes in my packages library, but they are not found.

In doc-web I can get a regular ng serve to work if I add the flag --preserve-symlinks and I can get the angular playground to stop complaining about not finding the components by adding

"angularCli": { args": ["--preserve-symlinks"], ... }

to the angular-playground.json. However Angular playground still doesn't find any of the sandboxes that are defined in my symlinked directories (if I add sandboxes to components in the doc-web it works just fine).

Is there some limitation that prevents Angular playground from searching after sandboxes in symlinked directories?

I'm using macOS in case that affects something.

Just a minor documentation issue.

On the Requirements page (http://www.angularplayground.it/docs/getting-started/requirements) it says:

Requires Angular version 4.2 or above.

but it looks like Playground 2.3.0 now requires Angular version 5.0 or above.

angular-playground only looks for ng bin in node_modules of current working directory.

On monorepo, with tools like Lerna or yarn workspace, the ng cli could possibly installed on somewhere else, so, looking for ng cli only in current working directory might not be a good deal.

As far as I know, we can use something like npx or yarn to handle looking up for us (npx ng serve, yarn run ng serve). But have no idea if this is a standard way that good for most people.

when i run „ng build --target production --aot“.
I will get some errors regarding the template from angular-playgrounds AppComponent.

What am i missing here?

ERROR in Template parse errors:
Can't bind to 'ngIf' since it isn't a known property of 'div'. ("
      </symbol>
    </svg>
    <div class="command-bar-shield" [ERROR ->]*ngIf="commandBarActive" (click)="toggleCommandBar()"></div>
    <div class="command-bar" *ngIf="comm"): ng:///xxx/node_modules/angular-playground/dist/src/app/app.component.ts.AppComponent.html@6:36
Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
      </symbol>
    </svg>

is including *.ts files in the dist/ necessary for the npm module to function?

because it has some negative side effects:
• ng lint will pick up angular-playground files from within node_modules (can be overcome with manually excluding node_modules in .angular-cli.json)
• ng build --aot will fail due to errors in node_modules/angular-playground/dist/src/app/app.component.ts.AppComponent.html (still trying to overcome this one. `"exclude"-section in tsconfig doesn't seem to help…)

--check-errors only supports console logging to handle reporting errors. Add the ability to provide a --build-type to export a build file with a more detailed description of errors.

step to reproduce,
I created a simple angular Cli (1.4.2) project and generated a note component.
configured as explained in the doc.
added a note.component.sandbox.ts file with the following

import { sandboxOf } from 'angular-playground';
import { NoteComponent } from './note.component';
 
export default sandboxOf(NoteComponent)
  .add('simple', {
    template: `<app-note></app-note>`
  });   

when running
yarn playground

in the console, I have

WARNING in Circular dependency detected:
src\app\note\note.component.sandbox.ts -> node_modules\angular-playground\dist\index.js -> node_modules\angular-playgrou
nd\dist\src\app\playground.module.js -> node_modules\angular-playground\dist\src\app\playground-common.module.js -> node
_modules\angular-playground\dist\src\app\load-sandboxes.js -> src\sandboxes.ts -> src\app\note\note.component.sandbox.ts

and when browsing to http://localhost:4201/

the page displays:

The app has 1 sandboxed component loaded.
Pick sandboxed components: ctrl + o or f1

When I hit F1 I got the dialog,
but when typing "simp..." the dialog does not autocomplete and no component is displayed.

is it working with angular cli 1.4.2 and angular 4 ?
use of
version :"angular-playground": "^1.7.1"*

Just tried following your set up guide and stumbled about an error. In the demo .angular-cli.json config in the docs you're missing the polyfills http://www.angularplayground.it/docs/getting-started/angular-cli

Needs to have the polyfills:

{
...
      "main": "main.playground.ts",
      "polyfills": "polyfills.ts",
...
}

Hi,

I would like to have ability to set timeout for the input data of the component so I can see loading state. When I am trying to use setTimeout on context I am getting the following error:

ERROR in .../xxx/src/sandboxes/stats-widget.component.sandbox.ts (6,28): Cannot find module 'timers'.

I tried to create a mini mock service which uses setTimeout and then use it in the context but getting the same error.

I am using angular-playground with Angular CLI.

Just today Angular CLI changed the package name to @angular/cli instead of angular-cli.

It looks like angular-playground makes the assumption that the package angular-cli is installed.

As that package will be deprecated soon, and angular-playground just got released, it might make sense to standardize on using @angular/cli.