如何将Angular Library打包为CDN包，实现跨项目（HTML/Angular）引入

Got it, since you already know how to build an Angular library and use it via a local .tgz file, let's walk through turning it into a CDN-hosted package that works in both plain HTML apps and Angular projects, plus how to deploy it for others to use.

Angular's default library build generates code for module-based projects, but to work via CDN, you need a UMD (Universal Module Definition) bundle that can run in global browser contexts. Here's how to set it up:

1. Open your library's ng-package.json file (usually in the library's root folder) and add UMD configuration:

   {
     "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
     "dest": "../../dist/your-library-name",
     "lib": {
       "entryFile": "src/public-api.ts",
       "umdModuleIds": {
         // Map any external dependencies to their global UMD names (adjust based on your library's imports)
         "@angular/common": "ng.common",
         "@angular/core": "ng.core"
       }
     }
   }
   

2. Build the library in production mode:

   ng build your-library-name --prod
   

   This will generate a UMD bundle (e.g., your-library-name.umd.js and minified your-library-name.umd.min.js) in the dist/your-library-name/bundles folder.

You have several options to host your library's UMD bundle on a CDN. Here are the most common ones:

Option 1: Publish to npm + Use jsDelivr/unpkg #

npm-based CDNs like jsDelivr and unpkg automatically host packages published to npm.

1. Navigate to your built library's directory:

   cd dist/your-library-name
   

2. Initialize a package.json (if not already present) and fill in your library details:

   npm init
   

3. Log in to your npm account (create one if you don't have it):

   npm login
   

4. Publish the package:

   npm publish
   

   Your CDN link will look like this (replace placeholders):
   • jsDelivr: https://cdn.jsdelivr.net/npm/your-library-name@latest/bundles/your-library-name.umd.min.js
   • unpkg: https://unpkg.com/your-library-name@latest/bundles/your-library-name.umd.min.js

Option 2: GitHub Pages #

If you prefer hosting via GitHub:

1. Create a gh-pages branch in your library's repository.
2. Push the contents of the dist/your-library-name folder to this branch.
3. Enable GitHub Pages in your repo settings (set the source to the gh-pages branch).
   Your CDN link will be: https://your-username.github.io/your-repo-name/bundles/your-library-name.umd.min.js

Option 3: Self-Hosted CDN #

Upload the bundles folder to a cloud storage service like AWS S3, Cloudflare R2, or Netlify, then enable static site hosting to get a public CDN URL.

To use your library in a simple HTML file, load Angular's CDN dependencies first, then your library's bundle:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>CDN Library Test</title>
  <!-- Load Angular core dependencies -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/3.29.0/core.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.13.0/zone.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular/16.2.0/angular.min.js"></script>
  <!-- Load your library's CDN bundle -->
  <script src="https://cdn.jsdelivr.net/npm/your-library-name@latest/bundles/your-library-name.umd.min.js"></script>
</head>
<body>
  <!-- Use your library's component -->
  <your-library-component></your-library-component>

  <script>
    // Bootstrap the Angular app with your library module
    angular.module('app', ['your-library-name'])
      .run(() => console.log('Library loaded successfully!'));
    angular.bootstrap(document, ['app']);
  </script>
</body>
</html>

For Angular projects, you can skip local installation and use the CDN bundle directly:

1. Add the CDN link to your angular.json under scripts:

   "architect": {
     "build": {
       "options": {
         "scripts": [
           "https://cdn.jsdelivr.net/npm/your-library-name@latest/bundles/your-library-name.umd.min.js"
         ]
       }
     }
   }
   

2. Import and use your library module in app.module.ts:

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { YourLibraryModule } from 'your-library-name'; // TypeScript will resolve types from npm if published
   
   import { AppComponent } from './app.component';
   
   @NgModule({
     declarations: [AppComponent],
     imports: [BrowserModule, YourLibraryModule],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

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