indigosoft / ngxd Goto Github PK

Here is my template:

<mat-accordion>
  <mat-expansion-panel *ngFor="let sc of showcases;let i = index;" [expanded]="i === 0">
    <mat-expansion-panel-header>
      <mat-panel-title>{{sc.name}}</mat-panel-title>
      <mat-panel-description>{{sc.description}}</mat-panel-description>
    </mat-expansion-panel-header>
    <ng-template matExpansionPanelContent>
      <ng-container
        *ngxComponentOutlet="components.get(sc['component'])['component'];
                             context: components.get(sc['component'])['context'](sc)|async">
      </ng-container>
    </ng-template>
  </mat-expansion-panel>
</mat-accordion>

where components: Map<string, { component: Type<any>; context: (x: ChartTemplate) => Observable<any> }>

The values (bindings) that context provides is available only in ngOnChanges and NOT in ngOnInit nor in ngAfterInit. That is not o problem until there is a MatSnackBar that needs info from context and if opened from ngOnChanges gives ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'role: undefined'. Current value: 'role: alert'. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook ?

Hi, when will it support ng11 ?

Hello! This is a cool library. Thank you for that. But I faced with one problem. I rendered some components with context providing and met with one intresting log message in console:

ERROR: not found '${insidePropName}' input, it has getter only, please add setter!
https://github.com/IndigoSoft/ngxd/blob/master/projects/core/src/lib/adapter/adapter-ref.ts#L197

The reason was in matching names in container component and rendered dynamic component. After that I have made some investigations and now I'm not sure is it okay and safe for me to render this component with this auto binding, what if there will be some unexpected and unwanted behavior.

So what do you think about adding an option for disabling this auto binding? I just want to render component, provide some context to it and also that this component will update inputs on context change.

Hello, I've forked a stackblitz from one of the other (solved) issues here.

I was trying to create a very basic example where the "name" property in the "hello" component is emitting an event every time a "set" occurs (so one could keep track of its value in its parent component).

The following is all I changed: ( explanations in comments)

export class HelloComponent  {
  @Output() myClick: EventEmitter<string> = new EventEmitter<string>();
  @Output() setEvent: EventEmitter<string> = new EventEmitter<string>(); // added a second emitter
  component = DynamicComponent;
  
  private _name: string; // made name private
  @Input() set name(value : string){
    console.log('set name', value, this); // log so you can see the error and context
    this._name = value; 
    this.setEvent.emit(value); // emitting the event so the parent component (in this case app component) can listen to it and keep track of the value
  }
  get name(){ return this._name;}
  
}  

I then encounter a very strange phenomenon where "set name()" is run multiple times (without any actual need) with the last of them having an empty context ( this = {} ) thus throwing the following errors:

ERROR TypeError: Cannot read property 'emit' of undefined

ERROR CONTEXT

I should note that I'm specifically interested in the "name" property (that comes via @input) - the goal is to keep its value synced with the parent in case it changes.

Also I should mention that if you give DynamicComponent a selector and place it directly in your template the issue doesn't occur. I've tested thoroughly seems to be an issue with ngxd.

Could you maybe shed some light on this behaviour? What am I doing wrong?
Thanks :)

When? ))

I followed your steps but facing this error:

core.js:15724 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'ngxComponentOutlet' since it isn't a known property of 'ng-container'.
1. If 'ngxComponentOutlet' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<div *ngFor="let widget of widgets.widgets" class="col-lg-4">
                        <ng-container [ERROR ->]*ngxComponentOutlet="widget.component; data: widget.data">
                        </ng-container>
  "): ng:///HomePageModule/HomePage.html@307:38

Here's my codes & env.

html

<div *ngFor="let widget of widgets.widgets" class="col-lg-4">
  <ng-container *ngxComponentOutlet="widget.component; data: widget.data">
  </ng-container>
</div>

app.modules.ts

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, IonicModule.forRoot(), AppRoutingModule,
    NgxdModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

packages.json

"@angular/common": "^7.2.2",
"@angular/core": "^7.2.2",
"@angular/forms": "^7.2.2",
"@angular/http": "^7.2.2",
"@ngxd/core": "^7.0.3",

Thanks

When I try to compile with tsconfig.json#

{
  ...,
  "compilerOptions": {...},
  "angularCompilerOptions": {
    "enableIvy": true
  }
}

I got the error
ERROR in Value at position 12 in the NgModule.declarationss of NgStringPipesModule is not a reference: [object Object]

Environment:

@ngxd/[email protected]

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 8.0.2
Node: 8.10.0
OS: linux x64
Angular: 8.0.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.2
@angular-devkit/build-angular     0.800.2
@angular-devkit/build-optimizer   0.800.2
@angular-devkit/build-webpack     0.800.2
@angular-devkit/core              8.0.2
@angular-devkit/schematics        8.0.2
@angular/cli                      8.0.2
@angular/flex-layout              8.0.0-beta.26
@ngtools/webpack                  8.0.2
@schematics/angular               8.0.2
@schematics/update                0.800.2
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.30.0
    

I'm using context to be able to have different inputs to my dynamic components. Is there a way to do the same for outputs? I don't know what my outputs will be ahead of time. This is fine for inputs but I can't figure it out for outputs

        <ng-container
           *ngxComponentOutlet="col.component; context: col.inputs"
         >
         </ng-container>

I'm building a table component that can take either values or components as data. Wondering how to bind outputs

`[
        { type: 'data', value: pipeline.name },
        { type: 'data', value: pipeline.time_last_modified },
        { type: 'data', value: 'Source' },
        { type: 'data', value: 'Dest' },
        { type: 'data', value: 'Schema Update' },
        { type: 'data', value: 'Schedule' },
        { type: 'data', value: 'Status' },
        {
          type: 'component',
          component: LockComponent,
          inputs: { owner: pipeline.lock_owner },
        },
        {
          type: 'component',
          component: PipelineLibraryActionsButtonsComponent,
          inputs: { pipeline },
          outputs: {run}
        },
      ])`

Error: node_modules/@ngxd/core/lib/adapter/adapter.experimental.d.ts:39:22 - error TS2720: Class 'DynamicComponentRef<T>' incorrectly implements class 'ComponentRef<T>'. Did you mean to extend 'ComponentRef<T>' and inherit its members as a subclass?
  Property 'setInput' is missing in type 'DynamicComponentRef<T>' but required in type 'ComponentRef<T>'.

39 export declare class DynamicComponentRef<T> implements ComponentRef<T> {
                        ~~~~~~~~~~~~~~~~~~~

  node_modules/@angular/core/index.d.ts:1377:14
    1377     abstract setInput(name: string, value: unknown): void;
                      ~~~~~~~~
    'setInput' is declared here.

I think it has to do with:

• add ability to set inputs on ComponentRef (angular/angular#46641)

I'm guessing this is incorrect behaviour?

If not, is there another way to detect when this occurs in the child component, as it may need reinitialisation?

Error when running ngxd under Angular 9:

ERROR TypeError: Cannot delete property 'layout' of [object Object]
    at HostInputAdapter.dispose (ngxd-core.js:183)
    at HostInputAdapter.detach (ngxd-core.js:161)
    at HostAdapter.detachInput (ngxd-core.js:243)
    at NgxComponentOutletAdapterRef.detachHostInput (ngxd-core.js:390)
    at NgxComponentOutletAdapterRef.updateContext (ngxd-core.js:330)
    at NgxComponentOutletDirective.applyContext (ngxd-core.js:770)
    at NgxComponentOutletDirective.createAdapterRef (ngxd-core.js:787)
    at NgxComponentOutletDirective.ngOnChanges (ngxd-core.js:759)
    at NgxComponentOutletDirective.wrapOnChangesHook_inPreviousChangesStorage (core.js:26448)
    at callHook (core.js:3913)

Where 'layout' is part of *ngxComponentOutlet context.
Works fine with ngxd running under Angular 8.
Environment:

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 9.0.2
Node: 13.1.0
OS: linux x64

Angular: 9.0.1
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.2
@angular-devkit/build-angular     0.900.2
@angular-devkit/build-optimizer   0.900.2
@angular-devkit/build-webpack     0.900.2
@angular-devkit/core              9.0.2
@angular-devkit/schematics        9.0.2
@angular/cdk                      9.0.0
@angular/cli                      9.0.2
@angular/flex-layout              9.0.0-beta.29
@angular/material                 9.0.0
@ngtools/webpack                  9.0.2
@schematics/angular               9.0.2
@schematics/update                0.900.2
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2
    

I have 2 dynamic components with events.
First dymamic component have few events:
Output('action1') action1= new EventEmitter<any>();
Output('action2') action2= new EventEmitter<any>();
Output('action3') action3= new EventEmitter<any>();

Also i have host component for this dynamic components. All components registered in declarations/entry components

HTML of host:
<ng-container *ngxComponentOutlet="component; context: {data: data}">

events in host, like in first dynamic component:
Output('action1') action1= new EventEmitter<any>();
Output('action2') action2= new EventEmitter<any>();
Output('action3') action3= new EventEmitter<any>();

and events doesnt fires on in host wrapper component:

<journal-host [component]="getDisplayedComponent()"
                [data]="data"
                (action1)="onAction1($event)"
                (action3)="onAction2($event)"
                (action3)="onAction3($event)"></journal-host>

Why I cant reach those onAction1/2/3() functions in my wrapper? IDE autocomplete tells me that I have this events, but they doesnt fire. Help please

UPD:
seems like it works when event name isn't specified (Output('action2') action2 = ... => Output() action2 = ....)

Trying to use ngxd with CVA components, but it's not working. Is there any possibility of using it?

Hi,

I'm looking to use NGXD to load dynamic components and content provided by a headless CMS like Contentful, but I've come into a bit of an issue where I'm struggling to figure out how to use content projection with the dynamically loaded components.

I have an X Column component that can host a number of predefined components, some of which are able to take complex content using ng-content. Is this something this package can handle? And is it possible to get an example?

Here's some demo code I've created to explain the situation https://stackblitz.com/edit/angular-simple-dynamic-8emvyb?file=src/app/app.module.ts

Describe the feature you would like to see added

Add support for Angular 17

Describe the solution you'd like

Update peer dependencies to allow angular 16:

"peerDependencies": {
    "@angular/common": "^15.0.0",
    "@angular/core": "^15.0.0",
    "rxjs": ">=6.0.0"
}

Describe alternatives you have considered

1. Keep on old angular
2. Force update anyway and run "npm install --force" every time

The 9.x train of ngxd/core uses typescript 3.7, which is incompatible with angular 8.x and earlier.

I'm not sure which setup was intended here, but one of two things should be fixed:
If the 9.x train was meant to be used for angular 7,8,9 the typescript version should be dropped back.
If the intention was that angular version would match the release version (ie Angular 8 runs with the 8.x release train), please add that to the readme somewhere as the instructions/header of compatibility would lead you to believe otherwise.

When the context ctx gets updated, the underlying component, defined by components.get(tmpl['component'])['component'] does not get updated (its ngOnChanges does not get called).

Everything works fine on first load. What should I do in order to get changes propagated downward?

Here is the component definition:

@Component({
  selector: 'app-layout-three-host-component',
  template: `
<ng-container
  *ngxComponentOutlet="components.get(tmpl['component'])['component']; context: ctx;">
</ng-container>
`
})
export class LayoutThreeHostComponent implements OnChanges {

  @Input() tmpl: ChartTemplate;
  @Input() ctx: any;
  @Input() components: Map<string, { component: Type<any>; context: (x: ChartTemplate) => Observable<any> }>;

  ngOnChanges(changes: SimpleChanges) {
    console.log('LayoutThreeHostComponent: changes: ', changes);
  }
}

Thanks!

Hi, When attempting to use the event (ngxComponentOutletActivate), I am getting the an error as displayed by the screen capture below:

I am suing "@angular/cli": "^9.0.0-rc.0" and "@angular/material": "^9.0.0-rc.0".

I would appreciate your help as I need to use the event.

Hi,
Given the following:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 6';
  component = DynamicComponent;
  onClick($event) {
    alert($event);
  }
}

How do I access the instance of the DynamicComponent to set a property?
Attempting access in a @ViewChild() does not seem to work.

NB. I note that the docs state that there is access to the component? I can't seem to get it though

I'm having trouble importing this lib to angular 13, it should be compiled to ivy in advance

Hi
I have two lazy loaded modules - registration and preferences. I am using:

1. "@angular/cli": "^9.0.0-rc.6" with similar @angular packages
2. "@ngxd/core": "^8.0.0"
3. Windows 10 environment

The registration modules use ngxd/core to load forms dynamically into an accordion.

Navigation via a sidebar from /preferences to /registration is fine. However, navigating from the /registration to /preferences crashes the application with the following errors:

core.js:6382 ERROR Error: Uncaught (in promise): TypeError: Cannot delete property 'hasIcon' of [object Object] TypeError: Cannot delete property 'hasIcon' of [object Object] at HostInputAdapter.dispose (ngxd-core.js:183) at HostInputAdapter.detach (ngxd-core.js:161) at HostAdapter.detachInput (ngxd-core.js:243) at NgxComponentOutletAdapterRef.detachHostInput (ngxd-core.js:390) at NgxComponentOutletAdapterRef.disposeInputs (ngxd-core.js:487) at NgxComponentOutletAdapterRef.dispose (ngxd-core.js:304) at NgxComponentOutletDirective.destroyAdapterRef (ngxd-core.js:798) at NgxComponentOutletDirective.ngOnDestroy (ngxd-core.js:777) at executeOnDestroys (core.js:16128) at cleanUpView (core.js:16036) at resolvePromise (zone-evergreen.js:793) at resolvePromise (zone-evergreen.js:752) at zone-evergreen.js:854 at ZoneDelegate.invokeTask (zone-evergreen.js:400) at Object.onInvokeTask (core.js:41410) at ZoneDelegate.invokeTask (zone-evergreen.js:399) at Zone.runTask (zone-evergreen.js:168) at drainMicroTaskQueue (zone-evergreen.js:570)

Seems as if icons are being deleted.
What do you think? Looking forward to hearing from you. Thanks.

I'm getting the following "ERROR" (actually a warning) on $ npm ls
npm ERR! peer dep missing: @angular/common@^6.0.0-rc.0 || ^6.0.0, required by @ngxd/[email protected]

Here is my $ ng version:

Angular CLI: 7.0.4
Node: 10.0.0
OS: linux x64
Angular: 7.0.3
... animations, cdk, common, compiler, compiler-cli, core, forms
... http, language-service, material, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.10.4
@angular-devkit/build-angular     0.10.4
@angular-devkit/build-optimizer   0.10.4
@angular-devkit/build-webpack     0.10.4
@angular-devkit/core              7.0.4
@angular-devkit/schematics        7.0.4
@angular/cli                      7.0.4
@ngtools/webpack                  7.0.4
@schematics/angular               7.0.4
@schematics/update                0.10.4
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.19.1

Actually it works. Many thanks! This is more of a warning.

@ngxd/[email protected] requires a peer of @angular/common@^6.0.0-rc.0 || ^6.0.0 || ^7.0.0 but none is installed. You must install peer dependencies yourself.

Hello,
I managed to implement lazy load a feature module dynamically and load the the component in the DOM using this library for dynamic rendering of the component.
Works in both JIT and AOT runtime.
I think this feature will be great addition to the list of features this library supports.
Steps:

1. Add a lazy route which will never be accessed like after the path to not found route in the app routing. The lazy loaded module route config should be defined in the root route config.

const appRoutes: Routes = [
  ...
  {
    path: '**',
    component: NotFoundComponent,
    // redirectTo: 'login'
  },
  {
    path: 'lazyModule',
    loadChildren: () => import('./lazyModule/lazyModule.module').then(m => m.LazyModule)
  }
]

2. Define the lazy loaded module and set the entry component as static property on the module class.

import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {LazyFeatureComponent} from './lazy-feature.component';

@NgModule({
  declarations: [LazyFeatureComponent],
  exports: [LazyFeatureComponent],
  entryComponents: [LazyFeatureComponent],
  imports: [ CommonModule]
})
export class LazyModule {
  static entry = LazyFeatureComponent; // This is needed to determine the component we want to render
}

3. Here I created a wrapper component around the this library to load the lazy module.

import {Compiler, Component, Input, NgModuleFactory, OnInit} from '@angular/core';
import {Router} from '@angular/router';

@Component({
  selector: 'app-lazy-load',
  templateUrl: './lazy-load.component.html',
  styleUrls: ['./lazy-load.component.scss']
})
export class LazyLoadComponent implements OnInit {
  @Input() module: string;
  @Input() context: object;

  component: any;
  moduleFactory: NgModuleFactory<any>;

  constructor(private compiler: Compiler, private router: Router) {
  }

  ngOnInit() {
    const routeConfigs = this.router.config.filter(routeConfig => routeConfig.path === this.module);
    if (routeConfigs[0] && routeConfigs[0].loadChildren && routeConfigs[0].loadChildren instanceof Function) {
      (routeConfigs[0].loadChildren() as any)
        .then(module => {
          if (module instanceof NgModuleFactory) { // for AOT runtime
            return module;
          } else { // for JIT runtime
            return this.compiler.compileModuleAsync(module);
          }
        })
        .then(moduleFactory => {
          this.component = (moduleFactory.moduleType as any).entry; // our entry component to our feature
          this.moduleFactory = moduleFactory;
        });
    } else {
      console.error('Lazy module not found.');
    }
  }
}

<ng-container *ngIf="moduleFactory">
  <ng-container
    *ngxComponentOutlet="component; context: context; ngModuleFactory: moduleFactory;">
  </ng-container>
</ng-container>

 <app-lazy-load [context]="{...}"
                 [module]="'lazyModule'"></app-lazy-load>

That is all the setup needed to make a feature module lazy load at runtime when needed depending on data you have.
The loading of the module is the same thing as what angular does on lazy routes here but the code is private and not accessible from Router.
If the angular team makes the code public API in the future we can reuse they're loadModuleFactory method.

Let me know if you have any further questions or need any help integrating this part in the library.

Thanks

Calling ChangeDetectorRef.detectChanges() on parent component doesn't propagate to ngxd loaded child components. Is there any workaround for this besides calling ApplicationRef.tick()?

Hi,
I like ngx-component-outlet. However, I would like to use in ng-template, similar to the example below with another dynamic component creation library:

     <ng-template matExpansionPanelContent>
          <ndc-dynamic
              [ndcDynamicComponent] = 'component'
              [ndcDynamicInputs] = 'componentInputs'
              [ndcDynamicOutputs] = 'componentOutputs'></ndc-dynamic>
        </ng-template>

Can I do something similar with ngx-component-outlet?
Cheers

Describe the feature you would like to see added

Add support for Angular 16

Describe the solution you'd like

Update peer dependencies to allow angular 16:

"peerDependencies": {
    "@angular/common": "^15.0.0",
    "@angular/core": "^15.0.0",
    "rxjs": ">=6.0.0"
}

Describe alternatives you have considered

1. Keep on old angular
2. Force update anyway and run "npm install --force" every time

Output events not caught under AOT.
Works fine (events get caught) in default, no AOT configuration.

Configuration sample (angular.json):

"configurations": {
"stage": {
  "optimization": true,
   "outputHashing": "all",
   "sourceMap": false,
   "extractCss": true,
   "namedChunks": false,
   "aot": true,
   "extractLicenses": true,
   "vendorChunk": false,
   "buildOptimizer": true,
   "fileReplacements": [
     {
       "replace": "src/environments/environment.ts",
       "with": "src/environments/environment.stage.ts"
     }
   ]
 }
}

$ ng version

Angular CLI: 7.3.8
Node: 8.10.0
OS: linux x64
Angular: 7.2.12
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.8
@angular-devkit/build-angular     0.13.8
@angular-devkit/build-optimizer   0.13.8
@angular-devkit/build-webpack     0.13.8
@angular-devkit/core              7.3.8
@angular-devkit/schematics        7.3.8
@angular/cdk                      7.3.7
@angular/cli                      7.3.8
@angular/flex-layout              7.0.0-beta.24
@angular/material                 7.3.7
@ngtools/webpack                  7.3.8
@schematics/angular               7.3.8
@schematics/update                0.13.8
rxjs                              6.4.0
typescript                        3.2.4
webpack                           4.29.0

Hello.
I am getting this error starting with version 10 of Angular (...i guess. Earlier it worked without problems).
It seems to be an issue with accessing async pipe when instantiating a component with *ngxComponentOutlet:

ERROR Error: The pipe 'async' could not be found!
    at getPipeDef$1 (core.js:24625)
    at ɵɵpipe (core.js:24588)
    at ChecksMapComponent_Template (template.html:25)
    at executeTemplate (core.js:7302)
    at renderView (core.js:7111)
    at renderComponent (core.js:8372)
    at renderChildComponents (core.js:6970)
    at renderView (core.js:7136)
    at ComponentFactory$1.create (core.js:22161)
    at NgxComponentOutletAdapterBuilder.create (ngxd-core.js:1112)

Env:

$ npm list @ngxd/core
....
└── @ngxd/[email protected] 

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 10.0.6
Node: 14.8.0
OS: linux x64

Angular: 10.0.9
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.6
@angular-devkit/build-angular     0.1000.6
@angular-devkit/build-optimizer   0.1000.6
@angular-devkit/build-webpack     0.1000.6
@angular-devkit/core              10.0.6
@angular-devkit/schematics        0.6.8
@angular/cdk                      10.1.3
@angular/cli                      10.0.6
@angular/flex-layout              10.0.0-beta.32
@angular/material                 10.1.3
@ngtools/webpack                  10.0.6
@schematics/angular               10.0.6
@schematics/update                0.1000.6
rxjs                              6.6.2
typescript                        3.9.7
webpack                           4.43.0

It seems to me that a great use-case for dynamic components in Angular is to lazy load multiple components, especially from separate Angular Libraries. I want use the animals example with the lazy resolve technique.

Here is my forked Stackblitz, however, I receive an error.

ERROR Error: No component factory found for LazyDogDynamic. Did you add it to @NgModule.entryComponents?

No matter where I add entryComponents, I still get the error. How do I get a working example using these two techniques? Sorry, the readme documentation does not provide enough details on lazy loading.

Now that NgModuleFactoryLoader is being deprecated what could be the right syntax for lazy loading our component modules?

Reproduction: https://stackblitz.com/edit/tplk-angular-ngxd-injector-issue?file=src%2Fapp%2Fapp.module.ts

As you can see, even though there's a new injector instance is passed into the directive, the component doesn't get recreated with a new injector.

Hi,

Just upgrade to Angular 9 and seems to be that the library doesn't work when all components are OnPush. Any ideas on how to fix this ?