属性'registerComponent‘在'ElementRef’类型上不存在

Question

我试着和angular2一起做黄金版面。我跟踪了这个柱塞，但是我得到了以下错误：

属性'registerComponent‘在'ElementRef’类型上不存在。 属性'eventHub‘在'ElementRef’类型上不存在。 属性‘’init‘在类型'ElementRef’上不存在。 属性' on‘在类型'ElementRef’上不存在。属性'updateSize‘在'ElementRef’类型上不存在。 属性'eventHub‘在'ElementRef’类型上不存在

柱塞码如下：

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");
  }
}

编辑：

我将github链接添加到我的项目中，其中包含所有配置文件和组件：黄金版面-演示。

解决方案：

柱塞的代码不正确，使用this.layout.nativeElement.registerComponent代替this.layout.registerComponent，对于eventHub, init, on, updateSize使用相同的if。这解决了编译时错误。

Edit2

现在，我得到了运行时错误，可以在浏览器中看到：

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

我的索引文件的内容类似于：

<!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/zone.js@0.6.25?main=browser"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
    <script src="https://unpkg.com/systemjs@0.19.39/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>

Answer 1

plunk中的代码并不是不正确的，将this.layout.registerComponent更改为this.layout.nativeElement.registerComponent只是隐藏了问题，一旦应用程序实际构建就会导致更多的问题。

您的应用程序是通过角CLI使用webpack运行的，而plunk中的应用程序使用的是SystemJS。

在尝试在应用程序中实现plunk时，您最终合并了这两者，这导致了您的问题。您不需要加载库，也不需要像前面提到的@yurzui那样在index.html中配置index.html部分，也不需要systemjs.config.js文件