Angular 4: không tìm thấy nhà máy sản xuất thành phần nào, bạn đã thêm nó vào @ NgModule.entryComponents chưa?

Tôi đang sử dụng mẫu Angular 4 với webpack và tôi gặp lỗi này khi tôi cố gắng sử dụng một thành phần (ConfirmComponent):

Không tìm thấy nhà máy thành phần nào cho ConfirmComponent. Bạn đã thêm nó vào @ NgModule.entryComponents?

Thành phần được khai báo trong app.module.server.ts

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

Tôi cũng có app.module.browser.tsvàapp.module.shared.ts

Lam sao tôi co thể sửa no?

Thêm cái này vào module.ts,

declarations: [
  AppComponent,
  ConfirmComponent
]

nếu ConfirmComponent nằm trong một mô-đun khác, bạn cần xuất nó ở đó để bạn có thể sử dụng nó bên ngoài, thêm:

exports: [ ConfirmComponent ]

--- Cập nhật Angular 9 hoặc Angular 8 với Ivy được kích hoạt rõ ràng ---

Các thành phần nhập cảnh với Ivy không còn cần thiết nữa và hiện không được chấp nhận

--- cho Angular 9 và 8 với Ivy bị vô hiệu hóa ---

Trong trường hợp thành phần được tải động và để tạo ra một phần tử linh hoạt, thành phần này cũng phải được thêm vào entryComponents của mô-đun:

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

theo định nghĩa của entryComponents

Chỉ định danh sách các thành phần sẽ được biên dịch khi mô-đun này được xác định. Đối với mỗi thành phần được liệt kê ở đây, Angular sẽ tạo ra một ElementFactory và lưu trữ nó trong ElementFactoryResolver.

Xem chi tiết về entryComponent:

Nếu bạn đang tải bất kỳ thành phần nào một cách linh hoạt thì bạn cần đặt nó vào cả hai declarationsvà entryComponent:

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

TL; DR: Một dịch vụ trong ng6 với providedIn: "root"không thể tìm thấy ComponentFactory khi phần không được thêm vào trong entryComponentscủa app.module .

Vấn đề này cũng có thể xảy ra nếu bạn đang sử dụng góc 6 kết hợp với việc tạo động một Thành phần trong dịch vụ!

Ví dụ: tạo Lớp phủ:

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

  constructor(private _overlay: Overlay) {}

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

    overlayRef.attach(portal).instance;
  }
}

Vấn đề là

cung cấp trong: "root"

định nghĩa, cung cấp dịch vụ này trong app.module .

Vì vậy, nếu dịch vụ của bạn được đặt tại, ví dụ: "OverlayModule", nơi bạn cũng đã khai báo OverlayExampleComponent và thêm nó vào entryComponents, dịch vụ không thể tìm thấy PartFactory cho OverlayExampleComponent.

Tôi gặp vấn đề tương tự. Trong trường hợp imports [...]này là rất quan trọng, vì nó sẽ không hoạt động nếu bạn không nhập NgbModalModule.

Mô tả lỗi nói rằng các thành phần nên được thêm vào entryComponentsmảng và điều đó là hiển nhiên, nhưng hãy chắc chắn rằng bạn đã thêm cái này vào vị trí đầu tiên:

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

Thêm thành phần đó vào entryComponents trong @NgModule của mô-đun ứng dụng của bạn:

entryComponents:[ConfirmComponent],

cũng như các Tuyên bố:

declarations: [
    AppComponent,
    ConfirmComponent
]

Thêm 'NgbModalModule' trong nhập khẩu và tên thành phần của bạn trong entryComponents App.module.ts như hiển thị bên dưới

Đặt các thành phần được tạo động vào entryComponents dưới hàm @NgModiatedecorator.

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

Tôi có cùng một vấn đề với góc 6, đó là những gì làm việc cho tôi:

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

})

Nếu bạn có một dịch vụ như ConfirmService , phải được khai báo trong các nhà cung cấp mô-đun hiện tại thay vì root

Tôi đã có cùng một vấn đề cho phương thức bootstrap

nhập {NgbModal} từ '@ ng-bootstrap / ng-bootstrap';

Nếu đây là trường hợp của bạn, chỉ cần thêm thành phần vào khai báo mô-đun và entryComponents như các phản hồi khác đề xuất, nhưng cũng thêm điều này vào mô-đun của bạn

nhập {NgbModule} từ '@ ng-bootstrap / ng-bootstrap';

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

Lỗi này xảy ra khi bạn cố gắng tải một thành phần động và:

1. Thành phần bạn muốn tải không phải là mô đun định tuyến
2. Thành phần này không có trong entryComponents mô-đun.

trong định tuyến

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

hoặc trong mô-đun

entryComponents: [
ConfirmComponent
} 

Để khắc phục lỗi này, bạn có thể thêm bộ định tuyến vào thành phần hoặc thêm nó vào entryComponents của mô-đun.

1. Thêm một bộ định tuyến vào thành phần.drawback của phương pháp này là thành phần của bạn sẽ có thể truy cập được bằng url đó.
2. Thêm nó vào entryComponents. trong trường hợp này, thành phần của bạn sẽ không có bất kỳ url nào được đính kèm và nó sẽ không thể truy cập được bằng url.

Tôi gặp vấn đề tương tự ở Angular7 khi tôi tạo các thành phần động. Có hai thành phần (TreatListComponent, MyTreatComponent) cần được tải động. Tôi vừa thêm mảng entryComponents vào tệp app.module.ts của mình.

    entryComponents: [
    TreatListComponent,
    MyTreatComponent
  ],

nếu bạn sử dụng định tuyến trong ứng dụng của bạn

đảm bảo Thêm các thành phần mới vào đường dẫn định tuyến

ví dụ :

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

Trong trường hợp của tôi, tôi hoàn toàn không cần entryComponents - chỉ cần thiết lập cơ bản như được mô tả trong liên kết bên dưới, nhưng tôi cần bao gồm nhập trong cả mô-đun ứng dụng chính và mô-đun kèm theo.

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

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

Bạn chỉ cần thêm nó vào entryComponents nếu một thành phần sẽ được đưa vào phương thức. Từ các tài liệu:

Bạn có thể vượt qua một thành phần hiện có dưới dạng nội dung của cửa sổ phương thức. Trong trường hợp này, hãy nhớ thêm thành phần nội dung dưới dạng phần entryComponents của NgModule.

Tôi đã gặp vấn đề tương tự với lưới điện sử dụng các thành phần động. Tôi phát hiện ra bạn cần thêm thành phần động vào mô-đun ag-lưới .withComponents []

nhập khẩu: [StratoMaterialModule, BrowserModule, AppRoutingModule, HttpClientModule, BrowserAnimationsModule, NgbModule.forRoot (), FormsModule, ReactiveFormsModule, AppRoutingModule, AgGridModule.withComponents (ProjectUpdateButtonComponent) ],

Trong trường hợp của tôi, tôi đã quên thêm MatDialogModulevào nhập khẩu trong một mô-đun con.

Để làm rõ ở đây. Trong trường hợp bạn không sử dụng ComponentFactoryResolvertrực tiếp trong thành phần và bạn muốn trừu tượng hóa nó thành dịch vụ, sau đó được đưa vào thành phần bạn phải tải nó theo nhà cung cấp cho mô-đun đó, vì nếu lười tải thì nó sẽ không hoạt động.

Trong trường hợp bạn vẫn còn lỗi sau khi cung cấp lớp hộp thoại thành phần entryComponents, hãy thử khởi động lại ng serve- nó hoạt động với tôi.

Lỗi của tôi là gọi phương thức mở NgbModal với các tham số không chính xác từ .html

Bạn nên nhập NgbModuletrong mô-đun như thế này:

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

1. entryComponentslà quan trọng. Trên đây câu trả lời là chính xác.

Nhưng...

2. Nếu bạn đang cung cấp dịch vụ mở phương thức (một mẫu chung) và mô-đun xác định thành phần hộp thoại không được tải trong AppModule, bạn cần thay đổi providedIn: 'root'thành providedIn: MyModule. Theo thông lệ tốt, bạn chỉ nên sử dụng providedIn: SomeModulecho tất cả các dịch vụ hộp thoại trong các mô-đun.

Tôi đang sử dụng Angular8 và tôi đang cố gắng mở thành phần một cách linh hoạt một mô-đun khác , trong trường hợp này, bạn cần phải import the modulevào mô-đun đang cố gắng mở thành phần, tất nhiên ngoài export thành phần đó và liệt kê nó vào entryComponentsmảng như các câu trả lời trước đã làm.

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

Trong trường hợp của tôi, tôi đã giải quyết vấn đề này bằng cách:
1) đặt NgxMaterialTimepickerModulevào app module imports:[ ]
2) đặt NgxMaterialTimepickerModulevào testmodule.ts imports:[ ]
3) đặt testcomponentvào declartions:[ ]vàentryComponents:[ ]

(Tôi đang sử dụng phiên bản 8+ góc cạnh)

Khai báo tất cả các trang mới trong app.module

@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
  ],

 - 


----------


---------