即使我声明导出，Angular <component> 也不是模块的已知元素

Posted 2023-02-22

技术标签:

【中文标题】即使我声明导出，Angular <component> 也不是模块的已知元素【英文标题】：Angular <component> is not a known element of a module even if I declare exports 【发布时间】：2020-09-25 11:16:59 【问题描述】：

所以，我创建了一个模块，在该模块内我有一个导航栏组件声明如下：

import  Component, OnInit  from '@angular/core';


@Component(
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css']
)
export class NavComponent implements OnInit 

  constructor()  

  ngOnInit(): void

在模块中我有这个

import  NgModule  from '@angular/core';
import  CommonModule  from '@angular/common';
import  UsuariosComponent  from './usuarios/usuarios.component';
import  ProductosComponent  from './productos/productos.component';
import  NavComponent  from './nav/nav.component';



@NgModule(
  declarations: [NavComponent, UsuariosComponent, ProductosComponent, ],
  imports: [
    CommonModule
  ],
  exports: [
    NavComponent,
    UsuariosComponent,
    ProductosComponent
  ],
)
export class DashboardModule

在模块组件 html 中，我有这样的选择器：

<app-nav></app-nav>

<h1>Dashboard</h1>

然后在我的 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  NavbarComponent  from './components/navbar/navbar.component';
import  LandingHeadComponent  from './components/landing-head/landing-head.component';
import  ProyectosSliderComponent  from './components/proyectos-slider/proyectos-slider.component';
import  ProductosLandingComponent  from './components/productos-landing/productos-landing.component';
import  TestimoniosComponent  from './components/testimonios/testimonios.component';
import  FooterComponent  from './components/footer/footer.component';
import  InicioComponent  from './inicio/inicio.component';
import  ProyectosComponent  from './proyectos/proyectos.component';
import  ContactoComponent  from './contacto/contacto.component';
import  CatalogoComponent  from './catalogo/catalogo.component';
import  InicioSesionComponent  from './components/inicio-sesion/inicio-sesion.component';

import  FormsModule  from '@angular/forms';
import  HttpClientModule  from '@angular/common/http';
import  AdminHomeComponent  from './components/admin-home/admin-home.component';
import  DashboardModule  from './dashboard/dashboard.module';



@NgModule(
  declarations: [
    AppComponent,
    NavbarComponent,
    LandingHeadComponent,
    ProyectosSliderComponent,
    ProductosLandingComponent,
    TestimoniosComponent,
    FooterComponent,
    InicioComponent,
    ProyectosComponent,
    ContactoComponent,
    CatalogoComponent,
    InicioSesionComponent,
    AdminHomeComponent
  ],
  imports: [
    DashboardModule,
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
)
export class AppModule

而且一直报这个错误

'app-nav' is not a known element:
1. If 'app-nav' is an Angular component, then verify that it is part of this module.
2. If 'app-nav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

2 <app-nav></app-nav>

有什么建议吗？我已经为此奋斗了好几个小时:(

编辑：这是我的模块，也许我的处理方式有误？

Module Structure

我想归档这样的内容：

Idea

【问题讨论】：

您的代码看起来不错，请尝试重新启动您的 CLI - Answer 已经做了，没用:( 【参考方案1】：

您将 NavComponent 导入到两个模块中，您只需将其导入 DashboardModule，然后将 DashboardModule 导入 AppModule强>。

希望对你有帮助。

【讨论】：

【参考方案2】：

解决了！！