Angular 16 component export from a shared module not working

Question

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.

@André Sure. Just now added code for app.module.ts at bottom — AffiliateVDev, Jul 20 '23 at 09:40
@SwissaYaakov Already tried importing that to app module. So it works well in app module as expected. But When I import this to Dashboard instead of app, it gives error. My requirement here is to import components of shared module to Dashboard module. — AffiliateVDev, Jul 20 '23 at 10:35
so you need to import the shared module into app module, its look like your share module not been imported, else use standalone. — Swissa Yaakov, Jul 20 '23 at 10:55
@SwissaYaakov Just now tried this (importing shared module into app module), but still have same issue. Standalone is not a solution in case of my project. — AffiliateVDev, Jul 20 '23 at 11:05
@SwissaYaakov No, that shouldn't be necessary. When do you get the error? From the moment you visit the page? — Pieterjan, Jul 20 '23 at 11:07

score 1 · Answer 1 · answered Jul 21 '23 at 05:05

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 just tried as per your response but it's still the same error — AffiliateVDev, Jul 21 '23 at 07:09
Keeping your suggestion in mind, I imported feature module instead of shared in app module and it worked. Thanks for contributing. — AffiliateVDev, Jul 21 '23 at 07:26

score 1 · Answer 2 · answered Jul 21 '23 at 07:31

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

Both approaches have their uses= : Use this module for components, directives, and pipes that are intended to be shared and reused throughout the application. Import it in modules where these shared components are needed globally. : Use this module for components, services, and other features that are specific to a certain section or feature of your application. Import it in the AppModule or in other feature modules, depending on where you need to use the components and functionality. — yashaswi k, Jul 21 '23 at 07:40

Angular 16 component export from a shared module not working

2 Answers2