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

Question

所以，我创建了一个模块，在该模块中我有一个 Navbar 组件声明如下：

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>

然后在我的应用程序中-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

Answer 1

您正在将 NavComponent 导入到两个模块中，您应该将其导入到 DashboardModule 中，然后再导入 DashboardModule 到 AppModule.

希望对您有所帮助。

Answer 2

解决了！！

原来我没有向模块声明我的组件！！！

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

Angular <component> is not a known element of a module even if I declare exports

angular

angular-components

angular-module