从共享模块导出 Angular 16 组件不起作用

Question

我在 Angular 16 中为我的项目创建了一个共享模块并将其导出。问题是当我将其导入到 app.module.ts 时，它按预期工作。但是当我将其导入到dashboard.module.ts时，它给出了以下错误 -

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.

shared.module.ts 的代码如下 -

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

navbar.component.ts 的代码 -

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

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

}

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

dashboard.component.ts 的代码 -

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

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

}

dashboard.component.html 代码 -

<app-navbar></app-navbar>

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

我尝试以完全相同的方式将导航栏组件导入到app.module.ts并在app.component.html中使用，然后它工作正常。但它在仪表板模块中给出错误。

Answer 1

要解决此问题，您需要确保 SharedModule 仅导入一次，并且位于模块层次结构中的更高级别，例如 AppModule。以下是解决该问题的方法:

从 DashboardModule 中删除 SharedModule 导入，因为它已导入到 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 {}

确保在 AppModule 中导入 SharedModule，以便应用程序中的所有其他模块都可以使用它。

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

通过此配置，SharedModule 将导入到 AppModule 中，并且其组件(包括 NavbarComponent)将可供所有组件使用其他功能模块，包括 DashboardModule。