Exporting modules for other app causing ERROR unknown Portal type.

[celestale]

Hihi @isaacplmann , what I intend to explore was to export contextmenu in my "angular app A" for my "angular app B" to use. "angular app A" eventually will be used as a package inside the "angular app B".

In "angular app A" modules I had exported ContextMenuModule, ContextMenuComponent

import { ContextMenuComponent, ContextMenuModule } from 'ngx-contextmenu';
@NgModule({
    imports: [
        ContextMenuModule
    ],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
    exports: [
        ContextMenuModule,
        ContextMenuComponent
    ]
})

In my "angular app B", I had imported { ContextMenuModule } from 'angular app A' and also forRoot()

import { ContextMenuModule } from 'angular app A';
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
     ContextMenuModule.forRoot({
         autoFocus: true
     }),
  ],
  bootstrap: [AppComponent]
})

In "angular app B" AppComponent.ts, I use the basic contextmenu with imports from 'angular app A' import { ContextMenuComponent } from 'angular app A'; @ViewChild(ContextMenuComponent) public basicMenu: ContextMenuComponent;

Somehow it compiles with no errors but whenever I tried to execute right-click it gets an error

ERROR Error: Attempting to attach an unknown Portal type. BasePortalHost accepts either a ComponentPortal or a TemplatePortal. at throwUnknownPortalTypeError (portal.es5.js:42) at DomPortalHost.BasePortalHost.attach (portal.es5.js:232) at OverlayRef.attach (overlay.es5.js:118) at ContextMenuService.attachContextMenu (contextMenu.service.js:68) at ContextMenuService.openContextMenu (contextMenu.service.js:50) at ContextMenuComponent.onMenuEvent (contextMenu.component.js:50) at SafeSubscriber.eval [as _next] (contextMenu.component.js:33) at SafeSubscriber.__tryOrUnsub (Subscriber.js:239) at SafeSubscriber.next (Subscriber.js:186) at Subscriber._next (Subscriber.js:127)

I was hopping that this approach to export ngx-contextmenu to another angular app is the right way?

ngx-contextmenu: 2.0.0-beta.7 angular/cdk: 2.0.0-beta.11 angular: 4.x.x

[isaacplmann]

Basically, you're trying to use your app A as a library for app B. The problem is that libraries need to be compiled in a different way in order to be consumed in another app.

Your specific problem is because there are two different ComponentPortal instances - one in app A and one in app B. They are compiled from the same code and could be used interchangeably, but Angular doesn't know that.

You might want to look into nx and see how they separate out shared code between multiple apps.