Bug(scope): TranslocoTesting

[pookdeveloper]

Is there an existing issue for this?

• I have searched the existing issues

Which Transloco package(s) are the source of the bug?

Transloco

Is this a regression?

No

Current behavior

Im getting this error: ReferenceError: structuredClone is not defined

My test module:

@NgModule({
    imports: [
        MaterialTestModule.forRoot(),
        TranslocoTestingModule.forRoot({
            langs: {es},
            translocoConfig: {
                availableLangs: ['es'],
                defaultLang: 'es',
            },
            preloadLangs: true,
        }),
    ],
    exports: [
        NoopAnimationsModule,
        CommonModule,
        MaterialTestModule,
        CondorCoreTestModule,
        CondorComponentsTestModule,
        TranslocoTestingModule,
        // HttpClientTestingModule,
        // HttpClientModule,
        MatIconTestingModule,
    ],
    providers: []
})
export class TestModule {

    static forRoot(): ModuleWithProviders<TestModule> {
        return {
            ngModule: TestModule,
            providers: [

                {provide: TRANSLOCO_TRANSPILER, useClass: DefaultTranspiler},
                {provide: TRANSLOCO_MISSING_HANDLER, useClass: TranslocoCustomMissingHandler}
            ]
        };
    }

}

Expected behavior

No error executing test

Please provide a link to a minimal reproduction of the bug, if you won't provide a link the issue won't be handled.

https://codesandbox.io/s/ngneat-transloco-kn52hs

Transloco Config

import { CommonModule } from '@angular/common';
import {
    DefaultTranspiler, Translation, TRANSLOCO_MISSING_HANDLER, TRANSLOCO_TRANSPILER, TranslocoConfig, TranslocoLoader,
    TranslocoMissingHandler, TranslocoTestingModule
} from '@ngneat/transloco';
import { es } from 'date-fns/locale';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { Injectable, ModuleWithProviders, NgModule } from '@angular/core';
import { MaterialTestModule } from './material-test-module';
import { CondorComponentsTestModule } from './condor-components-test-module';
import { CondorCoreTestModule } from './condor-core-test-module';
import { MatIconTestingModule } from '@angular/material/icon/testing';
import { HttpClient } from '@angular/common/http';

/*import locizer from 'locizer';
locizer.init({
    projectId: environment.locizeProjectId,
    apiKey: !environment.production && environment.locizeApiKey, // only needed if you want to add new keys via locizer - remove on production!
    version: environment.locizeVersion
});*/


@Injectable({providedIn: 'root'})
export class TranslocoHttpLoader implements TranslocoLoader {
    constructor(private http: HttpClient) {
    }

    getTranslation(lang: string) {
        return this.http.get<Translation>(`/assets/i18n/${lang}.json`);
    }
}

@Injectable({providedIn: 'root'})
export class TranslocoCustomMissingHandler implements TranslocoMissingHandler {
    handle(key: string, config: TranslocoConfig) {
        // @ts-ignore
        if (config['activeLang'] === config.defaultLang) {
            // locizer.add(environment.locizeNamespace, key);
        }
        return key;
    }
}

@NgModule({
    imports: [
        MaterialTestModule.forRoot(),
        TranslocoTestingModule.forRoot({
            langs: {es},
            translocoConfig: {
                availableLangs: ['es'],
                defaultLang: 'es',
            },
            preloadLangs: true,
        }),
    ],
    exports: [
        NoopAnimationsModule,
        CommonModule,
        MaterialTestModule,
        CondorCoreTestModule,
        CondorComponentsTestModule,
        TranslocoTestingModule,
        // HttpClientTestingModule,
        // HttpClientModule,
        MatIconTestingModule,
    ],
    providers: []
})
export class TestModule {

    static forRoot(): ModuleWithProviders<TestModule> {
        return {
            ngModule: TestModule,
            providers: [

                {provide: TRANSLOCO_TRANSPILER, useClass: DefaultTranspiler},
                {provide: TRANSLOCO_MISSING_HANDLER, useClass: TranslocoCustomMissingHandler}
            ]
        };
    }

}

Please provide the environment you discovered this bug in

Transloco: "@ngneat/transloco": "^5.0.6",
Angular: 16.1.8
Node: v18.16.0
Package Manager: Npm
OS: Windows

Browser

No response

Additional context

No response

I would like to make a pull request for this bug

No

[Choupa-web]

Hello,

I have same problem after migrating from v4.3.0 to v5.0.6

Transloco: "@ngneat/transloco": "^5.0.6",
Angular: 16.1.8
Node: v18.12.1
Package Manager: Npm
OS: Ubuntu

[Shahar Kazaz]

@pookdeveloper The reproduction link you provided doesn't seem relevant.
Can you or @Choupa-web provide a link to a repo with a simple test case?

A structured clone is supposed to be supported in Node.

[matt_he]

Hi !

I have the same issue on a new angular app and only on safari (chrome is working well).

    "@ngneat/transloco": "5.0.6",
    "@angular/core": "^16.1.0",

Using pnpm.

[Shahar Kazaz]

@MatthiasHe By same problem do you mean the testing module? or the structuredClone? can you please share your Safari version? this is supported by v15.4 which was released last year

[matt_he]

The structuredClone clone part not testing.

I'm using safari 15.1. Is there any way that this is compatible with a version of Safari lower than 15.4? That would seem to me to be a big problem (I'm pretty sure that a lot of people don't update their Mac regularly).

Thanks for your reactivity !

[Shahar Kazaz]

@MatthiasHe hm... I'll revert to a manual clone, which should resolve this issue. I guess people are still using old browsers (your browser version is over a year old).'
I'll add it again maybe in the future.

[matt_he]

I'm still on Monterey and that's why I'm not on an superior version.
I tried to find some stats about users using Monterey or older macos version but I didn't find something relevant (just some content like that : https://www.reddit.com/r/MacOS/comments/12lwq4e/anyone_still_holding_on_to_monterey/).

Strange that my Mac doesn't update just Safari.

Thank you again for your work and reactivity

[Mullot]

Try this temporary hotfix in order to define structuredClone

global.structuredClone = (val: any): any => JSON.parse(JSON.stringify(val));

[Shahar Kazaz]

@LionelMullot Thanks for the workaround, I'll get to it today and release a fix 👍

[Shahar Kazaz]

Please LMK if things are working as expected for you, since there isn't anything complicated in the configuration object I just used a simple JSON clone instead of the structuredClone.