angular - App.modules.ts 中注册的模块在其他模块中不可用
问题描述
我已经创建了一个共享模块,并且它在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 { }
仪表板.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 { }
我正在尝试从仪表板容器组件中的共享模块访问组件(使用选择器),但无法访问它。
注意:如果我在模块中导入 sharedModuledashbord.module.ts
则它可以工作,但我想将其导入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 { }
解决方案
如果我在模块中导入 sharedModule
dashbord.module.ts
那么它可以工作
你刚刚回答了你的问题。
为了在模块 A 中使用组件、管道、指令等,模块 A 需要了解它。您要么必须在模块 A 中声明它,要么在模块 B 中将其导出,然后再导入该模块 B。
您也可以在延迟加载的模块中共享模块,这不是问题。
推荐阅读
- unit-testing - 如何在构建管道的单元测试失败时从 Azure DevOps 向特定开发人员发送详细的电子邮件?
- terraform - Terraform vm_name_prefix 自动增量修改
- sql - Oracle sql查询返回第一次来的客户
- javascript - 登录后Firebase慢速重定向?
- angular - 未随 HTTP 请求发送的标头
- android - xamarin.uitest 的最低支持平台版本
- angularjs - 使用带有斜杠变量的 routeprovider
- node.js - 单击“打开专用节点”后,DevTools 找不到节点进程
- ios - 应用重启后未收到 FCM 通知
- eslint - 括号问题与 eslint 一起使用更漂亮