angular - 在 App.modules.ts 中注册的模块在其他模块中不可用

Question

我创建了一个共享模块，它在 app.module.ts 中注册，每当我尝试从另一个模块中的共享模块访问组件时，注册的组件不可用。

错误:

'app-custom-autocomplete' is not a known element:
1. If 'app-custom-autocomplete' is an Angular component, then verify that it is part of this module.
2. If 'app-custom-autocomplete' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("                              <div class="input-group">
                                            [ERROR ->]<app-custom-autocomplete (handelItemSelection)="handelItemAction($event)"></app-custom-autocomplete>
"): ng:///DashboardModule/DashboardContainerComponent.html@98:44

共享模块:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CustomAutocompleteComponent } from './components/custom-autocomplete/custom-autocomplete.component';
import { FormsModule } from '@angular/forms';


@NgModule({
    imports: [
        CommonModule,
        FormsModule 
     ],
    declarations: [
        CustomAutocompleteComponent
    ],
    exports: [
      CustomAutocompleteComponent
    ]
})
export class SharedModule {}

应用程序模块.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './layout/header/header-component/header.component';
import { SidebarComponent } from './layout/sidebar/sidebar-component/sidebar-component';
import { AppViewComponent } from './views/app-view/app-view-component/app-view.component';
import { BreadcrumbComponent } from './shared/components/breadcrumb/breadcrumb.component';
import { AgGridModule } from 'ag-grid-angular';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { CustomCellComponent } from './modules/ag-grid/custom-cell/custom-cell.component';
import { CustomcellDropdownComponent } from './modules/ag-grid/custom-cell-render-using-editor/customcell-dropdown/customcell-dropdown.component';
import { SharedModule } from './shared/shared.mudule';


@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    SidebarComponent,
    AppViewComponent,
    BreadcrumbComponent,

  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    SharedModule,
    FormsModule,
    HttpClientModule,

  ],
  providers: [],
  exports: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

仪表板.module.ts

import { NgModule } from '@angular/core';
import { DashboardRoutingModule } from './dashboard-routing.module';
import { DashboardContainerComponent } from './dashboard-container/dashboard-container.component';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { CustomAutocompleteComponent } from 'src/app/shared/components/custom-autocomplete/custom-autocomplete.component';
import { EventListComponent } from './event-list/event-list.component';
import { AgGridModule } from 'ag-grid-angular';
import { FormsModule } from '@angular/forms';



@NgModule({
  declarations: [
    DashboardContainerComponent,
    EventListComponent
  ],
  imports: [
    CommonModule ,
    DashboardRoutingModule,

    FormsModule,
    AgGridModule.withComponents([])
  ],
  providers: [],
})
export class DashboardModule { }

我正在尝试从仪表板容器组件中的共享模块访问组件(使用选择器)，但无法访问它。

注意:如果我在 dashbord.module.ts 模块中导入 sharedModule 那么它可以工作，但我想在 App.module.ts 中导入它

应用路由:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppViewComponent } from './views/app-view/app-view-component/app-view.component';
const routes: Routes = [
  {
    path: '',
    component: AppViewComponent,
    children: [
      { path: '', loadChildren: './modules/dashboard/dashboard.modules#DashboardModule' },
      { path: 'grid', loadChildren: './modules/ag-grid/grid.module#GridModule' }
    ],
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

If I import sharedModule in the dashbord.module.ts module then it working

您刚刚回答了您的问题。

为了在模块 A 中使用组件、管道、指令等，模块 A 需要了解它。您要么必须在模块 A 中声明它，要么在模块 B 中导出它，然后导入该模块 B。

您也可以在惰性加载模块中共享模块，这不会有问题。