Storybook wrapper component invokes multiple imports

Question

After migrating storybook to ^7 version, i have some issue with imports. click here to see.

So that invokes many imports and some of them, i guess, are not needed here. This problem happens not in all stories. So, how can we solve this problem, or it is just normal case? Can we move these imports to separate module and just import them in needed place?

here is my story

export default {
    title: 'Example/AddTags',
    component: AddTagsComponent,
    decorators: [
        moduleMetadata({
            imports: [TranslateModule.forRoot(), StoreModule.forRoot(), BrowserAnimationsModule, HttpClientModule],
            declarations: [AutocompleteDropdownComponent],
            providers: [
                { provide: 'windowObject', useValue: window },
                { provide: TranslateService, useClass: MockTranslateService },
                TagsService,
                PermissionCheckService,
                ResourceApiService,
                ApiClientService,
                TranslatorHelperService,
                TranslatorService,
                NgxPermissionsService,
                UserService,
                DynamicDialogService,
                ProjectsApiService,
                MessagesService,
                NzModalService,
                NzNotificationService,
                GroupsApiService,
                TasksApiService
            ]
        })
    ], 

and this is my component:

<div class="{{ styleClass }} w-full">
    <app-autocomplete-dropdown
        [selected]="selected"
        [results]="tags$$"
        (addNew)="createTag($event)"
        [isLoading]="isTranslating"
        (searchAction)="searchTags($event)"
        (selectItem)="whenSelect($event)"
        [multiple]="multiple"
        [addNewOptions]="addNewOptions"
        [delay]="delay"
        [lastSearch]="lastSearch"
        [dataKey]="dataKey"
        [size]="size"
        [serverSearch]="false"
        [maxItemCount]="maxItemCount"
        [placeholder]="placeholder"
        [noResults]="noResults"
        (whenFocus)="whenFocus.emit()"
        (whenBlur)="whenBlur.emit()"
        [showTranslatedName]="true"
        field="title"
        [selectedLanguage]="locale"
    ></app-autocomplete-dropdown>
</div>

and imports in it:

import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
import { BehaviorSubject, Observable, Subscription } from 'rxjs';
import { NzSizeLDSType } from 'ng-zorro-antd/core/types';
import { TranslateService } from '@ngx-translate/core';
import { map, switchMap } from 'rxjs/operators';

import { TagType } from '@a-domains/core/types/Tag';
import { TagsService } from '@a-domains/tags/services/tags.service';
import { TranslatorHelperService } from '@a-domains/translator/services/translator-helper.service';
import { sortByTranslatedField } from '@a-domains/core/utils/sort';

@Component({
    selector: 'app-add-tags',
    templateUrl: './add-tags.component.html'
})
export class AddTagsComponent implements OnInit, OnDestroy { ...