Nested objects in context, component constructor and methods ignored when sandboxing.

Versions

"angular-playground": "^3.4.0",


    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.7.1
Node: 8.9.1
OS: linux x64
Angular: 5.2.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker

@angular/cli: 1.7.1
@angular/flex-layout: 2.0.0-beta.12
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.1
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.7.2
webpack: 3.11.0

Current Visual Issue

Screenshot

Repro steps

Step 1: Add a nested component context item

  context: {
    panelLinks: [
      [
        {'href': '#', 'text': 'Blackboard'},
        {'href': '#', 'text': 'Faculty & Staff'},
        {'href': '#', 'text': 'RiverMail'},
        {'href': '#', 'text': 'MyIRSC'},
        {'href': '#', 'text': 'Workday'}
      ],
      [
        {'href': '#', 'text': 'Bookstore'},
        {'href': '#', 'text': 'Calendar'},
        {'href': '#', 'text': 'Contact'},
        {'href': '#', 'text': 'Libraries'},
        {'href': '#', 'text': 'Campus & Maps'},
        {'href': '#', 'text': 'News'}
      ]
    ],
    controlBtns: {
      quickLinks: {'icon': 'person', 'text': 'Logins'},
      loginLinks: {'icon': 'view_list', 'text': 'Quick Links'},
      siteSearch: {'icon': 'search', 'text': ''}
    },
    cssClass: 'top-bar-panels'
  }

Step 2: Add the html counter part syntax and interpolation.

<div fxLayout="column" fxFlayoutAlign="end center" #topBar class="top-bar">
  <irsc-top-bar-panels [panelLinks]="panelLinks"></irsc-top-bar-panels>
  <div #controlBtns fxLayout="column" class="control-btns">
    <div fxLayout="row" fxLayoutAlign="end center" class="ctl-right" role="tablist">
      <button type="button" #btnLogin (click)="toggleMenuLinks('loginLinks')" aria-pressed="false" aria-selected="false"><i class="material-icons">{{controlBtns?.loginLinks?.icon}}</i> {{controlBtns?.loginLinks?.text}}</button>
      <button type="button" #btnQuick (click)="toggleMenuLinks('quickLinks')" aria-pressed="false" aria-selected="false"><i class="material-icons">{{quickLinks?.icon}}</i> {{quickLinks?.text}}</button>
      <button type="button" #btnSearch (click)="toggleMenuLinks('siteSearch')" aria-pressed="false" aria-selected="false"><i class="material-icons">{{controlBtns?.siteSearch?.icon}}</i> {{controlBtns?.siteSearch?.text}}</button>
    </div>
  </div>
</div>

Note: I have included a top level copy of quickLinks at the top level to help prove the nesting object issue.

Step 3: Ensuring the component has registered the variables;


// ...
export class TopBarComponent implements OnInit {
@Input() cssClass: string;
@Input() panelLinks: Array<Link[]>;
@Input() controlBtns: Controls;
quickLinks: Link;
constructor(private navService: NavService) { }

ngOnInit() {
this.controlBtns = this.navService.nav.topBar.controlBtns;
this.quickLinks = this.navService.nav.topBar.controlBtns.quickLinks;
this.panelLinks = [
  this.navService.nav.topBar.loginLinks,
  this.navService.nav.topBar.quickLinks
];
}

toggleMenuLinks(link: any) {
console.log(link);
}
}

**Note**: ngOnInit does not fire when using playground nor does and methods / functions are created! i.e.: toggleMenuLink is not a function.

### Observed Behavior

fs.js:34 ERROR TypeError: _co.toggleMenuLinks is not a function at Object.eval [as handleEvent] (HostComponent.html:6) at handleEvent (core.js:13547) at callWithDebugContext (core.js:15056) at Object.debugHandleEvent [as handleEvent] (core.js:14643) at dispatchEvent (core.js:9962) at eval (core.js:10587) at HTMLButtonElement.eval (platform-browser.js:2628) at ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:4740) at ZoneDelegate.invokeTask (zone.js:420)

fs.js:34 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 18, nodeDef: {…}, elDef: {…}, elView: {…}} component: (...) componentRenderElement: (...) context : HostComponent controlBtns: loginLinks: {icon: "view_list", text: "Quick Links"} quickLinks: {icon: "person", text: "Logins"} siteSearch : {icon: "search", text: ""} proto: Object cssClass: "top-bar-panels" panelLinks: Array(2) 0: Array(5) 0: {href: "#", text: "Blackboard"} 1: {href: "#", text: "Faculty & Staff"} 2: {href: "#", text: "RiverMail"} 3: {href: "#", text: "MyIRSC"} 4: {href: "#", text: "Workday"} length: 5 proto: Array(0) 1: Array(6) 0: {href: "#", text: "Bookstore"} 1: {href: "#", text: "Calendar"} 2: {href: "#", text: "Contact"} 3: {href: "#", text: "Libraries"} 4: {href: "#", text: "Campus & Maps"} 5: {href: "#", text: "News"} length: 6 proto: Array(0) length: 2 proto: Array(0) quickLinks: {icon: "person", text: "Logins"} proto: Object elDef: {nodeIndex: 18, parent: {…}, renderParent: {…}, bindingIndex: 7, outputIndex: 1, …} elOrCompView: (...) elView: {def: {…}, parent: {…}, viewContainerParent: null, parentNodeDef: {…}, context: HostComponent, …} injector : (...) nodeDef: {nodeIndex: 18, parent: {…}, renderParent: {…}, bindingIndex: 7, outputIndex: 1, …} nodeIndex: 18 providerTokens: (...) references: (...) renderNode: (...) view: {def: {…}, parent: {…}, viewContainerParent: null, parentNodeDef: {…}, context: HostComponent, …} proto: Object


### Desired Behavior
Context and Component Functionality should the same as if not in Angular Playground. Nested Objects should not be ignored. Component Methods should be accessible and functional.

### Any other details that may be useful (optional)
Direct input reproduces the same issue:

```typescript
//...
{
    template: `
    <div fxLayout="column" fxFlayoutAlign="end center" #topBar class="top-bar">
    <irsc-top-bar-panels [panelLinks]="panelLinks"></irsc-top-bar-panels>
    <div #controlBtns fxLayout="column" class="control-btns">
      <div fxLayout="row" fxLayoutAlign="end center" class="ctl-right" role="tablist">
        <button type="button" #btnLogin (click)="toggleMenuLinks('loginLinks')"
                aria-pressed="false" aria-selected="false"><i class="material-icons">
        {{controlBtns?.loginLinks?.icon}}</i> {{controlBtns?.loginLinks?.text}}
        </button>
        <button type="button" #btnQuick (click)="toggleMenuLinks('quickLinks')"
                aria-pressed="false" aria-selected="false"><i class="material-icons">
                {{quickLinks?.icon}}</i> {{quickLinks?.text}}
        </button>
        <button type="button" #btnSearch (click)="toggleMenuLinks('siteSearch')"
                aria-pressed="false" aria-selected="false"><i class="material-icons">
                {{controlBtns?.siteSearch?.icon}}</i> {{controlBtns?.siteSearch?.text}}
        </button>
      </div>
    </div>
  </div>
    `,
    context: {
      panelLinks: [
        [
          {'href': '#', 'text': 'Blackboard'},
          {'href': '#', 'text': 'Faculty & Staff'},
          {'href': '#', 'text': 'RiverMail'},
          {'href': '#', 'text': 'MyIRSC'},
          {'href': '#', 'text': 'Workday'}
        ],
        [
          {'href': '#', 'text': 'Bookstore'},
          {'href': '#', 'text': 'Calendar'},
          {'href': '#', 'text': 'Contact'},
          {'href': '#', 'text': 'Libraries'},
          {'href': '#', 'text': 'Campus & Maps'},
          {'href': '#', 'text': 'News'}
        ]
      ],
      controlBtns: {
        quickLinks: {'icon': 'person', 'text': 'Logins'},
        loginLinks: {'icon': 'view_list', 'text': 'Quick Links'},
        siteSearch: {'icon': 'search', 'text': ''}
      },
      quickLinks: {'icon': 'person', 'text': 'Logins'},
      cssClass: 'top-bar-panels'
    },
    styles: [`...styles...`]
}

vs.

const templateHTML = require('./top-bar.component.html').toString();
const templateCSS = require('./top-bar.component.scss').toString();
...
{template: templateHTML,...,styles: [templateCSS]}

SoCreate / angular-playground