Search code examples
angulargolden-layout

Property 'registerComponent' does not exist on type 'ElementRef'

I was trying to work on golden-layout with angular2. I followed this plunker, but I got following errors:

Property 'registerComponent' does not exist on type 'ElementRef'.

Property 'eventHub' does not exist on type 'ElementRef'.

Property'init' does not exist on type 'ElementRef'.

Property 'on' does notexist on type 'ElementRef'.

Property 'updateSize' does not exist on type 'ElementRef'.

Property 'eventHub' does not exist on type 'ElementRef'

The code of plunked is as:

import {
  Component, ComponentFactoryResolver, HostListener, ComponentFactory, ComponentRef,ViewContainerRef,ReflectiveInjector,
  ElementRef, ViewChild
} from '@angular/core';
import {AppComponent} from './app.component';
import {App2Component} from './app2.component';
declare let GoldenLayout: any;

@Component({
  selector: 'golden-layout',
  template: `<div style="width:100%;height:500px;" id="layout" #layout>My First Angular 2 App</div>
  <br/><button (click)="sendEvent()">Send event through hub</button>`,
  entryComponents: [AppComponent, App2Component]
})
export class GLComponent {
  @ViewChild('layout') private layout: ElementRef;
  private config: any;
  private layout: ElementRef;

  constructor(private el: ElementRef, private viewContainer: ViewContainerRef,
        private componentFactoryResolver: ComponentFactoryResolver){
    this.config = {
            content: [{
                type: 'row',
                content: [{
                    type: 'component',
                    componentName: 'test1',
                    componentState: {
                      message:"Top Left"
                    }
                }, { 
                        type: 'column',
                        content: [{
                            type: 'component',
                            componentName: 'test2',
                            componentState: {
                              message:"Top Right"
                            }
                        }, {
                                type: 'component',
                                componentName: 'test1',
                                componentState: {
                                  message:"Bottom Right"
                                }
                            }]
                    }]
            }]
        };
  }

  ngAfterViewInit(){
    this.layout = new GoldenLayout(this.config, this.layout.nativeElement);

    this.layout.registerComponent('test1', (container, componentState) => {
          let factory = this.componentFactoryResolver.resolveComponentFactory(AppComponent);

          let compRef = this.viewContainer.createComponent(factory);
          compRef.instance.setEventHub(this.layout.eventHub);
          compRef.instance.message = componentState.message;
          container.getElement().append(compRef.location.nativeElement); 

          container["compRef"] = compRef;

          compRef.changeDetectorRef.detectChanges();
    }); 

    this.layout.registerComponent('test2', (container, componentState) => {
          let factory = this.componentFactoryResolver.resolveComponentFactory(App2Component);

          let compRef = this.viewContainer.createComponent(factory);
          compRef.instance.setEventHub(this.layout.eventHub);
          compRef.instance.message = componentState.message;
          container.getElement().append(compRef.location.nativeElement); 

          container["compRef"] = compRef;

          compRef.changeDetectorRef.detectChanges();
    }); 

    this.layout.init();

        this.layout.on("itemDestroyed", item => {
            if (item.container != null) {
                let compRef = item.container["compRef"];
                if (compRef != null) {
                    compRef.destroy();
                }
            }
        });
  }

  @HostListener('window:resize', ['$event'])
  onResize(event) {
      if (this.layout)
        this.layout.updateSize();
  }

  sendEvent(){
    if (this.layout)
      this.layout.eventHub.emit("someEvent");
  }
}

Edit:
I am adding github link to my project, with all config files and components: golden-layout-demo.

Solution:
The code of the plunker was incorrect, used this.layout.nativeElement.registerComponent instead of this.layout.registerComponent and same for Same if for eventHub, init, on, updateSize. This resolved the compile time errors.

Edit2:

Now, I am getting the runtime error, that I can see in my browser:

GET http://localhost:4200/styles.css 
GET http://localhost:4200/systemjs.config.js 
GET http://localhost:4200/systemjs.config.js 
Uncaught Error: Zone already loaded.
GET http://localhost:4200/app 404 (Not Found)
GLComponent_Host.html:1 ERROR TypeError: Cannot read property 'registerComponent' of undefined

The contents of my index file look like:

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <link type="text/css" rel="stylesheet" href="https://golden-layout.com/files/latest/css/goldenlayout-base.css" />
    <link type="text/css" rel="stylesheet" href="https://golden-layout.com/files/latest/css/goldenlayout-dark-theme.css" />

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="https://golden-layout.com/files/latest/js/goldenlayout.min.js"></script>

    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>

    <script src="https://unpkg.com/[email protected]?main=browser"></script>
    <script src="https://unpkg.com/[email protected]"></script>
    <script src="https://unpkg.com/[email protected]/dist/system.src.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      // System.import('app').catch(function(err){ console.error(err); });
       System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

  <!-- 3. Display the application -->
  <body>
    <golden-layout>Loading...</golden-layout>
  </body>
</html>
Solution

  • The code in the plunk is not incorrect, changing this.layout.registerComponent to this.layout.nativeElement.registerComponent is just hiding the problem and will cause more problems once the application can actually build.

    Your application is running using webpack via Angular CLI whereas the application in the plunk is using SystemJS

    You have ended up merging the two when trying to implement the plunk in your application and this is causing your issues. You do not need the Load libraries and configure SystemJS sections in the index.html as @yurzui mentioned and you also don't need the systemjs.config.js file