Two instances of sandboxed component are created

[gbenthomas]

Versions

5.0.1

Angular CLI: 6.0.8
Node: 8.11.1
OS: win32 x64
Angular: 6.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.6.8
@angular/cli                      6.0.8
@ngtools/webpack                  6.0.8
@schematics/angular               0.6.8
@schematics/update                0.6.8
rxjs                              6.2.2
typescript                        2.7.2
webpack                           4.8.3

Repro steps

• ng new angular-playground-test
• Setup angular playground as mentioned in docs
• cd src/app && ng generate component notice
• Edit notice.component.ts:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-notice',
  template: '{{output}}',
  styleUrls: ['./notice.component.css']
})
export class NoticeComponent implements OnInit {

  static counter = 1;

  @Input()
  notice: string;

  output: string;

  constructor() { }

  ngOnInit() {
    this.output = `${this.notice} ${NoticeComponent.counter++}`;
    console.log(this.output);
  }
}

• Create notice.component.sandbox.ts:

import { sandboxOf } from 'angular-playground';
import { NoticeComponent } from './notice.component';

export default sandboxOf(NoticeComponent)
    .add('with simple text', {
        template: `<app-notice [notice]="'Playground'"></app-notice>`
    });

• npm run playground and select scenario

Observed Behavior

Two instances of NoticeComponent are created. The second one is added to the DOM and displayed. The output displayed in the browser is "Playground 2"

Desired Behavior

Only one instance of NoticeComponent should be created and added to the DOM.

Both instances respond to all inputs/events from services. I noticed this issue when working on a component that uses d3 for rendering and there were errors due to the first instance having 0 width and height.