angular - 导入后导出的共享模块在角度 10 中无法识别

Question

目前我的项目中有两个共享模块

1. 共享模块
2. 共享材料模块。

这两个模块都由根级模块导入，并且随处可用。

现在我试图将 shared.module 分为两部分：

pub.shared.modules 和 admin.shared.module 其中一些通用模块仍将在 shared.module.ts 中使用

所以，我在 admin.module 和 pub.shared.module 中都导入了 shared.module

期望我不必将模块/组件/管道从 shared.module 导入到这些。

但是尽管被导入，我必须在 admin.shared.module 和 pub.shared.module 中再次导入它才能工作。

我得到的错误是在我的组件 pub.layout.component 无法识别。

我的想法是将 pub.shared.module 作为包括主页在内的公共页面的延迟加载模块导入。但我没有在我的根级模块中导入这个模块。

shared.module.ts

import { SharedMaterialModule } from './shared-material.module';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { FlexLayoutModule } from '@angular/flex-layout';
import { TranslateModule } from '@ngx-translate/core';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { SidebarTopComponent } from './components/sidebar-top/sidebar-top.component';

// ALL TIME REQUIRED
import { NotificationsComponent } from './components/notifications/notifications.component';
import { SidenavComponent } from './components/sidenav/sidenav.component';
import { BreadcrumbComponent } from './components/breadcrumb/breadcrumb.component';
import { AppComfirmComponent } from './services/app-confirm/app-confirm.component';
import { AppLoaderComponent } from './services/app-loader/app-loader.component';

// DIRECTIVES
import { FontSizeDirective } from './directives/font-size.directive';
import { ScrollToDirective } from './directives/scroll-to.directive';
import { AppDropdownDirective } from './directives/dropdown.directive';
import { DropdownAnchorDirective } from './directives/dropdown-anchor.directive';
import { DropdownLinkDirective } from './directives/dropdown-link.directive';
import { snSideNavToggleDirective } from './directives/ecom-side-nav-toggle.directive';
// PIPES
import { RelativeTimePipe } from './pipes/relative-time.pipe';
import { ExcerptPipe } from './pipes/excerpt.pipe';
import { GetValueByKeyPipe } from './pipes/get-value-by-key.pipe';

// SERVICES
import { RoutePartsService } from './services/route-parts.service';
import { AuthGuard } from './services/auth/auth.guard';
import { AppConfirmService } from './services/app-confirm/app-confirm.service';
import { AppLoaderService } from './services/app-loader/app-loader.service';
import { DialogSearchComponent } from './components/pub-header/dialog-search/dialog-search.component';
// import { APP_INITIALIZER } from '@angular/core';
import { CommonApiService } from './services/commonapi.services';
import { ScriptService } from './services/script.service';

const classesToInclude = [
  DialogSearchComponent,
  SidebarTopComponent,
  SidenavComponent,
  NotificationsComponent,
  BreadcrumbComponent,
  AppComfirmComponent,
  AppLoaderComponent,
  FontSizeDirective,
  ScrollToDirective,
  AppDropdownDirective,
  DropdownAnchorDirective,
  DropdownLinkDirective,
  snSideNavToggleDirective,
  RelativeTimePipe,
  ExcerptPipe,
  GetValueByKeyPipe
];
@NgModule({
  imports: [
    PerfectScrollbarModule,
    SharedMaterialModule,
    FormsModule,
    RouterModule,
    FlexLayoutModule,
    TranslateModule,
    ReactiveFormsModule
  ],
  entryComponents: [AppComfirmComponent, 
    AppLoaderComponent, 
    DialogSearchComponent],
  providers: [
    RoutePartsService,
    AuthGuard,
    AppConfirmService,
    AppLoaderService,
    CommonApiService,
    ScriptService
  ],
  declarations: classesToInclude,
  exports: [classesToInclude]
})

export class SharedModule { }

pub.shared.module.ts

import { NgModule } from '@angular/core';
import { CategoryNavigationService } from './services/category-navigation.service';
import { PubHeaderComponent} from './components/pub-header/pub-header.component'
import { PubLayoutComponent } from './components/layouts/pub-layout/pub-layout.component';
import { PubFooterComponent } from './components/pub-footer/pub-footer.component';
import { PubLayoutService } from './services/pub-layout.service';
import { CatalogService } from './services/catalog.service';
import { SeoService } from './services/seo.service';
import { SalesService } from './services/sales.service';
import { SharedMaterialModule} from './shared-material.module';
import { SharedModule } from './shared.module';
import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { PerfectScrollbarModule, PERFECT_SCROLLBAR_CONFIG, PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
import { MatSidenavModule } from '@angular/material/sidenav';

const classesToInclude = [
    PubFooterComponent,
    PubLayoutComponent,
    PubHeaderComponent,
];

const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
    suppressScrollX: true
  };

@NgModule({
    declarations: classesToInclude,
    imports: [SharedMaterialModule, SharedModule, RouterModule, MatSidenavModule,
        BrowserAnimationsModule, BrowserModule, PerfectScrollbarModule],
    providers:[
    CategoryNavigationService,
    PubLayoutService,
    CatalogService,
    SeoService,
    SalesService,
    { provide: PERFECT_SCROLLBAR_CONFIG, useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG },
    ],
    exports: classesToInclude
})
export class PubSharedModule {}

请注意，我再次导入了一些模块，但还没有将其导入我的根级模块。

如果需要，我可以转发更多代码。

编辑：只要我将此 pub.shared.module 导入根级模块。一切正常。

标签： angularmodulelazy-loading