在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 {}

app.module.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 { }

dashboard.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 { }

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

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

app.routng：

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

因为仪表板模块是一个延迟加载的模块，所以它将不可用。您还必须在仪表板模块中导入共享模块。

Answer 2

如果我在dashbord.module.ts模块中导入sharedModule，那么它就可以工作了

你刚刚回答了你的问题。

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

另外，您也可以在延迟加载的模块中共享模块，这不会是一个问题。

Answer 3

您应该将CUSTOM_ELEMENTS_SCHEMA从'@angular/core'导入到app.module中

你的App Module应该是这样的

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

....

@NgModule({
    declarations: [...],
    imports: [
        ...
    ],
    exports: [...],
    providers: [
        ...

    ],
    entryComponents: [
        ...
    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {
}