Açısal 4: Bileşen fabrikası bulunamadı, @ NgModule.entryComponents'e eklediniz mi?

Webpack ile Açısal 4 şablonu kullanıyorum ve bir bileşen (ConfirmComponent) kullanmaya çalıştığımda bu hata var:

ConfirmComponent için hiçbir bileşen fabrikası bulunamadı. @ NgModule.entryComponents'e eklediniz mi?

Bileşen app.module.server.ts

@NgModule({
  bootstrap: [ AppComponent ],
  imports: [
    // ...
  ],
  entryComponents: [
    ConfirmComponent,
  ],
})
export class AppModule { }

Bende var app.module.browser.tsveapp.module.shared.ts

Bunu nasıl düzeltebilirim?

Bunu module.ts,

declarations: [
  AppComponent,
  ConfirmComponent
]

ConfirmComponent başka bir modüldeyse, orayı dışa aktarmanız gerekir, böylece dışarıda kullanabilirsiniz, ekleyin:

exports: [ ConfirmComponent ]

--- Ivy'yi açıkça etkinleştirerek Açısal 9 veya Açısal 8'i güncelleyin ---

Ivy ile Giriş Bileşenleri artık gerekli değildir ve artık kullanımdan kaldırılmıştır

--- Ivy devre dışı olan Açısal 9 ve 8 için ---

Dinamik olarak yüklenmiş bir bileşen söz konusu olduğunda ve bir ComponentFactory'nin oluşturulması için, bileşenin modülün giriş bileşenlerine de eklenmesi gerekir:

declarations: [
  AppComponent,
  ConfirmComponent
],
entryComponents: [ConfirmComponent],

entryComponents tanımına göre

Bu modül tanımlandığında derlenmesi gereken bileşenlerin listesini belirtir. Burada listelenen her bileşen için Angular bir ComponentFactory oluşturur ve bunu ComponentFactoryResolver'da depolar.

Ayrıntılara bakın hakkında entryComponent:

Dinamik sonra herhangi bir bileşen yüklüyorsanız hem koymak gerekir declarationsve entryComponent:

@NgModule({
  imports: [...],
  exports: [...],
  entryComponents: [ConfirmComponent,..],
  declarations: [ConfirmComponent,...],
  providers: [...]
})

TL; DR: ile ng6 bir hizmet providedIn: "root"Bileşen ilave değilken ComponentFactory bulamıyorum entryComponentsait app.module .

Bu sorun, açısal 6'yı bir hizmette dinamik olarak Bileşen oluşturma ile birlikte kullanıyorsanız da oluşabilir!

Örneğin, bir Yer Paylaşımı oluşturma:

@Injectable({
  providedIn: "root"
})
export class OverlayService {

  constructor(private _overlay: Overlay) {}

  openOverlay() {
    const overlayRef = this._createOverlay();
    const portal = new ComponentPortal(OverlayExampleComponent);

    overlayRef.attach(portal).instance;
  }
}

Sorun

sağlananIn: "kök"

app.module içinde bu hizmeti sağlayan tanım .

Hizmetiniz, örneğin, OverlayExampleComponent öğesini de bildirdiğiniz ve giriş bileşenlerine eklediğiniz "OverlayModule" içinde bulunuyorsa, hizmet OverlayExampleComponent için ComponentFactory öğesini bulamaz.

Aynı sorunu yaşadım. Bu durumda imports [...]çok önemlidir, çünkü içe aktarmazsanız çalışmaz NgbModalModule.

Hata açıklaması bileşenlerin entryComponentsdiziye eklenmesi gerektiğini ve açık olduğunu söylüyor , ancak bunu ilk başta eklediğinizden emin olun:

imports: [
    ...
    NgbModalModule,
    ...
  ],

Bu bileşeni, uygulamanızın modülünün @NgModule içindeki entryComponents öğesine ekleyin:

entryComponents:[ConfirmComponent],

beyanlar yanında:

declarations: [
    AppComponent,
    ConfirmComponent
]

İthalatta 'NgbModalModule' ve inputComponents App.module.ts içindeki bileşen adınızı aşağıda gösterildiği gibi ekleyin

@NgModuledecorator işlevi altında inputComponents öğesine dinamik olarak oluşturulan bileşenleri yerleştirin.

@NgModule({
    imports: [
        FormsModule,
        CommonModule,
        DashbaordRoutingModule
    ],
    declarations: [
        MainComponent,
        TestDialog
    ],
    entryComponents: [
        TestDialog
    ]
})

Açısal 6 ile aynı problemim var, bu benim için işe yaradı:

@NgModule({
...
entryComponents: [ConfirmComponent],
providers:[ConfirmService]

})

ConfirmService gibi bir hizmetiniz varsa , root yerine geçerli modülün sağlayıcılarında bildirilmelidir

Bootstrap modalında da aynı sorunu yaşadım

'@ ng-bootstrap / ng-bootstrap' den {NgbModal} dosyasını içe aktarın;

Bu durumda, diğer modüllerin önerdiği gibi bileşeni modül bildirimlerine ve inputComponent'lerine ekleyin, ancak bunu modülünüze de ekleyin

'@ ng-bootstrap / ng-bootstrap' den {NgbModule} dosyasını içe aktarın;

imports: [
   NgbModule.forRoot(),
   ...
]

Bu hata, bir bileşeni dinamik olarak yüklemeye çalıştığınızda oluşur ve:

1. Yüklemek istediğiniz bileşen yönlendirme modülü değil
2. Bileşen, modül giriş bileşenlerinde yok.

Yönlendirme Modülünde

const routes: Routes = [{ path: 'confirm-component', component: ConfirmComponent,data: {}}]

veya modülde

entryComponents: [
ConfirmComponent
} 

Bu hatayı düzeltmek için bileşene bir yönlendirici ekleyebilir veya girişin modül bileşenlerine ekleyebilirsiniz.

1. Bileşene bir yönlendirici ekleyin. Bu yaklaşımın geri çekilmesi, bileşeninize bu url ile erişilebileceğidir.
2. Giriş bileşenlerine ekleyin. bu durumda bileşeninizde herhangi bir url bulunmayacak ve url ile erişilemeyecektir.

Dinamik bileşenler oluştururken Angular7'de de aynı sorunu yaşadım. Dinamik olarak yüklenmesi gereken iki bileşen (TreatListComponent, MyTreatComponent) vardır. Az önce app.module.ts dosyama entryComponents dizisini ekledim.

    entryComponents: [
    TreatListComponent,
    MyTreatComponent
  ],

uygulamanızda yönlendirme kullanıyorsanız

yönlendirme yoluna yeni bileşenler eklediğinizden emin olun

Örneğin :

    const appRoutes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'home', component: HomeComponent },
  { path: 'fundList',      component: FundListComponent },
];

Benim durumumda inputComponent'lere hiç ihtiyacım yoktu - sadece aşağıdaki bağlantıda açıklandığı gibi temel kurulum, ancak hem ana uygulama modülüne hem de eklenti modülüne içe aktarmayı dahil etmeliydim.

imports: [
    NgbModule.forRoot(),
    ...
]

https://medium.com/@sunilk/getting-started-angular-6-and-ng-bootstrap-4-4b314e015c1c

Yalnızca, bileşene kipte dahil edilecekse, giriş Bileşenlerine eklemeniz gerekir. Dokümanlardan:

Mevcut bir bileşeni kalıcı pencerenin içeriği olarak iletebilirsiniz. Bu durumda, içerik bileşenini NgModule'nizin inputComponents bölümü olarak eklemeyi unutmayın.

Aynı sorunu dinamik bileşenler kullanarak ag-grid ile de alıyordum. Ag-grid modülüne dinamik bileşen eklemeniz gerektiğini keşfettim .withComponents []

ithalat: [StratoMaterialModule, BrowserModule, AppRoutingModule, HttpClientModule, BrowserAnimationsModule, NgbModule.forRoot (), FormsModule, ReactiveFormsModule, AppRoutingModule, AgGridModule.withComponents (ProjectUpdateButtonComponent) ],

Benim durumumda, MatDialogModulebir alt modülde ithalat eklemeyi unuttum .

Burada açıklama için. ComponentFactoryResolverDoğrudan bileşen içinde kullanmıyorsanız ve onu hizmete soyutlamak istiyorsanız, daha sonra bileşene enjekte edilirse, bu modülün sağlayıcıları altında yüklemeniz gerekir, çünkü tembel yüklendiyse çalışmaz.

Bileşen iletişim kutusu sınıfını girdikten sonra hala hatayla karşılaşırsanız entryComponents, yeniden başlatmayı deneyin ng serve- bu benim için çalıştı.

Benim hatam .html yanlış parametreleri ile NgbModal açık yöntemi çağırıyordu

1. entryComponentshayati öneme sahip. Bu konuda yukarıdaki cevaplar doğrudur.

Fakat...

2. Kipi (ortak bir desen) açan bir hizmet sağlıyorsanız ve iletişim kutusu bileşenini tanımlayan modülünüz AppModule'a yüklenmemişse, olarak değiştirmeniz providedIn: 'root'gerekir providedIn: MyModule. Genel iyi uygulama olarak, sadece providedIn: SomeModulemodüllerdeki tüm iletişim hizmetlerini kullanmalısınız .

İçe olmalıdır NgbModuleiçinde modül böyle:

@NgModule({
  declarations: [
    AboutModalComponent
  ],
  imports: [
    CommonModule,
    SharedModule,
    RouterModule,
    FormsModule,
    ReactiveFormsModule,
    NgxLoadingModule,
    NgbDatepickerModule,
    NgbModule
  ],
  entryComponents: [AboutModalComponent]
})
 export class HomeModule {}

Angular8 kullanıyorum ve bileşeni dinamik olarak başka bir modül açmaya çalışıyorum , Bu durumda, elbette bileşene ek olarakimport the module bileşeni açmaya çalışan modüle girmeniz ve diziye listelemeniz gerekir önceki cevaplar gibi. exportentryComponents

imports: [
    ...
    TheModuleThatOwnTheTargetedComponent,
    ...
  ],

Benim durumumda ben bu sorunu çözdü:
yerleştirerek 1) NgxMaterialTimepickerModuleiçinde app module imports:[ ]
yerleştirerek 2) NgxMaterialTimepickerModuleiçinde testmodule.ts imports:[ ]
yerleştirerek 3) testcomponentiçinde declartions:[ ]veentryComponents:[ ]

(Açısal 8+ sürümünü kullanıyorum)

App.module'daki tüm yeni sayfalar

@NgModule({
  declarations: [
    MyApp,
    RegisterPage,
    OtpPage,
    LoginPage,
    ForgetPasswordPage,ChatlistPage,ChatPage,TabsPage

    // AboutPage,

    // BusinessDetailDescPage,
    // BusinessDescPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot(),
    HttpClientModule,
    NgxBarcodeModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    RegisterPage,
    OtpPage,
    LoginPage,
    ForgetPasswordPage,ChatlistPage,ChatPage,TabsPage
    // AboutPage,

    // BusinessDetailDescPage,
    // BusinessDescPage
  ],

 - 


----------


---------