CODEWITHSUNDEEP
angularangular-routerangular-libraryng-modulesangular-standalone-components
Florian Goebel
Florian Goebel

Reputation: 441

How to import a NgModule library with forRoot() to an Angular standalone component?

I'm currently working on an Angular application (version 16.1.3) which utilizes standalone components. This application also relies on an Angular library that uses NgModules. I'm attempting to import a component from this library into my application, where the library also contains a function to retrieve environmental data from the application.

Here's the ui-lib.module.ts from the library

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

In my main application, I'm importing the library within my main.ts file as follows:

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

However, I'm experiencing a problem when I attempt to use a component from my library:

Below is how I import the UiLibModule in my standalone components:

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

I've tested this with libraries that utilize the .forRoot() function and libraries that do not. It appears that libraries that don't use .forRoot() work as expected, while those that do encounter the aforementioned issue.

My question pertains to the correct and complete inclusion of my library. I'm unsure if the current way I'm importing my library is accurate and comprehensive. Specifically, I'm curious whether there's a way to directly add the environment through the standalone component.

Additionally, I'm uncertain whether I need to declare the environment again within the standalone component, given that it has already been declared within the main.ts file.

Any guidance or suggestions regarding these questions would be greatly appreciated.

Thank you in advance.

Upvotes: 23

Views: 13914

Answers (1)

SharpShade
SharpShade

Reputation: 2173

Probably too late your you, but for fellow devs having the same issue, you'll find the solution here: Angular Docs.

All you need is to use the importProvidersFrom() method.

As an example when trying to import Auth0's module:

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

Upvotes: 35

Related Questions