Angular 8构建文件差异及Web Components单文件打包问题求助

Hey there! I totally get how frustrating it is when outdated tutorials block your progress—especially when you’re diving into something new like Angular Web Components. Let’s break down the problem and fix this step by step.

Why the File Structure Changed #

Angular 8 introduced differential loading, a feature that automatically generates two sets of build files:

• ES2015 versions (*-es2015.js): For modern browsers that support ES6+ features
• ES5 versions (*-es5.js): For older browsers (like IE11)

Older Angular versions (5/6/7) didn’t have this feature, so tutorials only reference single runtime/polyfills/main files. This is exactly why your existing merge scripts from those tutorials aren’t working.

Solution 1: Disable Differential Loading (Quick Fix) #

If you don’t need to support older browsers, you can turn off differential loading to match the file structure from older tutorials:

1. Open tsconfig.json and set "target": "ES2015" (instead of "ES5")
2. Open angular.json, find your build configuration, and remove or update the browserslist property to target only modern browsers. For example:

   "browserslist": [
     "last 2 Chrome versions",
     "last 2 Firefox versions"
   ]
   

3. Run ng build --prod—you’ll now get single runtime.js, polyfills.js, and main.js files, which work with the merge scripts from older tutorials.

Solution 2: Merge Differential Loading Files (Best Practice) #

To keep browser compatibility and generate a single Web Component bundle, use a custom script to merge the correct set of files. Here’s how:

Step 1: Install Dependencies

First, add tools to concatenate and minify files:

npm install --save-dev concat uglify-js fs-extra

Step 2: Create a Merge Script

Create a file named build-web-component.js in your project root:

const concat = require('concat');
const fs = require('fs-extra');
const uglify = require('uglify-js');

// Choose either ES2015 (modern browsers) or ES5 (legacy support) files
const targetFiles = [
  './dist/my-app/runtime-es2015.js',
  './dist/my-app/polyfills-es2015.js',
  './dist/my-app/scripts.js',
  './dist/my-app/main-es2015.js'
];

// Merge files into a single bundle
concat(targetFiles, './dist/my-app/my-web-component.js')
  .then(() => {
    // Optional: Minify the bundle for production
    const minified = uglify.minify(fs.readFileSync('./dist/my-app/my-web-component.js', 'utf8'));
    fs.writeFileSync('./dist/my-app/my-web-component.min.js', minified.code);
    console.log('Web Component bundle created successfully!');
  })
  .catch(err => {
    console.error('Error creating bundle:', err);
  });

Step 3: Add a Build Script

Update your package.json to include a new script that builds and bundles your Web Component:

"scripts": {
  "build:wc": "ng build --prod && node build-web-component.js"
}

Step 4: Verify Your Web Component Setup

Make sure your Angular 8 project is configured correctly for Web Components:

• In app.module.ts, enable the CUSTOM_ELEMENTS_SCHEMA:

  import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  
  @NgModule({
    // ... other config
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
  })
  export class AppModule { }
  

• In main.ts, register your component as a custom element:

  import { enableProdMode, Injector } from '@angular/core';
  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { createCustomElement } from '@angular/elements';
  import { AppComponent } from './app/app.component';
  import { environment } from './environments/environment';
  
  if (environment.production) {
    enableProdMode();
  }
  
  // Convert Angular component to Web Component
  const webComponent = createCustomElement(AppComponent, { 
    injector: platformBrowserDynamic().injector 
  });
  customElements.define('my-web-component', webComponent);
  

Step 5: Build Your Bundle

Run the new script to generate your single-file Web Component:

npm run build:wc

You’ll now have my-web-component.js (and my-web-component.min.js if you enabled minification) in your dist/my-app folder, ready to use as a standalone Web Component.

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