如何通过Azure DevOps将Angular模板应用转为可集成模块？

Great question! Let's walk through exactly how to turn your Angular app into a reusable library and set up Azure DevOps to keep your projects in sync—no duplicate builds, just smooth updates.

Turning your app into a class library is the right move here—it eliminates redundant builds, boosts performance, and makes modular reuse straightforward. Here's how to do it:

• Use the Angular CLI to generate a library skeleton:

  ng generate library my-shared-library
  

• Migrate your existing components, services, and modules into the library's source directory (projects/my-shared-library/src).
• Configure public-api.ts to explicitly expose only the parts you want other projects to use—this keeps your API clean and stable:

  // public-api.ts
  export * from './lib/my-shared.component';
  export * from './lib/my-shared.service';
  export * from './lib/my-shared.module';
  

• Test locally first: Import the library module into your main Angular app to verify all functionality works as expected before moving to Azure DevOps.

We'll use Azure DevOps to automate builds and publish pre-compiled artifacts, so your projects don't have to recompile the library every time.

• Create a Build Pipeline

  1. Link your Azure Repos Git repository to the pipeline, then use a custom YAML configuration (or start with the Angular template and tweak it).
  2. Add these core tasks to your YAML:
     • Install dependencies: npm install
     • Build the library in production mode (for optimized, pre-compiled output):

       ng build my-shared-library --prod
       

     • Package the compiled library (from dist/my-shared-library) into a zip or npm package.
     • Publish the artifact to Azure DevOps using the PublishBuildArtifacts task—this stores your pre-built library for later use.

• Publish to Azure Artifacts Private Feed

  1. Create a private NPM feed in Azure Artifacts (this keeps your library secure while making it accessible to your projects).
  2. Add tasks to your build pipeline to:
     • Authenticate to your Azure Artifacts feed using the npm authenticate task.
     • Publish the compiled library to the feed:

       npm publish dist/my-shared-library --registry <your-feed-url>
       

Now set up automation to push library updates to your target projects automatically:

• Configure Projects to Use the Azure Artifacts Feed

  1. In each new project, add a .npmrc file pointing to your Azure Artifacts feed:

     registry=https://pkgs.dev.azure.com/your-org/_packaging/your-feed/npm/registry/
     always-auth=true
     

  2. Install the library into the project:

     npm install my-shared-library
     

• Set Up a Release Pipeline for Automated Updates

  1. Create a Release Pipeline triggered by successful library builds (so every time you update the library, the release runs automatically).
  2. Add tasks to the release to:
     • Connect to your target project server(s).
     • Run npm update my-shared-library to pull the latest pre-compiled version.
     • Optional: Restart the project or run a quick build/test to ensure the update works seamlessly.

• Semantic Versioning: Use SemVer (e.g., 1.0.0, 1.0.1, 1.1.0) for your library to communicate breaking changes, bug fixes, and new features clearly. Azure DevOps can automate version increments if needed.
• API Stability: Avoid changing your public-api.ts unnecessarily—breaking changes will force updates across all dependent projects.
• Testing: Add unit tests to your library and include them in the build pipeline to catch issues before they reach your projects.

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