Services not being injected when annotated with @MultiWindowService

[Vargrats]

Hello,

I'm trying to integrate golden layout in a browser application using Angular 8.2 and it seems that my services are created without their injected components.

In the example below, the injected component (httpClient, calendarService and dutyService are all undefined when they are used in the service's functions.

If I remove the @MultiWindowService, everything works as intended however when I pop-out a component, it no longer share the services with the main window (as intended)

This is one of my service:

@Injectable({
  providedIn: 'root'
})
@MultiWindowService<CategoryService>()
export class CategoryService extends BaseService {
  constructor(private httpClient: HttpClient, private calendarService: CalendarService, private dutyService: DutyService) {
    super('/api/dutyCategory');
  }
<Rest of the service>

The layout is defined in one of my components like this:

window['$'] = $;
// Define all component types known at compile time to the golden-layout binding.
// It's possible to modify these at runtime using the `ComponentRegistryService`
const componentTypes: ComponentType[] = [
  {
    name: 'DutyListComponent',
    type: DutyListComponent
  },
  {
    name: 'DutyDetailComponent',
    type: DutyDetailComponent
  },
  {
    name: 'DutyScheduleContactComponent',
    type: DutyScheduleContactComponent
  },
  {
    name: 'CalendarComponent',
    type: CalendarComponent
  }
];
@NgModule({
  entryComponents: [DutyListComponent, DutyDetailComponent, DutyScheduleContactComponent, CalendarComponent],
  declarations: [DutyConsultationComponent],
  imports: [SharedModule, ComponentsModule, DutyConsultationRoutingModule, GoldenLayoutModule.forRoot(componentTypes)],
  providers: [],
  exports: [DutyConsultationComponent]
})
export class DutyConsultationModule {}

There are no errors when I run ng build.

Here are the relevant lines in my package.json:

"@angular/animations": "^8.2.1",
    "@angular/cdk": "^8.2.1",
    "@angular/common": "^8.2.1",
    "@angular/compiler": "^8.2.1",
    "@angular/core": "^8.2.1",
    "@angular/forms": "^8.2.1",
    "@angular/material": "^8.2.1",
    "@angular/platform-browser": "^8.2.1",
    "@angular/platform-browser-dynamic": "^8.2.1",
    "@angular/router": "^8.2.1",
    "golden-layout": "^1.5.9",
    "ngx-golden-layout": "0.0.27",

Can anyone help?

Thanks in advance!

[martin31821]

Can you out your tsconfig here, too? I assume you're not using ivy, which causes this to break.

[Vargrats]

Is Ivy a package from npm? If so, no we are not using it.

Here is my tsconfig:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "importHelpers": true,
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "paths": {
      "@env/*": ["environments/*"],
      "core-js/es7/reflect": [
        "node_modules/core-js/proposals/reflect-metadata"
      ],
      "core-js/es6/*": ["node_modules/core-js/es/*"]
    },
    "typeRoots": ["node_modules/@types"],
    "types": ["jquery"],
    "lib": ["es2018", "dom"]
  }
}

And my tsconfig.app

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": ["jquery"]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

Thanks again for your time.

[martin31821]

As I suspected, this happens when not using angular ivy, I'll try to fix it for both variants.

[sagunpandey]

@martin31821 Has there been any update? I am also using non-Ivy AOT compilation and I am facing a similar issue. My multi-window services are being injected but service properties are all undefined.

[sagunpandey]

@Vargrats Did you come up with any solution?

[martin31821]

Fixed in 0.0.30

[sagunpandey]

@martin31821 I am still facing the issue after updating to 0.0.30. Everything works just fine in the development build. But as soon as you use production build the injected services have their properties undefined.