javascript - 移动到模块后角材料形式不起作用
问题描述
我们有一个纯粹在基于组件的模型中开发的应用程序，但现在我们正试图提高它的性能，因为有太多的组件确实使我们的应用程序加载非常缓慢。因此，我们最初试图将一些组件包移动到一个模块中，为此我们将所有组件移动到一个模块中并创建并命名为 security.module.ts 并从 ap.module 的声明数组中删除相应的组件.ts 并添加到 security.module.ts
这是我的实际项目结构：
我们已经将一些组件移到了一个名为 security-vategories 的模块中，如下所示：
让我举例说明。
在 app.module.ts
//100's of other component imports goes here
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [
SatPopoverModule,
RouterModule.forRoot([]),
BrowserModule,
FormsModule,
ReactiveFormsModule,
BrowserAnimationsModule,
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatStepperModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
AppRoutingModule,
HttpClientModule,
AceEditorModule,
NgxShimmerLoadingModule,
// Sub modules
LayoutModule,
SharedModule
],
declarations: [
AppComponent,
// Layout
LayoutComponent,
PreloaderDirective,
// Header
AppHeaderComponent,
// Footer
AppFooterComponent,
DashboardComponent,
MsspDashboardComponent,
// Pages
//100's of components go here
// Security compoents
CustomGeneratorListComponent,
CustomGeneratorNewComponent,
CustomGeneratorEditComponent,
CustomGeneratorCompliance1NewComponent,
CustomGeneratorCompliance1EditComponent,
CustomGeneratorCompliance2NewComponent,
CustomGeneratorCompliance2EditComponent,
CustomGeneratorBasicNewComponent,
CustomGeneratorBasicEditComponent,
CustomGeneratorStoredEditComponent,
CustomGeneratorStoredNewComponent,
CustomGeneratorCustomHeaderNewComponent,
CustomGeneratorCustomHeaderEditComponent,
],
bootstrap: [AppComponent],
providers: [
]
})
下面是security.module.ts
//All imports go here
@NgModule({
declarations: [
//security components
CustomGeneratorListComponent,
CustomGeneratorNewComponent,
CustomGeneratorEditComponent,
CustomGeneratorCompliance1NewComponent,
CustomGeneratorCompliance1EditComponent,
CustomGeneratorCompliance2NewComponent,
CustomGeneratorCompliance2EditComponent,
CustomGeneratorBasicNewComponent,
CustomGeneratorBasicEditComponent,
CustomGeneratorStoredEditComponent,
CustomGeneratorStoredNewComponent,
CustomGeneratorCustomHeaderNewComponent,
CustomGeneratorCustomHeaderEditComponent,
],
imports: [
CommonModule,
BrowserModule,
BrowserAnimationsModule,
FormsModule,
ReactiveFormsModule,
BrowserAnimationsModule,
SatPopoverModule,
HttpClientModule,
AceEditorModule,
NgxShimmerLoadingModule,
LayoutModule,
SharedModule,
AppRoutingModule,
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatStepperModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
RouterModule.forChild([
{ path: "securityCategories", component: CustomGeneratorListComponent },
{ path: "securityCategoriesNew", component: CustomGeneratorNewComponent },
{ path: "securityCategories/:generatorId", component: CustomGeneratorEditComponent },
{ path: "securityCategoriesCompliance1New", component: CustomGeneratorCompliance1NewComponent },
{ path: "securityCategoriesCompliance1Edit/:generatorId", component: CustomGeneratorCompliance1EditComponent },
{ path: "securityCategoriesCompliance2New", component: CustomGeneratorCompliance2NewComponent },
{ path: "securityCategoriesCompliance2Edit/:generatorId", component: CustomGeneratorCompliance2EditComponent },
{ path: "securityCategoriesBasicNew", component: CustomGeneratorBasicNewComponent },
{ path: "securityCategoriesBasicEdit/:generatorId", component: CustomGeneratorBasicEditComponent },
{ path: "securityCategoriesStoredNew", component: CustomGeneratorStoredNewComponent },
{ path: "securityCategoriesStoredEdit/:generatorId", component: CustomGeneratorStoredEditComponent },
{ path: "ssecurityCategoriesCustomHeaderNew", component: CustomGeneratorCustomHeaderNewComponent },
{ path: "securityCategoriesCustomHeaderEdit/:generatorId", component: CustomGeneratorCustomHeaderEditComponent },
])
],
],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true },
DashboardService,
TestSuiteService,
AccountService,
Handler,
DatePipe,
AutocodeGeneratorService,
UserVariableService
],
})
export class SecurityCategoriesModule { }
问题是如果我在两个文件中都有组件，那么材料组件正在加载，否则角度材料组件没有加载。如果我从 app.module.ts 中删除与安全相关的组件，那么材料组件不会加载，那么在声明数组中的 app.module.ts 和 security.module.ts 中添加组件有什么用。
如果我单击路由 http://localhost:4200/#/app/securityCategories 然后它重定向到主页 http://localhost:4200/#/app/projects，路由也不起作用。
它会引发以下错误：
core.js:6456 ERROR Error: Uncaught (in promise): Error: NG0301: Export of name 'matMenu' not found!
Error: NG0301: Export of name 'matMenu' not found!
at cacheMatchingLocalNames (core.js:10354)
at resolveDirectives (core.js:10185)
at elementStartFirstCreatePass (core.js:14789)
at ɵɵelementStart (core.js:14826)
at CustomGeneratorListComponent_Template (template.html:38)
at executeTemplate (core.js:9575)
at renderView (core.js:9379)
at renderComponent (core.js:10659)
at renderChildComponents (core.js:9244)
at renderView (core.js:9404)
at resolvePromise (zone.js:1213)
at resolvePromise (zone.js:1167)
at zone.js:1279
at ZoneDelegate.invokeTask (zone.js:406)
at Object.onInvokeTask (core.js:28654)
at ZoneDelegate.invokeTask (zone.js:405)
at Zone.runTask (zone.js:178)
at drainMicroTaskQueue (zone.js:582)
at ZoneTask.invokeTask [as invoke] (zone.js:491)
at invokeTask (zone.js:1600)
谁能建议我如何实现这一点？
这就是我的材料设计的样子。但它不是。见截图：
表格应该是这样的。这是确切的形式。
我们有一个 layout-routing.module.ts，其中的路由如下：
const routes: Routes = [
{ path: '', redirectTo: '/app/projects', pathMatch: 'full' },
{ path: 'lazy', component: LayoutComponent, loadChildren:() => import('./../security-categories/security-categories.module').then(m => m.SecurityCategoriesModule) },
{
path: "app",
component: LayoutComponent,
canActivate: [AuthGuard],
children: [
{ path: "", redirectTo: "/app/projects", pathMatch: "full" },
{ path: "securityCategories", component: CustomGeneratorListComponent },
{ path: "securityCategoriesNew", component: CustomGeneratorNewComponent },
{ path: "securityCategories/:generatorId", component: CustomGeneratorEditComponent },
{ path: "securityCategoriesCompliance1New", component: CustomGeneratorCompliance1NewComponent },
{ path: "securityCategoriesCompliance1Edit/:generatorId", component: CustomGeneratorCompliance1EditComponent },
{ path: "securityCategoriesCompliance2New", component: CustomGeneratorCompliance2NewComponent },
{ path: "securityCategoriesCompliance2Edit/:generatorId", component: CustomGeneratorCompliance2EditComponent },
{ path: "securityCategoriesBasicNew", component: CustomGeneratorBasicNewComponent },
{ path: "securityCategoriesBasicEdit/:generatorId", component: CustomGeneratorBasicEditComponent },
{ path: "securityCategoriesStoredNew", component: CustomGeneratorStoredNewComponent },
{ path: "securityCategoriesStoredEdit/:generatorId", component: CustomGeneratorStoredEditComponent },
{ path: "ssecurityCategoriesCustomHeaderNew", component: CustomGeneratorCustomHeaderNewComponent },
{ path: "securityCategoriesCustomHeaderEdit/:generatorId", component: CustomGeneratorCustomHeaderEditComponent },
]
}
];
export const LayoutRoutingModule = RouterModule.forChild(routes);
我的 layout.component.html
<section id="page-container" class="app-page-container">
<my-app-header></my-app-header>
<div class="app-content-wrapper">
<div class="app-content">
<div class="full-height">
<router-outlet></router-outlet>
</div>
</div>
<my-app-footer></my-app-footer>
</div>
</section>
我的 app.component.html
<div myPreloader class="preloaderbar hide"><span class="bar"></span></div>
<div id="app-main" class="app-main full-height"
[ngClass]="{'fixed-header' : AppConfig.fixedHeader,
'nav-collapsed' : AppConfig.navCollapsed,
'nav-behind' : AppConfig.navBehind,
'layout-boxed' : AppConfig.layoutBoxed,
'theme-gray' : AppConfig.theme == 'gray',
'sidebar-sm' : AppConfig.sidebarWidth == 'small',
'sidebar-lg' : AppConfig.sidebarWidth == 'large'}">
<router-outlet></router-outlet>
</div>
解决方案
推荐阅读
- excel - 使用 vba 对数据进行排序
- c# - 寻求为 C# 应用程序导出最佳配置参数的建议 - 可能是一个学习问题
- c# - 如何使用 PostAsJsonAsync 作为通用函数？
- c# - 虚拟助理技能 - 如何杀死/结束您所在的当前技能机器人
- flutter - Flutter：来自 CollectionReference 的 Firestore 查询
- javascript - 带滚动和半页固定的半页垂直滑块
- android - 如何在 Unity 画布上绘制 android 视图？
- c# - 将德国货币字符串解析为十进制
- python - 如何使用 Pulp python 优化字典中的变量组合？
- android - "code":"BAD_REQUEST_ERROR","description":"提供的 id 不存在" RazorPay 集成到 android 时出错