[Bug]: ngx-translate not working after upgrading from 6.5.16 to 7.3.2

[esbakker]

Describe the bug

We're in the process of upgrading angular from 13 to 16, and in the process we're also upgrading storybook from 6.5.16 to 7.3.2.

The angular upgrade was successful, but not all components are rendered in storybook (no issues outside of storybook).

The issue resides in the nxg-translate TranslateService that can not be provided.

For storybook 6 we had the following setup of the component:

export default {
  component: FailingComponent,
  decorators: [
    moduleMetadata({
      imports: [FailingComponentModule, TranslateModule.forRoot()]
    })
  ]
} as Meta;

following the migration documentation we updated the setup to the following:

export default {
  component: FailingComponent,
  decorators: [
    moduleMetadata({
      imports: [FailingComponentModule]
    }),
    applicationConfig({
      providers: [importProvidersFrom(TranslateModule.forRoot())]
    })
  ]
} as Meta;

While it worked fine in storybook 6 it fails in storybook 7 with the following error:

R3InjectorError(Standalone[StorybookWrapperComponent])[TranslateService -> TranslateService -> TranslateService]: 
  NullInjectorError: No provider for TranslateService!

I tried all different configurations of importing the TranslateModule and TranslateService, but no success so far.

To Reproduce

No response

System

No response

Additional context

No response

[jerkovicl]

@esbakker yeah same problem with me, using latest 7.4.0 version, it was working previously but suddenly it stopped working

using external module

@NgModule({
  imports: [
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useValue: staticTranslateLoader,
      },
      useDefaultLang: true,
      defaultLanguage: 'en',
    }),
  ],
  exports: [TranslateModule],
  providers: [{ provide: LOCALE_ID, useValue: 'hr' }, TranslateService],
})
export class StorybookTranslateModule {
  constructor(translateService: TranslateService) {
    translateService.setDefaultLang('en');
    translateService.use('en');

    let channel = addons.getChannel();
    channel.addListener(GLOBALS_UPDATED, (args: any) => {
      translateService.use(args.globals.locale);
    });
  }
}

using moduleMetadata or applicationConfig, nothing works

decorators: [
    moduleMetadata({
      imports: [
        NgIf,
        ReactiveFormsModule,
        StorybookTranslateModule,
        AutoCompleteModule,
        DatatablePipe,
        ErrorMessageComponent,
        LabelComponent,
      ],
    }),
    applicationConfig({
      providers: [
        provideAnimations(),
        //importProvidersFrom(StorybookTranslateModule),
        provideHttpClient(withInterceptors([OrganizationInterceptor])),
        provideRouter([]),
      ],
    }),
]

[EliezerB123]

@jerkovicl @esbakker

Any luck? We're having a similar issue, that our global imports and providers stopped working after migrating to v7.x.x.

Edit: Nevermind. valentinpalkovic's excellent step-by-step breakdown here helped me migrate my imports and modules (I needed to remove all of my ModuleWithProviders from my imports, and instead put them into my providers section via the ApplicationConfig within a importProvidersFrom() function.)

[vanessayuenn]

@EliezerB123 good to know the migration worked in the end!

@jerkovicl @esbakker do y'all have any luck trying the same migration?

[jerkovicl]

@vanessayuenn yeah i managed to fix it as well using applicationConfig and importProvidersFrom()

[esbakker]

@vanessayuenn no, no luck yet (I already tried the applicationConfig as mentioned in my original post). I tried to create a repo with a simple reproduction, but there it seems to work, So it looks like it is something in our setup that prevents the TranslateService to be provided.

[esbakker]

@vanessayuenn I have it working locally now. I had 2 stories that weren't migrated correctly yet, and apparently that influences other stories as well?

What doesn't work yet is uploading them to chromatic. If I want to view them there I still get the same errors. Not sure if that's something to keep this bug open for, or that it's a chromatic issue.

[esbakker]

Ok, unfortunately it doesn't work locally either yet. Before the weekend I removed all stories and added them back one-by-one, made some small fixes and everything worked. But after starting storybook again this morning I get the same errors again...

[jy95]

Same issue with provideAnimations

import { provideAnimations } from '@angular/platform-browser/animations';
import { NgxJsonSchemaViewerComponent } from "ngx-json-schema-viewer";
import { moduleMetadata, applicationConfig } from '@storybook/angular';

import type { Meta, StoryObj } from '@storybook/angular';

const meta : Meta<NgxJsonSchemaViewerComponent> = {
    //component: NgxJsonSchemaViewerComponent,
    title: "Viewer/Array",
    decorators: [
      moduleMetadata({
        imports: [NgxJsonSchemaViewerComponent],
      }),
      applicationConfig({
        providers: [provideAnimations()],
      })
    ]
};

[github-actions[bot]]

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

[valentinpalkovic]

@jy95

Could you try this instead?

import { Meta, StoryObj, applicationConfig } from '@storybook/angular';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { importProvidersFrom } from '@angular/core';

const meta: Meta = {
  component: OpenCloseComponent,
  decorators: [
    applicationConfig({
      providers: [importProvidersFrom(BrowserAnimationsModule)],
    }),
  ]
};

Does it work this way?

[valentinpalkovic]

@esbakker So, as I understand, you can't provide a reproduction since it works then. Does your reproduction uses the exact same versions like your project? Maybe a slightly different version of Storybook or Angular is installed.

[jy95]

@valentinpalkovic Not quite, what worked for me in my config was :

import { provideAnimations } from '@angular/platform-browser/animations';
import { NgxJsonSchemaViewerComponent, JSV_OPTIONS } from "ngx-json-schema-viewer";
import { moduleMetadata, applicationConfig } from '@storybook/angular';
import { HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';

import type { Meta, StoryObj } from '@storybook/angular';

// Return a pre-configured meta object to be export
export type MetaViewer = Meta<NgxJsonSchemaViewerComponent>;
export const defaultMeta : Meta<NgxJsonSchemaViewerComponent> = {
    decorators: [
        moduleMetadata({
            imports: [NgxJsonSchemaViewerComponent],
        }),
        applicationConfig({
            providers: [
                // BrowserAnimationsModule
                provideAnimations(),
                // HighlightModule 
                {
                    provide: HIGHLIGHT_OPTIONS,
                    useValue: {
                        coreLibraryLoader: () => import('highlight.js/lib/core'),
                        languages: {
                            json: () => import('highlight.js/lib/languages/json'),
                        }
                    }
                },
                // Json schema viewer options
                {
                    provide: JSV_OPTIONS,
                    useValue: {}
                }
            ],
        })
    ]
}

[github-actions[bot]]

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

[esbakker]

I think I found the issue. If there are inconsistencies between the peerDependencies of the components library and the dependencies of the storybook root I get these errors. If I do an npm install for both the errors disappear. I'll close the ticket.