Angular 16 component export from a shared module not working

I have created a shared module for my project in Angular 16 and exporting it. Problem is when I am importing this to app.module.ts, it's working as expected. But when I import this to dashboard.module.ts, it's giving following error -

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

1 <app-navbar></app-navbar>
  ~~~~~~~~~~~~

  src/app/dashboard/dashboard/dashboard.component.ts:5:16
    5   templateUrl: './dashboard.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component DashboardComponent.

Code for shared.module.ts is below -

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NavbarComponent } from './navbar/navbar.component';



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

Code for navbar.component.ts -

import { Component } from '@angular/core';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent {

}

Code for dashboard.module.ts -

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardComponent } from './dashboard/dashboard.component';
import { SharedModule } from './shared/shared.module';



@NgModule({
  declarations: [
    DashboardComponent
  ],
  imports: [
    CommonModule,
    SharedModule
  ]
})
export class DashboardModule { }

Code for dashboard.component.ts -

import { Component } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent {

}

Code for dashboard.component.html -

<app-navbar></app-navbar>

Code for app.module.ts -

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { UserAuthModule } from './user-auth/user-auth.module';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    PageNotFoundComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    UserAuthModule,
    NgbModule,
    BrowserAnimationsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I tried to import Navbar component in exactly same way to app.module.ts and used in app.component.html,then it works fine. But it gives error in Dashboard Module.

To resolve this, you need to make sure that the SharedModule is only imported once and at a higher level in the module hierarchy, such as the AppModule. Here's how you can fix it:

Remove the SharedModule import from the DashboardModule since it's already being imported in the AppModule.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardComponent } from './dashboard/dashboard.component';

@NgModule({
  declarations: [DashboardComponent],
  imports: [CommonModule],
})
export class DashboardModule {}

Make sure to import SharedModule in the AppModule so that it's available to all other modules in the application.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { UserAuthModule } from './user-auth/user-auth.module';
import { SharedModule } from './shared/shared.module'; // Import SharedModule here

// ... other imports ...

@NgModule({
  declarations: [AppComponent, PageNotFoundComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    UserAuthModule,
    NgbModule,
    BrowserAnimationsModule,
    HttpClientModule,
    SharedModule, // Add SharedModule here
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

With this configuration, the SharedModule will be imported in the AppModule, and its components, including the NavbarComponent, will be available to all other feature modules, including the DashboardModule.

I found a solution and seems it's working. Kindly suggest if this is right approach.

I imported feature module instead of shared module to App module. After that I imported shared module to feature module. And it's working fine now.

App.module -

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FeaturedModule } from './featured/featured.module';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FeaturedModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Feature.module -

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { FeaturedRoutingModule } from './featured-routing.module';
import { TestComponent } from './test/test.component';
import { SharedModule } from '../shared/shared.module';


@NgModule({
  declarations: [
    TestComponent
  ],
  imports: [
    CommonModule,
    FeaturedRoutingModule,
    SharedModule,
  ]
})
export class FeaturedModule { }