Angular 15 - 无法在运行时访问外部库文件？

Question

我们正在对我们公司的项目进行角度迁移（从 8 到 15）。第一个是包含组件的库，第二个是从库导入大量组件的主项目。经过一番努力，我们成功完成了两次迁移。该库运行良好，没有错误。但我们的主要项目有问题。

构建主项目（ng build）不会返回错误。但是启动它（ng服务）给了我们几个错误，我们试图一一修复，直到我们无法再修复......总的来说，每个错误都与lib中的文件有关（即：无法读取en enum 的值，因为它未定义）.

所以我们想知道-万一-我们是否错过了项目配置（lib和/或main）的某些内容，因为感觉主项目无法访问node_modules文件夹中的lib文件？

现在，我们遇到的错误是运行主项目时，库中的组件未定义。

app.module.ts

import { FUIMultipleZoneMeterModule } from "libPath/multiple-zone-meter/multiple-zone-meter.module";
import { FUIMultipleZoneMeterComponent } from "libPath/multiple-zone-meter/multiple-zone-meter.component";
//other imports

const customComponents: KeyValuePair<string, any>[] = [
  { key: "fui-multiple-zone-meter", value: FUIMultipleZoneMeterComponent }
];

@NgModule({
  declarations: [AppComponent],
  imports: [
    FUIMultipleZoneMeterModule,
    //other imports
  ],
  providers: [
    //some providers
  ],
  entryComponents: [
    FUIMultipleZoneMeterComponent, 
    //other components
  ]
})

export class AppModule {
  constructor(private injector: Injector) {
    customComponents.forEach((element) => {
      debugger; //here we can see that 'element' is undefined
      const component = createCustomElement(element.value, { injector });
      customElements.define(element.key, component);
    });
  }
}

两个项目版本详细信息：

• 角度：15
• Angular CLI：10.2.15
• 节点：18.19.0
• 包管理器：npm 10.2.3
• 打字稿：4.9.5

我们尝试过：

• 删除node_module文件夹
• 重新安装库

• npm clean cache --force

• 重启TS服务器
• 使用 tsconfig 文件的

  module

  、

  moduleResolution

  、

  target

  和

  paths

  属性
• 使用我们的 package.json 的

  type

  属性

Answer 1

我想分享我已经解决的相同问题： 升级库和主项目后，

ng serve

给出库文件错误。为了解决这个问题，

• 从主项目中删除库
• 使用

  ng serve

运行主项目
• 清除主项目的缓存
• 在主项目中再次安装库。

上述步骤将解决您的问题。如果有任何具体错误请分享给我。