Angular 5中如何在Shared Module中导入共享服务依赖？

Hey there! I’ve worked through similar Angular 5 module architecture setups before, so let’s walk through the best practices and fix the common issues you might be hitting with your shared/feature module structure:

Core Shared Module Configuration #

First, let’s get the SharedModule right—it’s the backbone of your reusable components:

• Only export reusable assets: Your SharedModule should declare and export components, directives, and pipes that are used across multiple feature modules. Never declare components that are specific to a single feature here.
• Don’t forget to export CommonModule: This lets feature modules use directives like *ngIf or *ngFor without having to import CommonModule themselves.
• Import component modules (not raw components): Since you’re using per-component .module files, import those component modules into SharedModule instead of the components directly.

Example SharedModule code:

// shared.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// Import individual component modules
import { ButtonModule } from './button/button.module';
import { CardModule } from './card/card.module';

@NgModule({
  imports: [
    CommonModule,
    ButtonModule,
    CardModule
  ],
  exports: [
    // Export component modules so feature modules can use their components
    ButtonModule,
    CardModule,
    CommonModule
  ]
})
export class SharedModule { }

Feature Module Best Practices #

Feature modules should stay focused on their business domain, and only pull in what they need from SharedModule:

• Import SharedModule once per feature: No need to import individual component modules—SharedModule aggregates all reusable assets for you.
• Don’t re-declare shared components: Angular throws errors if a component is declared in more than one module, so let SharedModule handle declaration of reusable components.
• Export feature-specific components only if needed: If a feature’s component needs to be used outside the module (e.g., in AppComponent), export it—otherwise, keep it private to the feature.

Example Feature Module code:

// user-feature.module.ts
import { NgModule } from '@angular/core';
import { SharedModule } from '../shared/shared.module';
// Feature-specific components
import { UserListComponent } from './user-list/user-list.component';
import { UserDetailComponent } from './user-detail/user-detail.component';

@NgModule({
  imports: [SharedModule],
  declarations: [UserListComponent, UserDetailComponent],
  exports: [UserListComponent] // Only export if other modules need this component
})
export class UserFeatureModule { }

Per-Component .module File Rules #

Since you’re following a strict per-component module structure, stick to these rules to avoid issues:

• Each component module encapsulates its own dependencies: Import CommonModule (or other needed modules) directly in the component’s module, not in SharedModule.
• Only declare and export the single component: Keep these modules small and focused—one module per component.

Example Component Module code:

// button/button.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ButtonComponent } from './button.component';

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

Fixing Common Issues You Might Be Facing #

Here are the most frequent problems with this setup, and how to fix them:

• Shared components aren’t available in feature modules: Double-check that SharedModule exports the component’s module, and that the feature module imports SharedModule. Also ensure the component isn’t declared in any other module.
• AppModule is still bloated: Only import feature modules into AppModule—you don’t need to import SharedModule unless AppComponent directly uses shared components. For core services (like auth or config), create a separate CoreModule that’s imported once in AppModule.
• Circular dependency errors: Make sure component modules don’t import each other, and feature modules only import SharedModule (not other feature modules directly, unless absolutely necessary).
• Components not rendering: Verify that the component’s selector is correctly used, and that the component’s module is properly exported from SharedModule.

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