Golden Layout with Angular 6 using typescript?

Question

I am using golden layout with Angular 6, following this tutorial.

I'm getting an error on GoldenLayoutModule.forRoot(config)

config not assignable to parameter of type GoldenLayoutConfiguration.

import { AppComponent } from './app.component';
import { GoldenLayoutModule, GoldenLayoutConfiguration } from '@embedded-enterprises/ng6-golden-layout';
import * as $ from 'jquery';

// It is required to have JQuery as global in the window object.
window['$'] = $;

// const config: GoldenLayoutConfiguration { /* TODO */ };


let config = {
  content: [{
      type: 'row',
      content:[{
          type: 'component',
          componentName: 'testComponent',
          componentState: { label: 'A' }
      },{
          type: 'column',
          content:[{
              type: 'component',
              componentName: 'testComponent',
              componentState: { label: 'B' }
          },{
              type: 'component',
              componentName: 'testComponent',
              componentState: { label: 'C' }
          }]
      }]
  }]
};

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GoldenLayoutModule.forRoot(config)
  ],
  entryComponents: [
    // TODO Add your components which are used as panels in golden-layout also here.
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Welcome to stack overflow. The more research you do prior to asking a question, the more likely it is to be answered. You should post things you've tried, possibly including a "working" sandbox of your code. Also, the link to your tutorial is broken - it's possible it's paid access or something. Either way, no one else will know what you're referring to. As far as your question goes, the issue is `config` is the wrong type. It needs to be `GoldenLayoutConfiguration` but it doesn't appear to be that type. What type is it? — Travis Heeter, Oct 17 '18 at 17:46
A fully functional Angular-6 implementation of golden-layout can be found at https://github.com/EmbeddedEnterprises/ng6-golden-layout I wish, I knew that earlier... — B--rian, Nov 16 '18 at 14:09

score 4 · Answer 1 · edited Nov 16 '18 at 14:59

I was able to get golden-layout to work with Angular 6 by converting the javascript file of the golden-layout example to typescript. I am including my angular 6 files for this example so that others can start with a full working example to save them the time I have spent. I am not sure why the ng6-golden-layout was not working as it should be compatible for Angular 6 but could not get the layout config syntax and could not find any full working examples in my searches.

First, a package has to be installed:

npm install --save golden-layout@1.5.9 jquery

The files compatible to Angular 6 are the following:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import * as $ from 'jquery';

// It is required to have JQuery as global in the window object.
window['$'] = $;

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  entryComponents: [
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import * as GoldenLayout from 'golden-layout';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myLayout: GoldenLayout;
  title = 'popout-ex';

  config:any = {
    content: [{
      type: 'row',
      content: [
          {
          type:'component',
          componentName: 'example',
          componentState: { text: 'Component 1' }
          },
        {
          type:'component',
          componentName: 'example',
          componentState: { text: 'Component 2' }
          },
        {
          type:'component',
          componentName: 'example',
          componentState: { text: 'Component 3' }
          }
      ]
    }]
  };

  ngOnInit() {
      this.myLayout = new GoldenLayout( this.config );

      this.myLayout.registerComponent( 'example', function( container, state ){
        container.getElement().html( '<h2>' + state.text + '</h2>');
      });

      this.myLayout.init();
    }
}

app.component.html

 <link type="text/css" rel="stylesheet" href="//golden-layout.com/assets/css/goldenlayout-base.css" />
 <link type="text/css" rel="stylesheet" href="//golden-layout.com/assets/css/goldenlayout-dark-theme.css" />

score 0 · Answer 2 · answered Oct 17 '18 at 17:56

config needs to be of type GoldenLayoutConfiguration. It looks like this line

let config = {

is your issue. Try this:

let config:GoldenLayoutConfiguration = {

The documentation says this:

myLayout = new GoldenLayout({
  content:[{ 
    type: 'component', 
    componentName: 'sayHi',
    componentState: { name: 'Wolfram' }
  }]
});

so that's something else you can try.

Golden Layout with Angular 6 using typescript?

2 Answers2

Linked