const appRef = await createApplication(
    mergeApplicationConfig(appConfig, {
        providers: [
            provideExperimentalZonelessChangeDetection(),
            provideRouter(
                [
                    {
                        path: ``,
                        component: TestComponent,
                    },
                    {
                        path: `2`,
                        component: Test2Component,
                    },
                ],
            ),
            provideEnvironmentInitializer(() => {
                inject(Router).initialNavigation();
            }),
            {
                provide: LocationStrategy,
                useClass: CustomLocationStrategy,
            },
        ],
    }),
);

const element = createCustomElement(MessengerComponent, {
    injector: appRef.injector,
});

customElements.define(`t-messenger`, element);

export type NgElementConfig  = {
    /**
     * An optional custom strategy factory to use instead of the default.
     * The strategy controls how the transformation is performed.
     */
    strategyFactory?: NgElementStrategyFactory;
} & (
    {
        /**
         * The injector to use for retrieving the component's factory.
         */
        injector: Injector;
    } | {
        /**
         * The config for application.
         */
        applicationConfig: ApplicationConfig;
    }
);

const element = createCustomElement(MessengerComponent, {
    applicationConfig: mergeApplicationConfig(appConfig, {
        providers: [
            provideExperimentalZonelessChangeDetection(),
            provideRouter(
                [
                    {
                        path: ``,
                        component: TestComponent,
                    },
                    {
                        path: `2`,
                        component: Test2Component,
                    },
                ],
            ),
            provideEnvironmentInitializer(() => {
                inject(Router).initialNavigation();
            }),
            {
                provide: LocationStrategy,
                useClass: CustomLocationStrategy,
            },
        ],
    })
});

customElements.define(`t-messenger`, element);