angular - 错误:未找到 ErrorComponent 的组件工厂。你把它添加到@NgModule.entryComponents 了吗?
问题描述
我在主应用程序中使用以下代码摘要远程加载一些组件:
async loadRemoteModule() {
const remoteModule = this.sysplexesService.getRemoteModule();
// These library are already present, so no need to reload them.
SystemJS.set('@angular/core', SystemJS.newModule(AngularCore));
SystemJS.set('@angular/common', SystemJS.newModule(AngularCommon));
SystemJS.set('@angular/material', SystemJS.newModule(AngularMaterial));
SystemJS.set('@angular/material/snack-bar', SystemJS.newModule(AngularMaterialSnackbar));
SystemJS.set('@angular/router', SystemJS.newModule(AngularRouter));
SystemJS.set('d3', SystemJS.newModule(await import('d3')));
SystemJS.set('@angular/common/http', SystemJS.newModule(HttpClientModule));
SystemJS.set('moment', SystemJS.newModule(await import('moment')));
SystemJS.set('@angular/flex-layout', SystemJS.newModule(FlexLayoutModule));
SystemJS.set('@angular/platform-browser/animations', SystemJS.newModule(NoopAnimationsModule));
SystemJS.set('@angular/forms', SystemJS.newModule(FormsModule));
SystemJS.set('rxjs', SystemJS.newModule(rxjs));
SystemJS.set('pi-common-lib', SystemJS.newModule(piCommonLib));
SystemJS.set('@angular/animations', SystemJS.newModule(AngularAnimation));
SystemJS.import(remoteModule.url).then((module) => {
this.compiler.compileModuleAndAllComponentsAsync(module[`${remoteModule.name}Module`])
.then((moduleFactory) => {
const moduleRef = moduleFactory.ngModuleFactory.create(this.injector);
let factory = moduleFactory.componentFactories.find(
item => item.componentType.name === `${remoteModule.name}Component`);
if (factory) {
const component = this.vc.createComponent(factory);
const instance = component.instance;
}
});
}
以下组件是由上一个例程加载的 Angular 库的一部分:
其中一个库组件使用 Angular 材质小吃栏:ssc.component.ts
notify(message: string, className: string) {
this.snackBar.openFromComponent(ErrorComponent, {
data: message, verticalPosition: 'top', panelClass: className,
// data: message, verticalPosition: 'top', duration: 20000, 3: className,
});
}
这是自定义的小吃吧 ErrorComponent:
import { Component, Inject } from '@angular/core';
import { MAT_SNACK_BAR_DATA, MatSnackBarRef } from '@angular/material/snack-bar';
@Component({
selector: 'izoa-error',
templateUrl: './error.component.html',
styleUrls: ['./error.component.scss'],
providers: [{ provide: MatSnackBarRef, useValue: {} }, {
provide: MAT_SNACK_BAR_DATA, useValue: {}
}]
})
export class ErrorComponent {
constructor(public snackBarRef: MatSnackBarRef<ErrorComponent>, @Inject(MAT_SNACK_BAR_DATA) public data: any) { }
}
模块:
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import {
MatFormFieldModule, MatAutocompleteModule, MatBadgeModule, MatBottomSheetModule,
MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule,
MatChipsModule, MatDatepickerModule, MatDialogModule, MatDividerModule,
MatExpansionModule, MatGridListModule, MatIconModule, MatInputModule,
MatListModule, MatMenuModule, MatNativeDateModule, MatPaginatorModule,
MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, MatRippleModule,
MatSelectModule, MatSidenavModule, MatSliderModule, MatSlideToggleModule,
MatSortModule, MatStepperModule, MatTableModule,
MatTabsModule, MatToolbarModule, MatTooltipModule, MatTreeModule
} from '@angular/material';
import { MatSnackBarRef, MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
import {MatSnackBarModule} from '@angular/material/snack-bar';
...
import { ErrorComponent } from './ssc/error.component';
@NgModule({
declarations: [
...
ErrorComponent
],
entryComponents: [ErrorComponent],
providers: [{ provide: MatSnackBarRef, useValue: {} }, {
provide: MAT_SNACK_BAR_DATA,
useValue: {} // Add any data you wish to test if it is passed/used correctly
}],
imports: [
...
MatSnackBarModule, ...
],
exports: [
Db2SscLibComponent
]
})
export class Db2SscLibModule { }
加载动态组件时,出现以下错误:
core.js:15714 ERROR Error: No component factory found for ErrorComponent. Did you add it to @NgModule.entryComponents?
at noComponentFactoryError (core.js:9875)
at CodegenComponentFactoryResolver.resolveComponentFactory (core.js:9913)
at CdkPortalOutlet.attachComponentPortal (portal.es5.js:654)
at MatSnackBarContainer.attachComponentPortal (snack-bar.es5.js:392)
at MatSnackBar._attach (snack-bar.es5.js:856)
at MatSnackBar.openFromComponent (snack-bar.es5.js:695)
at SscComponent.notify (ssc.component.ts:330)
at SafeSubscriber.eval [as _next] (ssc.component.ts:200)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:196)
at SafeSubscriber.next (Subscriber.js:134)
errorComponent 作为 entryComponent 存在。
entryComponents: [ErrorComponent],
如果我改用基本的小吃店,则不需要/加载 errorComponent。
this.snackBar.open('We are sorry, but something went wrong. Please contact your administrator', 'Close', {
duration: 20000,
panelClass: className,
verticalPosition: 'top',
data: message
});
该模块是动态加载的,并且snackbar 显示成功。
如果我独立运行库,它可以与 openFromComponent 一起正常工作
this.snackBar.openFromComponent(ErrorComponent, {
data: message, verticalPosition: 'top', panelClass: className,
// data: message, verticalPosition: 'top', duration: 20000, 3: className,
});
只有当我尝试使用 compiler.compileModuleAndAllComponentsAsync 动态加载它时,我才会收到上一个错误。
任何指针将不胜感激。
解决方案
推荐阅读
- c - 为什么多个调用同一函数的 pthread_create() 最终会出现分段错误?
- android - 在 Android Studio 中配置图片资源,next 按钮仅振动模态
- matrix - 如何在 KNIME 中转换矩阵中的表格?
- sql-server - 如何从 ADO 过滤代码迁移到 Firedac
- button - 如果按下按钮,如何使按钮仅打印一次(我正在使用带有 raspberry pi pico 的 micropython)
- javascript - 如何在 Shopify checkout.liquid 中访问结帐值?
- ios - 如何创建仅用于共享图像和文本的共享扩展程序(不希望共享视频)
- python - Python scipy.io 写一个 n 乘 1 的 mat 文件
- generics - 如何设计一个可以对“Self:!Copy”和“Self=&mut[S]”进行操作的通用特征
- python - Pandas 使用 SSH 隧道和 sqlalchemy 从远程 Postgresql 读取