Angular 17独立应用：如何获取非路由关联懒加载子组件Chunk名称

1. 用动态import手动指定子组件的chunk名 #

无需给子组件配置路由，在父组件中通过动态import()加载子组件，同时使用webpack魔法注释指定chunk名称。这样打包时子组件会生成独立的命名chunk，报错时错误栈就能显示对应的chunk名。

示例代码：

// order父组件中
import { Component, ViewContainerRef, OnInit } from '@angular/core';

@Component({
  selector: 'app-order',
  template: '<div #childContainer></div>'
})
export class OrderComponent implements OnInit {
  constructor(private vcr: ViewContainerRef) {}

  async ngOnInit() {
    // 用魔法注释指定chunk名，每个子组件可单独指定
    const { Child1Component } = await import(/* webpackChunkName: "order-child1" */ './child1.component');
    this.vcr.createComponent(Child1Component);

    // 其他子组件同理
    const { Child2Component } = await import(/* webpackChunkName: "order-child2" */ './child2.component');
    this.vcr.createComponent(Child2Component);
  }
}

2. 自定义webpack配置拆分chunk并命名 #

如果不想修改组件加载逻辑，可以通过自定义webpack配置，将指定子组件拆分到命名chunk中。

步骤：

• 项目根目录创建webpack.config.js：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        orderChildren: {
          test: /child(1|2|3|4)\.component\.ts$/, // 匹配你的4个子组件文件
          name: 'order-children', // 自定义统一chunk名，也可按组件单独拆分
          enforce: true
        }
      }
    }
  }
};

• 修改angular.json的build配置，引入自定义webpack配置：

{
  "projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.config.js",
              "mergeStrategies": {
                "optimization.splitChunks": "replace"
              }
            }
          }
        }
      }
    }
  }
}

3. 在自定义ErrorHandler中手动映射组件与chunk名 #

如果子组件和父组件同属一个chunk，只是错误栈未显示chunk名，可以提前维护组件类到chunk名的映射表，在错误处理时匹配对应关系。

示例代码：

import { ErrorHandler, Injectable } from '@angular/core';
import { OrderComponent } from './order/order.component';
import { Child1Component } from './order/child1.component';
import { Child2Component } from './order/child2.component';
// 导入其他两个子组件

const COMPONENT_CHUNK_MAP = new Map([
  [OrderComponent, 'order-chunk'], // 父组件对应的chunk名
  [Child1Component, 'order-chunk'],
  [Child2Component, 'order-chunk'],
  // 其他子组件映射到同一chunk名
]);

@Injectable()
export class CustomErrorHandler extends ErrorHandler {
  handleError(error: any): void {
    // 从错误上下文获取组件实例的构造函数
    const componentClass = error?.context?.componentInstance?.constructor;
    const chunkName = COMPONENT_CHUNK_MAP.get(componentClass);
    
    if (chunkName) {
      console.error(`[Chunk: ${chunkName}]`, error);
    } else {
      super.handleError(error);
    }
  }
}

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