[BUG] Memory leak after destroying angular application

[MillerSvt]

Observed behavior

We have multiple angular applications per page, and each have their own feature flags. We use web-sdk, and implement RestClient with using Angular HttpClient. Then we create OpenFeatureClient like this:

        {
            provide: dcoFeatureFlagClient,
            useFactory: async (): Promise<Client> => {
                const restClient = new OpenFeatureRestClient(url); // here is HttpClient inside
                const provider = new FeatureToggleProvider(restClient);
                const context = await contextFactory();

                return OpenFeature.setProvider(provider).getClient(context);
            },
        },

This creates some unexpected behavior:

1. All Angular applications, uses the same HttpClient instance (from last created application).
2. HttpClient and all its dependencies does not cleaned by GC, and still persists in memory heap dump until call globalThis[Symbol(@openfeature/js-sdk/api)] = null.
3. After destroying last created application, others cannot retrieve any feature flags, because HttpClient from last created application, that used by all applications is destroyed, and it throws NG0205 error.

Expected Behavior

DO NOT create global OpenFeature instance in globalThis object. Add ability to create separate instances of OpenFeature API for each applications.

Steps to reproduce

No response

[beeme1mr]

Hi @MillerSvt, OpenFeature is a global singleton by design. You should be able to register the provider outside of the factory and only include OpenFeature.getClient(). If your app requires multiple providers, you can use domains to bind clients to providers.

FYI @toddbaert @lukas-reining

[lukas-reining]

Thanks for opening the issue @MillerSvt!
As @beeme1mr says, the design of the SDK is to never let users create the API instances.
Instead, the global instance is meant to manage the lifecycle of the clients, which can be distinguished by the usage of domains.
Our Angular SDK also uses this approach to manage feature flagging over custom directives.

We have multiple angular applications per page.

Are you doing this as micro frontends? Can you share which technology you uses? Something like single-spa, iframes, @angular/elements or module federation?

If so, and the apps have independent lifecycles, I understand that using non-domain scoped clients can lead to problems.
In that case you should have a domain scoped client for each app.
Also, in that case you should not call OpenFeature.shutdown before all applications have been shut down.

[MillerSvt]

you can use domains to bind clients to providers

If we create multiple instances of the same application, domain name remains the same. We should randomize domain name, to avoid reusing same domain across multiple applications.

Are you doing this as micro frontends?

We use Web Components, with custom NgElement implementation, that create application to each web component. See: angular/angular#61752

OpenFeature is a global singleton by design

It seems that we have unsolvable conflict with your and our designs. By our design we mustn't mutate any global objects, and create any global variables, because our web components can integrate to many sites, with many frameworks, and it can lead to unexpected behavior on sites. So, we discuss with our team, and decided refuse to use OpenFeature library. We create own lightweight REST client for that. So, you can close this issue, if you want.

---

Just idea for you:

We create Resource based API to retrieve Feature Flags:

export type FeatureResourceFactory<T> = () => Resource<T>;

export declare const feature: {
    <T extends Record<string, unknown>>(path: string, defaultValue: T): FeatureResourceFactory<T>;
    boolean(path: string, defaultValue: boolean): FeatureResourceFactory<boolean>;
    number(path: string, defaultValue: number): FeatureResourceFactory<number>;
    string(path: string, defaultValue: string): FeatureResourceFactory<string>;
};

And we can use in project like this:

export const isFeatureEnabled = feature.boolean(`is_feature_enabled`, false);

@Component(...)
export class MyComponent {
     public readonly isFeatureEnabled = isFeatureEnabled();
}