相关疑难解决方法(0)

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

我目前正在开发一个使用独立组件的 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,
                },
            ],
        };
    }
}
Run Code Online (Sandbox Code Playgroud)

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

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(
    ...
    UiLibModule.forRoot(environment),
    ...)
    ]
...});
Run Code Online (Sandbox Code Playgroud)

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

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

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

...
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
  imports: [
    UiLibModule
  ]
Run Code Online (Sandbox Code Playgroud)

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

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

此外,我不确定是否需要在独立组件中再次声明环境,因为它已经在 …

ng-modules angular angular-router angular-library angular-standalone-components

19
推荐指数
1
解决办法
3623
查看次数

在独立模式下,如何在 Angular 17 中导入模块?

每个人。我注意到 Angular 17 默认为独立模式,这意味着它不会自动生成文件 app.module.ts...下面的代码在独立模式下生成 Angular 应用程序:

ng new project-name
Run Code Online (Sandbox Code Playgroud)

下面的代码在非独立模式下生成一个角度应用程序:

ng new project-name --no-standalone
Run Code Online (Sandbox Code Playgroud)

但是,如果我正在使用这个新的独立版本,有人可以指导我使用哪个文件以及如何导入之前在 app.module.ts 文件中导入的模块吗?

举个例子:如果我想从@angular/platform-b​​rowser导入模块BrowserModule,我是否必须将其导入到将在组件装饰器中使用它的所有组件中?因为之前,我需要仅在 app.module.ts 处导入。或者我在这里遗漏了什么?

angular

5
推荐指数
1
解决办法
5923
查看次数