Angular 8.2扩展另一个组件的共享组件抛出无组件工厂错误

Question

我目前正在对一个应用程序进行一些重构，即一些表单。我注意到他们都很相似。在重构之前，它们是有效的，但当我添加新的父类并对其进行扩展时，我开始在子组件中出现以下错误：

错误错误：未找到SaveCategoryComponent的组件工厂。您是否将其添加到@NgModule.entryComponents？

我的父组件如下所示：

import { OnInit, Inject } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { BaseModel, Attempt } from '@models';
import { NotificationService } from 'src/app/_shared/notification/notification.service';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
import { Observable } from 'rxjs';
export class SaveComponent implements OnInit {
public formGroup: FormGroup;
public submitted: boolean;
public notifications: object;
public isEditing: boolean;
// convenience getter for easy access to form fields
get f() {
return this.formGroup.controls;
}
constructor(
@Inject(MAT_DIALOG_DATA) public model: BaseModel,
public dialogRef: MatDialogRef<any>,
public notificationService: NotificationService,
) {}
ngOnInit(): void {
this.isEditing = !!this.model.id;
}
public onSave(callback: (model: any) => Observable<any>) {
this.submitted = true;
if (this.formGroup.valid) {
callback(this.formGroup.value).subscribe(
(response: Attempt<BaseModel>) => {
if (response.failure) {
this.notificationService.show(`${response.error.message}`, 'danger');
} else {
this.notificationService.show(`Successfully saved your category.`, 'success');
this.formGroup.reset();
}
this.submitted = false;
this.dialogRef.close(response.result);
},
() => {
this.submitted = false;
},
);
}
}
}

正如你所看到的，它正在寻找一些数据，在这种情况下是BaseModel:

export interface BaseModel {
id: string | number;
}

我的分类如下：

import { BaseModel } from './base-model';
export class Category implements BaseModel {
id: string;
name: string;
image: string;
active: boolean;
}

这些都经过编译，看起来不错。然后我有一个子，它看起来像这样：

import { Component, OnInit, Inject } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
import { SaveComponent } from '../save.component';
import { Category } from '@models';
import { CategoryService } from '@services';
import { NotificationService } from '../../notification/notification.service';
@Component({
selector: 'app-save-category',
templateUrl: './save-category.component.html',
styleUrls: ['./save-category.component.scss'],
})
export class SaveCategoryComponent extends SaveComponent implements OnInit {
constructor(
@Inject(MAT_DIALOG_DATA) public model: Category,
public dialogRef: MatDialogRef<SaveCategoryComponent>,
public notificationService: NotificationService,
private formBuilder: FormBuilder,
private categoryService: CategoryService,
) {
super(model, dialogRef, notificationService);
}
ngOnInit(): void {
this.formGroup = this.formBuilder.group({
id: [this.model.id, Validators.required],
name: [this.model.name, Validators.required],
image: [this.model.image],
active: [this.model.active],
});
super.ngOnInit();
}
public save() {
const method = this.isEditing ? 'update' : 'create';
this.onSave(this.categoryService[method]);
}
}

这是我的共享模块的一部分，被声明，导出并添加为入口组件：

@NgModule({
imports: [
CommonModule,
ReactiveFormsModule,
RouterModule,
FormsModule,           
MatAutocompleteModule,
MatButtonModule,
MatCardModule,
MatDialogModule,
MatFormFieldModule,
MatIconModule,
MatInputModule,
MatRadioModule,
],
declarations: [
AlertDialogComponent,
ConfirmationDialogComponent,
SaveBrandComponent,
SaveCategoryComponent,
],
exports: [
AlertDialogComponent,
ConfirmationDialogComponent,
SaveBrandComponent,
SaveCategoryComponent,
],
providers: [DecimalPipe],
entryComponents: [
NotificationComponent,
UploadImagesComponent,
AlertDialogComponent,
ConfirmationDialogComponent,
SaveBrandComponent,
SaveCategoryComponent,
],
})
export class SharedModule {}

(我已经从模块中删除了任何根本不相关的代码(我还创建了一个对话框服务(在我创建父:之前，它一直在工作

import { Injectable } from '@angular/core';
import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
@Injectable({
providedIn: 'root',
})
export class DialogService {
constructor(private dialog: MatDialog) {}
public open(component: any, model: any): MatDialogRef<any> {
const dialogConfig = new MatDialogConfig();
dialogConfig.disableClose = true;
dialogConfig.autoFocus = true;
dialogConfig.data = model;
return this.dialog.open(component, dialogConfig);
}
}

然后在我的主要组件中，我做了这样的事情：

openEditModal(model: Category) {
const modalRef = this.dialogService.open(SaveCategoryComponent, model);
modalRef.afterClosed().subscribe((result: Category) => {
if (result) {
this.updateItem(result);
this.notificationSvc.show('You have successfully updated ' + result.name);
}
});
}

在我创建SaveComponent之前，所有这些都是有效的。一旦我试图扩展它，我就会得到上面的错误。我知道组件是在共享模块的entryComponents中定义的，所以我不知道它在抱怨什么。

有人能帮忙吗？

Answer 1

我花了几个小时在这个问题上，但无法修复。然后我发现一篇帖子提到Angular 9中没有使用entryComponents，所以我按照以下指南更新了我的所有包：

https://update.angular.io/

当我这样做的时候，我开始出现新的错误。我仔细检查了所有内容，最终发现我的AppModule需要导入FormsModule和ReactiveFormsModule。当我这么做的时候，一切都开始运转了。

为了科学的利益，我决定回到我原来的分支，尝试导入这些模块，看看这是否解决了8.2中的问题。它确实而不是，所以我不知道如何在那里修复它。我找到的唯一解决方案是升级：(