Angular15库动态懒加载组件绝对路径导入问题求助

更新内容 #

• 已提供可复现示例仓库
• 核心困境：查阅大量文档后，仍无法解决懒加载+动态导入+带变量绝对路径的组合问题

我有一个包含库和应用的Angular 15项目，要求用绝对路径引用库组件（方便其他Angular项目复用）。库包含独立组件和次级入口点，其中一个动态容器组件需要根据REST API响应，在ViewContainerRef中动态创建组件。

用相对路径时功能完全正常：

const module = await import(`../../${item.path}/src/${item.path}.component`);

但改成绝对路径后，尝试了修改tsconfig、package导出等多种方式，始终报错，最常见的错误提示为：

./projects/mycompany/sdk/dynamic-container/src/dynamic-container.component.ts:21:31-95 - Error: Module not found: Error: Can't resolve '@mycompany/sdk' in 'C:\Users\yekat\apps\new\our-library\projects\mycompany\sdk\dynamic-container\src'

由于组件数量不固定，无法全量导入整个库，急需可行的解决方案。

初始问题详情 #

我有两个协同工作的Angular 15项目：一个是包含独立组件和次级入口点的库，其中的动态容器组件需要根据API响应动态创建组件，核心代码如下：

component.module = await import(`../../../${itemPath}/src/${componentName}.component`);
...
this.componentRef = this.containerRef?.createComponent(component.module[component.moduleName]);

库内的沙箱模块用相对路径导入该动态组件时运行正常，懒加载符合预期，构建后dist目录生成esm2020、fesm2015等文件，服务启动时能看到懒加载chunk。

库的tsconfig.json配置 #

{
  "compileOnSave": false,
  "compilerOptions": {
    "resolveJsonModule": true,
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "strictPropertyInitialization": false,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "paths": {
      "@mycompany/sdk/*": [
        "projects/mycompany/sdk/*"
      ],
      "@mycompany/sdk": [
        "projects/mycompany/sdk"
      ]
    },
    "target": "ES2022",
    "module": "ES2022",
    "useDefineForClassFields": false,
    "lib": [
      "ES2022",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

angular.json配置片段 #

"projects": {
    "@mycompany/sdk": {
        "projectType": "library",
        "root": "projects/mycompany/sdk",
        "sourceRoot": "projects/mycompany/sdk",
        "prefix": "lib",
        "schematics": {
            "@schematics/angular:component": {
            "standalone": true,
            "style": "scss"
            },
            "@schematics/angular:directive": {
            "standalone": true
            },
            "@schematics/angular:pipe": {
            "standalone": true
            }
        },
        "architect": {
            "build": {
            "builder": "@angular-devkit/build-angular:ng-packagr",
            "options": {
                "project": "projects/mycompany/sdk/ng-package.json"
            },
            "configurations": {
                "production": {
                "tsConfig": "projects/mycompany/sdk/tsconfig.lib.prod.json"
                },
                "development": {
                "tsConfig": "projects/mycompany/sdk/tsconfig.lib.json"
                }
            },
            "defaultConfiguration": "production"
            },
            "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
                "tsConfig": "projects/mycompany/sdk/tsconfig.spec.json",
                "polyfills": ["zone.js", "zone.js/testing"]
            }
            }
        }
    },
...

其他应用导入时的问题 #

通过Verdaccio发布库后，其他应用导入普通组件正常，但导入动态容器组件时报错。第二个应用通过包路径导入组件：

import { DynamicContainerComponent } from '@mycompany/sdk/base-components/dynamic-container';

尝试修改该应用的tsconfig路径配置：

"paths": {
  "../../../base-components/*" : [
     "node_modules/@mycompany/sdk/base-components/*"
  ],
  "../../../base-components" : [
    "node_modules/@mycompany/sdk/base-components"
  ],
  "base-components": [
    "node_modules/@mycompany/sdk/base-components"
  ],
  "@mycompany/sdk/*": [
    "node_modules/@mycompany/sdk/*"
  ],
  "./base-components": [
    "node_modules/@mycompany/sdk/base-components"
  ]
}

构建后dist目录生成大量特殊命名文件，服务启动时能看到懒加载chunk，但浏览器运行报错。尝试将相对路径改为@mycompany/sdk/${itemPath}/src/${componentName}.component时：

• 库启动报错：

./projects/mycompany/sdk/base-components/dynamic-container/src/dynamic-container.component.ts:39:31-105 - Error: Module not found: Error: Can't resolve '@mycompany/sdk' in 'C:\Users\yekat\mw10-front-end-components\projects\mycompany\sdk\base-components\dynamic-container\src'

• 第二个应用报错：

./node_modules/@mycompany/sdk/fesm2020/mycompany-sdk-base-components-dynamic-container.mjs:38:31-105 - Error: Module not found: Error: Can't resolve '@mycompany/sdk' in 'C:\Users\yekat\apps\new\test-lib\node_modules\@mycompany\sdk\fesm2020'

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