基于Material的Angular 5应用转共享库是否合理？如何实现？

Absolutely! This is an excellent technical pattern—it’s exactly the kind of approach that cuts down on repetitive work, enforces consistent UI/UX across all your projects, and makes maintenance a breeze. Here’s why it’s a smart move:

• Eliminates code duplication: No more copying and pasting sidebar/navbar code into every new project. A single source of truth means you only fix bugs or update features once.
• Guarantees consistency: All your projects will have identical behavior and styling for core UI elements, which is critical for brand cohesion and user familiarity.
• Simplifies maintenance: Instead of iterating through every project to apply a UI tweak, you update the library once, and all dependent projects can pull in the changes.
• Version control flexibility: You can tag versions of your library, so projects can choose when to upgrade (avoiding breaking changes if needed).

Angular 5 predates the official ng generate library command introduced in Angular CLI 6, so we’ll use ng-packagr (the official tool for packaging Angular libraries at the time) to build and distribute your shared components. Here’s a step-by-step guide:

1. Set up your shared library project #

• Create a new Angular project to serve as your library’s base:

  ng new ui-shared-library
  

• Navigate into the project, then create your core components (sidebar, navbar) and a shared module to encapsulate them. For example:
  • Generate a module: ng generate module shared-ui
  • Generate components: ng generate component shared-ui/navbar and ng generate component shared-ui/sidebar
• Configure your SharedUiModule to declare, import, and export your components + required Material modules (so consuming projects don’t have to import them separately):

  import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  // Import required Material modules
  import { MatToolbarModule } from '@angular/material/toolbar';
  import { MatSidenavModule } from '@angular/material/sidenav';
  // Import your components
  import { NavbarComponent } from './navbar/navbar.component';
  import { SidebarComponent } from './sidebar/sidebar.component';
  
  @NgModule({
    declarations: [NavbarComponent, SidebarComponent],
    imports: [
      CommonModule,
      MatToolbarModule,
      MatSidenavModule
    ],
    exports: [
      // Export components so they can be used in consuming projects
      NavbarComponent,
      SidebarComponent,
      // Export Material modules if consuming projects need access to them
      MatToolbarModule,
      MatSidenavModule
    ]
  })
  export class SharedUiModule { }
  

2. Configure ng-packagr for packaging #

• Install ng-packagr as a dev dependency:

  npm install ng-packagr --save-dev
  

• Create an ng-package.json file in your library’s root directory to define packaging settings:

  {
    "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
    "lib": {
      "entryFile": "src/public_api.ts"
    }
  }
  

• Create a src/public_api.ts file (the entry point for your library) to export your shared module:

  export * from './app/shared-ui/shared-ui.module';
  

• Add a build script to your library’s package.json:

  "scripts": {
    "build:lib": "ng-packagr -p ng-package.json"
  }
  

3. Build and distribute the library #

• Build your library with:

  npm run build:lib
  

  This will generate a packaged library in the dist directory.
• Local testing: Use npm link to test the library in a local project:
  1. Navigate to the dist folder of your library and run npm link
  2. In your target Angular 5 project, run npm link ui-shared-library (replace with your library’s name from package.json)
• Publish to npm (public/private): If you want to share the library across teams or projects, navigate to the dist folder and run npm publish (you’ll need an npm account and to log in first).

4. Use the library in your target Angular 5 projects #

• Install the library (if using npm):

  npm install ui-shared-library --save
  

• Import the SharedUiModule into your project’s root module (or any feature module where you need the components):

  import { SharedUiModule } from 'ui-shared-library';
  
  @NgModule({
    imports: [
      // ... other modules (BrowserModule, etc.)
      SharedUiModule
    ]
  })
  export class AppModule { }
  

• Now you can use your shared components directly in templates:

  <app-navbar></app-navbar>
  <app-sidebar></app-sidebar>
  

Key Notes for Angular 5 #

• Version compatibility: Ensure your library’s dependencies (especially Angular and Angular Material) match the versions used in your target projects to avoid conflicts.
• Style encapsulation: If your components use custom styles, make sure they’re properly encapsulated (Angular’s default view encapsulation works well here) or use global styles if needed.
• Testing: Add unit tests for your library components to catch issues before they propagate to dependent projects.

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