Angular 4动态组件加载报错：Cannot read property 'createComponent' of undefined

Hey there! As someone who's stumbled through Angular dynamic component hiccups before, let's work through fixing your createComponent problems for your project setup—with the header, Events section, and its two dynamic components (EventDetailComponent and UserFormComponent).

First, Let's Cover the Core Setup You Might Be Missing #

Dynamic components in Angular 4 rely on a few key pieces to play nice with createComponent:

1. Register Dynamic Components in entryComponents

Angular 4 won't generate component factories for components you load dynamically unless you add them to your module's entryComponents array. This is a super common gotcha!

@NgModule({
  declarations: [
    HeaderComponent,
    EventsSectionComponent,
    EventDetailComponent,
    UserFormComponent
  ],
  entryComponents: [ // Don't skip this step!
    EventDetailComponent,
    UserFormComponent
  ],
  // ... other module config (imports, providers, etc.)
})
export class YourAppModule { }

2. Properly Inject ComponentFactoryResolver and Get ViewContainerRef

You need these two services to create and mount dynamic components. Here's how to implement this in your parent EventsSectionComponent:

import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';
import { EventDetailComponent } from './event-detail.component';
import { UserFormComponent } from './user-form.component';

@Component({
  selector: 'app-events-section',
  template: `
    <!-- Container where dynamic components will be mounted -->
    <div #dynamicComponentHost></div>
  `
})
export class EventsSectionComponent {
  // Get reference to the container using template variable
  @ViewChild('dynamicComponentHost', { read: ViewContainerRef }) 
  dynamicHost: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

  // Call this when the "Event" tab is clicked
  loadEventDetail(fetchedEventData: any) {
    // Clear existing components if switching between dynamic components
    this.dynamicHost.clear();

    // Get the factory for EventDetailComponent
    const eventDetailFactory = this.componentFactoryResolver.resolveComponentFactory(EventDetailComponent);
    
    // Create and mount the component to the container
    const eventDetailRef = this.dynamicHost.createComponent(eventDetailFactory);
    
    // Pass fetched event data to the dynamic component (if it has an @Input() property)
    eventDetailRef.instance.eventData = fetchedEventData;
  }

  // Similar method for loading UserFormComponent if needed
  loadUserForm() {
    this.dynamicHost.clear();
    const userFormFactory = this.componentFactoryResolver.resolveComponentFactory(UserFormComponent);
    this.dynamicHost.createComponent(userFormFactory);
  }
}

3. Sync Data Loading with Component Creation

Since you call an API when the "Event" tab is clicked, make sure you create the component after the data is fetched (or update the component's data once it arrives):

// In your header/navigation component, handle tab click
onEventTabClick() {
  this.eventApiService.getEventDetails().subscribe((eventData) => {
    // Pass the fetched data to the EventsSection to load the dynamic component
    this.eventsSectionComponent.loadEventDetail(eventData);
  });
}

Common createComponent Errors & Quick Fixes #

• "No component factory found for XComponent": Double-check that the component is added to both declarations and entryComponents in your module.
• "Cannot read property 'createComponent' of undefined": Ensure your ViewContainerRef is properly referenced (verify the template variable name matches the @ViewChild selector, and that the container exists when you call createComponent).
• Dynamic component doesn't display data: Confirm your dynamic component has an @Input() property for the data, and that you're assigning it correctly after component creation. If changes aren't reflecting, manually trigger change detection:

  eventDetailRef.changeDetectorRef.detectChanges();
  

内容的提问来源于stack exchange，提问作者Sharma Vikram