Angular问题：SharedModule中的组件选择器在特性模块中无法生效

Hey there, let's tackle this NG8001 error you're hitting—even when you've checked all the standard boxes, those module import quirks can sneak up on you. Let's go through some targeted checks based on your setup:

1. Fix the SharedModule Import Path (Likely Root Cause) #

Looking at your administration.module.ts, you're importing SharedModule with:

import { SharedModule } from 'src/app/shared/shared.module';

If your tsconfig.json has a baseUrl set to "./src" (the default in Angular CLI projects), this path is incorrect. The baseUrl tells TypeScript to resolve imports starting from the src folder, so adding src/ at the beginning makes it look for src/src/app/shared/...—which doesn't exist.

Fix: Update the import to use the correct path relative to your baseUrl:

import { SharedModule } from 'app/shared/shared.module';

If you don't have a baseUrl configured, try using a relative path instead (adjust based on your folder structure):

import { SharedModule } from '../../../shared/shared.module';

2. Clear Angular CLI Cache #

Even after restarting the CLI, cached build artifacts can cause weird issues. Run these commands to do a clean build:

ng clean
ng serve

Alternatively, manually delete the .angular/cache folder in your project root before restarting the dev server.

3. Verify No Duplicate Component Declarations #

Double-check that SideNavComponent is only declared in SharedModule—it shouldn't appear in the declarations array of any other module (like AppModule or AdministrationModule). Angular enforces that each component belongs to exactly one module.

4. Validate Your Module Structure #

Quickly confirm these details again:

• SharedModule's exports array includes SideNavComponent (you already checked this, but a second look never hurts)
• AdministrationModule's imports array includes SharedModule (no typos in the module name)

5. Temporary Schema Check (For Debugging Only) #

As a quick debugging step, add CUSTOM_ELEMENTS_SCHEMA to your AdministrationModule. If the error disappears, it confirms Angular isn't recognizing app-side-nav as an Angular component—pointing straight back to a module import issue:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AdministrationRoutingModule } from './administration-routing.module';
import { AdministrationMainComponent } from './pages/administration-main/administration-main.component';
import { SharedModule } from 'app/shared/shared.module';

@NgModule({
  declarations: [
    AdministrationMainComponent,
  ],
  imports: [
    CommonModule,
    AdministrationRoutingModule,
    SharedModule
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA] // Add this line temporarily
})
export class AdministrationModule { }

Note: Don't leave this in production—it suppresses valid errors for web components. Remove it once you fix the root issue.

Final Quick Checks #

• Confirm your Angular 13.2.4 setup is compatible with your MDBootstrap version (you mentioned needing to keep this version, so just ensure there are no known module conflicts between the two)
• Double-check the selector in side-nav.component.ts matches exactly what you're using in the template (app-side-nav—no typos or case mismatches)

Give these steps a try—most likely the import path fix will resolve the issue right away!

内容的提问来源于stack exchange，提问作者Ashalya