Angular 2 Unable to read the 'prototype' property from undefined

I have the following code:

wall.module.ts

import {CommunityComponent}                from './components/community.component';
import {KayooModule}                       from './../kayoo/kayoo.module';
import {PostModule}                        from './../post/post.module';
import {NgModule}                          from '@angular/core';
import {WallComponent}                     from './components/wall.component';

@NgModule(
     {
         declarations:[ WallComponent,
                        CommunityComponent
                      ],
         imports:[PostModule],
         entryComponents: [CommunityComponent],
         providers:[ComponentFactoryService],
         exports:[WallComponent]
     }
)
export class WallModule {}

community.component.ts:

import { Component, Input, ViewContainerRef, ViewChild } from "@angular/core";
import { Base } from './../../kayoo/components/base';

@Component({
            selector    : 'community',
            templateUrl : 'app/templates/community.component.html',
            styleUrls   : ['app/templates/css/community.component.css'],
           })

export class CommunityComponent extends Base
{

     constructor()
     {
       super();
     }

     public result=(data:any)=>
     {
       this.community=data;
     }
} 

wall.component.ts:

import { CommunityComponent } from './community.component';
import { ComponentFactoryService } from './../../services/services/component.fac';
import { Component, Input,ViewChild,ViewContainerRef} from "@angular/core";

@Component({
            selector:'wall',
            templateUrl:'app/templates/wall.component.html',
            styleUrls:['app/templates/css/wall.component.css']
           })

export class WallComponent 
{                        
  @ViewChild('wallContent', {read: ViewContainerRef}) containerRef: ViewContainerRef;


   private com:{[id:string]:any;} =
   {
     "loadCommunity"       : CommunityComponent
   };

   private    parameters : any;

   constructor(private factory:ComponentFactoryService)
   {

   }

}

Base.ts:

import {Input,OnChanges,OnInit,ComponentRef} from "@angular/core";

export class Base 
{

  @Input() parameters : any;
  @Input() ref        : ComponentRef<any>;
  @Input() cfunc      : any;


  getParameters() : any
  {
    return this.parameters;
  }

  getRef() : ComponentRef<any>
  {
    return this.ref;
  }

  getCFunc() : any
  {
    return this.cfunc;
  }

} 

core.module.ts

import { AsideModule }                 from '../../flayer/aside/aside.module';
import { FooterModule }                from '../../flayer/footer/footer.module';
import { NavigationModule }            from '../../flayer/navigation/navigation.module';
import { HeaderModule }                from '../../flayer/header/header.module';
import { WallModule}                   from '../../flayer/wall/wall.module';
import { ServicesModule }              from '../../flayer/services/services.module';
import { CoreService }                 from '../../core/services/core.service';
import { NgModule }                    from '@angular/core';
import { BrowserModule }               from '@angular/platform-browser';
import { HttpModule}                   from '@angular/http';
import { CoreComponent }              from './components/core.component';


@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    HeaderModule,
    NavigationModule,
    WallModule,
    FooterModule,
    AsideModule,
    ServicesModule
  ],
  declarations: [CoreComponent],
  entryComponents:[],
  providers:    [CoreService],
  bootstrap:    [CoreComponent],
  exports:      [CoreComponent]

})
export class CoreModule { }

I have a Base class that is not a component and belongs to CoreModule and is the base class of the component class, in this case CommunityComponent. I want to dynamically create a CommunityComponent with:

  let factory  = this.componentFactoryResolver.resolveComponentFactory(component); 
      let injector = ReflectiveInjector.fromResolvedProviders([], refDOM.parentInjector);
      let comp     = factory.create(injector);
      (<Base>comp.instance).parameters=parameters;
      (<Base>comp.instance).ref=comp;
      (<Base>comp.instance).cfunc=cfunc;
      comp.changeDetectorRef.detectChanges();

Dict declaration in WallComponent component:

   private com:{[id:string]:any;} =
   {
     "loadCommunity"       : CommunityComponent
   };

It produces the following error when trying to start the application:

enter image description here

When I remove the "extends Base" from CommunityComponent, the application works correctly. I need a component to inherit from Base and the ability to get the type of the component in the specified dictionary.

Can this be achieved?

Thank.

+4

Source: https://habr.com/ru/post/1667149/


All Articles