如何使用 forRoot() 将 NgModule 库导入到 Angular 独立组件中？

Question

我目前正在开发一个使用独立组件的 Angular 应用程序（版本 16.1.3）。该应用程序还依赖于使用 NgModules 的 Angular 库。我正在尝试将此库中的组件导入到我的应用程序中，其中该库还包含一个从应用程序中检索环境数据的函数。

这是ui-lib.module.ts图书馆的

export class UiLibModule {
    public static forRoot(environment: any): ModuleWithProviders<UiLibModule> {
        return {
            ngModule: UiLibModule,
            providers: [
                {
                    provide: 'environment',
                    useValue: environment,
                },
            ],
        };
    }
}

在我的主应用程序中，我将库导入到我的main.ts文件中，如下所示：

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(
    ...
    UiLibModule.forRoot(environment),
    ...)
    ]
...});

但是，当我尝试使用库中的组件时遇到问题：

• 如果我在主应用程序内但在 之外使用库组件<router-outlet></router-outlet>，则一切都会按预期工作。
• 如果我在 中路由的组件中使用我的库中的相同组件<router-outlet></router-outlet>，我就会遇到问题。组件显示正确，但离开页面时，路由器无法从页面中删除该组件。此外，控制台中不会显示任何错误。

以下是我在独立组件中导入 UiLibModule 的方法：

...
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
  imports: [
    UiLibModule
  ]

.forRoot()我已经使用使用该函数的库和不使用该函数的库对此进行了测试。似乎未使用的库.forRoot()按预期工作，而使用的库则遇到了上述问题。

我的问题涉及我的图书馆的正确和完整包含。我不确定当前导入库的方式是否准确且全面。具体来说，我很好奇是否有一种方法可以通过独立组件直接添加环境。

此外，我不确定是否需要在独立组件中再次声明环境，因为它已经在 main.ts 文件中声明了。

任何有关这些问题的指导或建议将不胜感激。

先感谢您。

Answer 1

可能为时已晚，但对于遇到同样问题的其他开发人员来说，您可以在这里找到解决方案：Angular Docs。

您所需要的只是使用该importProvidersFrom()方法。

作为尝试导入 Auth0 模块时的示例：

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), importProvidersFrom(AuthModule.forRoot({
    // ... config
  }))]
};