Angular 17 + ESBuild环境下依赖动态导入问题求解

ESBuild对完全动态的import路径支持有限，这就是你遇到问题的核心原因——而Angular路由的懒加载之所以正常，是因为路由配置里的懒加载路径是可静态分析的固定路径，ESBuild能提前识别并打包对应的模块；但你代码里import(dayjs/locale/${localeMapped})这种变量拼接的动态路径，ESBuild无法在构建时预判所有可能的文件，所以不会把这些locale文件打包进产物，运行时自然找不到资源。

下面提供两种可行的解决方案：

方案一：用import.meta.glob预打包所有可能的locale #

ESBuild支持import.meta.glob语法，它会在构建时静态扫描所有匹配的文件，将它们全部打包进产物，这样运行时就能动态加载任意匹配的locale：

// 静态匹配所有dayjs locale文件，构建时会打包这些文件
const localeModules = import.meta.glob('dayjs/locale/*.js');

export async function initialize(locale: string): Promise<void> {
    const localeMapped = CUSTOM_LOCALE_MAP[locale] || locale;

    try {
        // 拼接完整的模块路径，从预打包的模块中加载
        const modulePath = `dayjs/locale/${localeMapped}.js`;
        if (localeModules[modulePath]) {
            await localeModules[modulePath]();
        } else {
            console.error(`Locale ${localeMapped} does not exist`);
        }
    } catch (error) {
        console.error('Failed to load locale:', error);
    }

    dayjs.locale(localeMapped);
}

方案二：按需导入指定locale（轻量化） #

如果不需要支持所有locale，只需要特定的几种，可以手动维护一个locale导入映射，这样只会打包你明确指定的locale文件，减少产物体积：

// 只定义需要支持的locale导入函数
const localeImports: Record<string, () => Promise<any>> = {
    'zh-cn': () => import('dayjs/locale/zh-cn'),
    'en': () => import('dayjs/locale/en'),
    'ja': () => import('dayjs/locale/ja'),
    // 按需添加其他需要的locale...
};

export async function initialize(locale: string): Promise<void> {
    const localeMapped = CUSTOM_LOCALE_MAP[locale] || locale;

    try {
        const loadLocale = localeImports[localeMapped];
        if (loadLocale) {
            await loadLocale();
        } else {
            console.error(`Locale ${localeMapped} is not supported`);
        }
    } catch (error) {
        console.error('Failed to load locale:', error);
    }

    dayjs.locale(localeMapped);
}

补充说明 #

• ESBuild的动态导入要求路径必须有静态可分析的部分，完全动态的路径（比如全变量拼接）无法被识别，这是它和Webpack的一个差异点。
• Angular路由的懒加载本质是静态路径的动态导入，符合ESBuild的分析规则，所以能正常工作。

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