auto migrate standalone components

src/app/app.component.spec.ts

@@ -6,9 +6,8 @@ describe('AppComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        imports: [RouterTestingModule],
+    imports: [RouterTestingModule, AppComponent],
-        declarations: [AppComponent],
+}).compileComponents();
-      }).compileComponents();
     }),
   );
 

src/app/app.component.ts

@@ -2,6 +2,8 @@ import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
 import {fader} from './animations';
 import {ScrollService} from './services/scroll.service';
 import {register} from 'swiper/element/bundle';
+import {RouterOutlet} from '@angular/router';
+import {NavigationComponent} from './widget-modules/components/application-frame/navigation/navigation.component';
 
 @Component({
   selector: 'app-root',
@@ -9,7 +11,7 @@ import {register} from 'swiper/element/bundle';
   styleUrls: ['./app.component.less'],
   animations: [fader],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
+  imports: [RouterOutlet, NavigationComponent],
 })
 export class AppComponent implements OnInit {
   public constructor(private scrollService: ScrollService) {

src/app/app.module.ts

@@ -1,44 +0,0 @@
-import {BrowserModule} from '@angular/platform-browser';
-import {NgModule} from '@angular/core';
-
-import {AppRoutingModule} from './app-routing.module';
-import {AppComponent} from './app.component';
-import {ServiceWorkerModule} from '@angular/service-worker';
-import {environment} from '../environments/environment';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {ApplicationFrameModule} from './widget-modules/components/application-frame/application-frame.module';
-import {AngularFireModule} from '@angular/fire/compat';
-import {AngularFirestoreModule} from '@angular/fire/compat/firestore';
-import {AngularFireStorageModule} from '@angular/fire/compat/storage';
-import {AngularFireDatabaseModule} from '@angular/fire/compat/database';
-import {AngularFireAuthModule} from '@angular/fire/compat/auth';
-import {AngularFireAuthGuardModule} from '@angular/fire/compat/auth-guard';
-import {MAT_DATE_LOCALE} from '@angular/material/core';
-import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    AppRoutingModule,
-    ServiceWorkerModule.register('ngsw-worker.js', {
-      enabled: environment.production,
-    }),
-    BrowserAnimationsModule,
-
-    ApplicationFrameModule,
-
-    AngularFireModule.initializeApp(environment.firebase),
-    AngularFirestoreModule.enablePersistence({synchronizeTabs: true}),
-    AngularFireStorageModule,
-    AngularFireDatabaseModule,
-    AngularFireAuthModule,
-    AngularFireAuthGuardModule,
-    FontAwesomeModule,
-  ],
-  providers: [{provide: MAT_DATE_LOCALE, useValue: 'de-DE'}],
-  bootstrap: [AppComponent],
-})
-export class AppModule {
-}

src/app/modules/brand/brand.component.spec.ts

@@ -9,8 +9,8 @@ describe('BrandComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [BrandComponent],
+    imports: [BrandComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/modules/brand/brand.component.ts

@@ -1,10 +1,11 @@
 import {Component} from '@angular/core';
+import { LogoComponent } from '../../widget-modules/components/logo/logo.component';
 
 @Component({
-  selector: 'app-brand',
+    selector: 'app-brand',
-  templateUrl: './brand.component.html',
+    templateUrl: './brand.component.html',
-  styleUrls: ['./brand.component.less'],
+    styleUrls: ['./brand.component.less'],
-  standalone: false,
+    imports: [LogoComponent],
 })
 export class BrandComponent {
 }

src/app/modules/brand/brand.module.ts

@@ -2,7 +2,7 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {BrandComponent} from './brand.component';
 import {RouterModule, Routes} from '@angular/router';
-import {LogoModule} from '../../widget-modules/components/logo/logo.module';
+
 import {NewUserComponent} from './new-user/new-user.component';
 
 const routes: Routes = [
@@ -18,8 +18,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  declarations: [BrandComponent, NewUserComponent],
+    imports: [CommonModule, RouterModule.forChild(routes), BrandComponent, NewUserComponent],
-  imports: [CommonModule, RouterModule.forChild(routes), LogoModule],
 })
 export class BrandModule {
 }

src/app/modules/brand/new-user/new-user.component.spec.ts

@@ -9,8 +9,8 @@ describe('NewUserComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [NewUserComponent],
+    imports: [NewUserComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/modules/brand/new-user/new-user.component.ts

@@ -2,12 +2,18 @@ import {Component} from '@angular/core';
 import {UserService} from '../../../services/user/user.service';
 import {Observable} from 'rxjs';
 import {User} from '../../../services/user/user';
+import { BrandComponent } from '../brand.component';
+import { NgIf, AsyncPipe } from '@angular/common';
 
 @Component({
-  selector: 'app-new-user',
+    selector: 'app-new-user',
-  templateUrl: './new-user.component.html',
+    templateUrl: './new-user.component.html',
-  styleUrls: ['./new-user.component.less'],
+    styleUrls: ['./new-user.component.less'],
-  standalone: false,
+    imports: [
+        BrandComponent,
+        NgIf,
+        AsyncPipe,
+    ],
 })
 export class NewUserComponent {
   public user$: Observable<User | null> | null = null;

src/app/modules/guest/guest.component.spec.ts

@@ -9,8 +9,8 @@ describe('GuestComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [GuestComponent],
+    imports: [GuestComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/modules/guest/guest.component.ts

@@ -4,12 +4,22 @@ import {ActivatedRoute} from '@angular/router';
 import {map, switchMap} from 'rxjs/operators';
 import {Song} from '../songs/services/song';
 import {ConfigService} from '../../services/config.service';
+import { NgIf, NgFor, AsyncPipe, DatePipe } from '@angular/common';
+import { SongTextComponent } from '../../widget-modules/components/song-text/song-text.component';
+import { ShowTypePipe } from '../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @Component({
-  selector: 'app-guest',
+    selector: 'app-guest',
-  templateUrl: './guest.component.html',
+    templateUrl: './guest.component.html',
-  styleUrls: ['./guest.component.less'],
+    styleUrls: ['./guest.component.less'],
-  standalone: false,
+    imports: [
+        NgIf,
+        NgFor,
+        SongTextComponent,
+        AsyncPipe,
+        DatePipe,
+        ShowTypePipe,
+    ],
 })
 export class GuestComponent {
   public show$ = this.currentRoute.params.pipe(

src/app/modules/guest/guest.module.ts

@@ -6,18 +6,18 @@ import {SongTextComponent} from '../../widget-modules/components/song-text/song-
 import {ShowTypePipe} from '../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @NgModule({
-  declarations: [GuestComponent],
+    imports: [
-  imports: [
+        CommonModule,
-    CommonModule,
+        RouterModule.forChild([
-    RouterModule.forChild([
+            {
-      {
+                path: ':id',
-        path: ':id',
+                component: GuestComponent,
-        component: GuestComponent,
+            },
-      },
+        ]),
-    ]),
+        SongTextComponent,
-    SongTextComponent,
+        ShowTypePipe,
-    ShowTypePipe,
+        GuestComponent,
-  ],
+    ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class GuestModule {}

src/app/modules/presentation/monitor/legal/legal.component.spec.ts

@@ -9,8 +9,8 @@ describe('LegalComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [LegalComponent],
+    imports: [LegalComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/modules/presentation/monitor/legal/legal.component.ts

@@ -1,12 +1,13 @@
 import {Component, Input} from '@angular/core';
 import {Song} from '../../../songs/services/song';
 import {Config} from '../../../../services/config';
+import { NgIf } from '@angular/common';
 
 @Component({
-  selector: 'app-legal',
+    selector: 'app-legal',
-  templateUrl: './legal.component.html',
+    templateUrl: './legal.component.html',
-  styleUrls: ['./legal.component.less'],
+    styleUrls: ['./legal.component.less'],
-  standalone: false,
+    imports: [NgIf],
 })
 export class LegalComponent {
   @Input() public song: Song | null = null;

src/app/modules/presentation/monitor/logo/logo.component.spec.ts

@@ -9,8 +9,8 @@ describe('LogoComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [LogoComponent],
+    imports: [LogoComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/modules/presentation/monitor/logo/logo.component.ts

@@ -1,10 +1,9 @@
 import {Component} from '@angular/core';
 
 @Component({
-  selector: 'app-logo',
+    selector: 'app-logo',
-  templateUrl: './logo.component.html',
+    templateUrl: './logo.component.html',
-  styleUrls: ['./logo.component.less'],
+    styleUrls: ['./logo.component.less'],
-  standalone: false,
 })
 export class LogoComponent {
 }

src/app/modules/presentation/monitor/monitor.component.spec.ts

@@ -9,8 +9,8 @@ describe('MonitorComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [MonitorComponent],
+    imports: [MonitorComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/modules/presentation/monitor/monitor.component.ts

@@ -13,13 +13,26 @@ import {PresentationBackground, Show} from '../../shows/services/show';
 import {GlobalSettings} from '../../../services/global-settings';
 import {ShowSongService} from '../../shows/services/show-song.service';
 import {openFullscreen} from '../../../services/fullscreen';
+import { NgIf, AsyncPipe, DatePipe } from '@angular/common';
+import { LogoComponent } from './logo/logo.component';
+import { SongTextComponent } from '../../../widget-modules/components/song-text/song-text.component';
+import { LegalComponent } from './legal/legal.component';
+import { ShowTypePipe } from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @Component({
-  selector: 'app-monitor',
+    selector: 'app-monitor',
-  templateUrl: './monitor.component.html',
+    templateUrl: './monitor.component.html',
-  styleUrls: ['./monitor.component.less'],
+    styleUrls: ['./monitor.component.less'],
-  animations: [songSwitch],
+    animations: [songSwitch],
-  standalone: false,
+    imports: [
+        NgIf,
+        LogoComponent,
+        SongTextComponent,
+        LegalComponent,
+        AsyncPipe,
+        DatePipe,
+        ShowTypePipe,
+    ],
 })
 export class MonitorComponent implements OnInit {
   public song: Song | null = null;

src/app/modules/presentation/presentation.module.ts

@@ -4,7 +4,7 @@ import {CommonModule} from '@angular/common';
 import {PresentationRoutingModule} from './presentation-routing.module';
 import {MonitorComponent} from './monitor/monitor.component';
 import {RemoteComponent} from './remote/remote.component';
-import {CardModule} from '../../widget-modules/components/card/card.module';
+
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatSelectModule} from '@angular/material/select';
 import {LegalComponent} from './monitor/legal/legal.component';
@@ -15,19 +15,17 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {LogoComponent} from './monitor/logo/logo.component';
 import {SelectComponent} from './select/select.component';
 import {MatInputModule} from '@angular/material/input';
-import {UserNameModule} from '../../services/user/user-name/user-name.module';
+
 import {SongTextComponent} from '../../widget-modules/components/song-text/song-text.component';
 import {AddSongComponent} from '../../widget-modules/components/add-song/add-song.component';
 import {SectionTypePipe} from '../../widget-modules/pipes/section-type-translator/section-type.pipe';
 import {ShowTypePipe} from '../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @NgModule({
-  declarations: [MonitorComponent, RemoteComponent, LegalComponent, LogoComponent, SelectComponent],
+    exports: [RemoteComponent],
-  exports: [RemoteComponent],
+    imports: [
-  imports: [
     CommonModule,
     PresentationRoutingModule,
-    CardModule,
     MatFormFieldModule,
     MatSelectModule,
     ShowTypePipe,
@@ -40,7 +38,7 @@ import {ShowTypePipe} from '../../widget-modules/pipes/show-type-translater/show
     AddSongComponent,
     ReactiveFormsModule,
     MatInputModule,
-    UserNameModule,
+    MonitorComponent, RemoteComponent, LegalComponent, LogoComponent, SelectComponent,
-  ],
+],
 })
 export class PresentationModule {}

src/app/modules/presentation/remote/remote.component.spec.ts

@@ -9,8 +9,8 @@ describe('RemoteComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [RemoteComponent],
+    imports: [RemoteComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/modules/presentation/remote/remote.component.ts

@@ -13,6 +13,20 @@ import {TextRenderingService} from '../../songs/services/text-rendering.service'
 import {Section} from '../../songs/services/section';
 import {GlobalSettings} from '../../../services/global-settings';
 import {LineType} from '../../songs/services/line-type';
+import { NgIf, NgFor, AsyncPipe, DatePipe } from '@angular/common';
+import { CardComponent } from '../../../widget-modules/components/card/card.component';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { MatButton } from '@angular/material/button';
+import { RouterLink } from '@angular/router';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { MatSelect } from '@angular/material/select';
+import { MatOption } from '@angular/material/core';
+import { MatSlider, MatSliderThumb } from '@angular/material/slider';
+import { AddSongComponent } from '../../../widget-modules/components/add-song/add-song.component';
+import { ShowTypePipe } from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
+import { SectionTypePipe } from '../../../widget-modules/pipes/section-type-translator/section-type.pipe';
 
 export interface PresentationSong {
   id: string;
@@ -21,12 +35,33 @@ export interface PresentationSong {
 }
 
 @Component({
-  selector: 'app-remote',
+    selector: 'app-remote',
-  templateUrl: './remote.component.html',
+    templateUrl: './remote.component.html',
-  styleUrls: ['./remote.component.less'],
+    styleUrls: ['./remote.component.less'],
-  animations: [fade],
+    animations: [fade],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
+    imports: [
+        NgIf,
+        CardComponent,
+        NgFor,
+        MatFormField,
+        MatLabel,
+        MatInput,
+        ReactiveFormsModule,
+        FormsModule,
+        MatButton,
+        RouterLink,
+        FaIconComponent,
+        MatSelect,
+        MatOption,
+        MatSlider,
+        MatSliderThumb,
+        AddSongComponent,
+        AsyncPipe,
+        DatePipe,
+        ShowTypePipe,
+        SectionTypePipe,
+    ],
 })
 export class RemoteComponent {
   public show: Show | null = null;

src/app/modules/presentation/select/select.component.ts

@@ -5,13 +5,27 @@ import {Show} from '../../shows/services/show';
 import {GlobalSettingsService} from '../../../services/global-settings.service';
 import {Router} from '@angular/router';
 import {fade} from '../../../animations';
+import { NgIf, NgFor, AsyncPipe, DatePipe } from '@angular/common';
+import { CardComponent } from '../../../widget-modules/components/card/card.component';
+import { MatButton } from '@angular/material/button';
+import { UserNameComponent } from '../../../services/user/user-name/user-name.component';
+import { ShowTypePipe } from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @Component({
-  selector: 'app-select',
+    selector: 'app-select',
-  templateUrl: './select.component.html',
+    templateUrl: './select.component.html',
-  styleUrls: ['./select.component.less'],
+    styleUrls: ['./select.component.less'],
-  animations: [fade],
+    animations: [fade],
-  standalone: false,
+    imports: [
+        NgIf,
+        CardComponent,
+        NgFor,
+        MatButton,
+        UserNameComponent,
+        AsyncPipe,
+        DatePipe,
+        ShowTypePipe,
+    ],
 })
 export class SelectComponent implements OnInit {
   public visible = false;

src/app/modules/shows/dialog/archive-dialog/archive-dialog.component.spec.ts

@@ -8,8 +8,8 @@ describe('ArchiveDialogComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ArchiveDialogComponent],
+    imports: [ArchiveDialogComponent],
-    }).compileComponents();
+}).compileComponents();
 
     fixture = TestBed.createComponent(ArchiveDialogComponent);
     component = fixture.componentInstance;

src/app/modules/shows/dialog/archive-dialog/archive-dialog.component.ts

@@ -1,10 +1,19 @@
 import {Component} from '@angular/core';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { MatDialogContent, MatDialogActions, MatDialogClose } from '@angular/material/dialog';
+import { MatButton } from '@angular/material/button';
 
 @Component({
-  selector: 'app-archive-dialog',
+    selector: 'app-archive-dialog',
-  templateUrl: './archive-dialog.component.html',
+    templateUrl: './archive-dialog.component.html',
-  styleUrls: ['./archive-dialog.component.less'],
+    styleUrls: ['./archive-dialog.component.less'],
-  standalone: false,
+    imports: [
+        CdkScrollable,
+        MatDialogContent,
+        MatDialogActions,
+        MatButton,
+        MatDialogClose,
+    ],
 })
 export class ArchiveDialogComponent {
 }

src/app/modules/shows/edit/edit.component.ts

@@ -3,18 +3,45 @@ import {ShowDataService} from '../services/show-data.service';
 import {Observable, take} from 'rxjs';
 import {Show} from '../services/show';
 import {ShowService} from '../services/show.service';
-import {FormControl, FormGroup, Validators} from '@angular/forms';
+import { FormControl, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import {ActivatedRoute, Router} from '@angular/router';
 import {faSave} from '@fortawesome/free-solid-svg-icons';
 import {map, switchMap} from 'rxjs/operators';
 import firebase from 'firebase/compat/app';
+import { CardComponent } from '../../../widget-modules/components/card/card.component';
+import { MatFormField, MatLabel, MatSuffix } from '@angular/material/form-field';
+import { MatSelect } from '@angular/material/select';
+import { MatOptgroup, MatOption } from '@angular/material/core';
+import { NgFor } from '@angular/common';
+import { MatInput } from '@angular/material/input';
+import { MatDatepickerInput, MatDatepickerToggle, MatDatepicker } from '@angular/material/datepicker';
+import { ButtonRowComponent } from '../../../widget-modules/components/button-row/button-row.component';
+import { ButtonComponent } from '../../../widget-modules/components/button/button.component';
+import { ShowTypePipe } from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 import Timestamp = firebase.firestore.Timestamp;
 
 @Component({
-  selector: 'app-edit',
+    selector: 'app-edit',
-  templateUrl: './edit.component.html',
+    templateUrl: './edit.component.html',
-  styleUrls: ['./edit.component.less'],
+    styleUrls: ['./edit.component.less'],
-  standalone: false,
+    imports: [
+        CardComponent,
+        ReactiveFormsModule,
+        MatFormField,
+        MatLabel,
+        MatSelect,
+        MatOptgroup,
+        NgFor,
+        MatOption,
+        MatInput,
+        MatDatepickerInput,
+        MatDatepickerToggle,
+        MatSuffix,
+        MatDatepicker,
+        ButtonRowComponent,
+        ButtonComponent,
+        ShowTypePipe,
+    ],
 })
 export class EditComponent implements OnInit {
   public shows$: Observable<Show[]>;

src/app/modules/shows/list/filter/filter.component.spec.ts

@@ -8,8 +8,8 @@ describe('FilterComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [FilterComponent],
+    imports: [FilterComponent],
-    }).compileComponents();
+}).compileComponents();
   });
 
   beforeEach(() => {

src/app/modules/shows/list/filter/filter.component.ts

@@ -1,7 +1,7 @@
 import {Component, Input} from '@angular/core';
-import {KeyValue} from '@angular/common';
+import { KeyValue, NgFor } from '@angular/common';
 import {ActivatedRoute, Router} from '@angular/router';
-import {UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, ReactiveFormsModule } from '@angular/forms';
 import {FilterValues} from './filter-values';
 import {Show} from '../../services/show';
 import {ShowService} from '../../services/show.service';
@@ -10,12 +10,25 @@ import {combineLatest, Observable} from 'rxjs';
 import {dynamicSort, onlyUnique} from '../../../../services/filter.helper';
 import {UserService} from '../../../../services/user/user.service';
 import {isEqual} from 'lodash';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatSelect } from '@angular/material/select';
+import { MatOption, MatOptgroup } from '@angular/material/core';
+import { ShowTypePipe } from '../../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @Component({
-  selector: 'app-filter',
+    selector: 'app-filter',
-  templateUrl: './filter.component.html',
+    templateUrl: './filter.component.html',
-  styleUrls: ['./filter.component.less'],
+    styleUrls: ['./filter.component.less'],
-  standalone: false,
+    imports: [
+        ReactiveFormsModule,
+        MatFormField,
+        MatLabel,
+        MatSelect,
+        NgFor,
+        MatOption,
+        MatOptgroup,
+        ShowTypePipe,
+    ],
 })
 export class FilterComponent {
   @Input() public route = '/shows/';

src/app/modules/shows/list/list-item/list-item.component.spec.ts

@@ -9,8 +9,8 @@ describe('ListItemComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [ListItemComponent],
+    imports: [ListItemComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/modules/shows/list/list-item/list-item.component.ts

@@ -1,11 +1,19 @@
 import {Component, Input} from '@angular/core';
 import {Show} from '../../services/show';
+import { NgIf, DatePipe } from '@angular/common';
+import { UserNameComponent } from '../../../../services/user/user-name/user-name.component';
+import { ShowTypePipe } from '../../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @Component({
-  selector: 'app-list-item',
+    selector: 'app-list-item',
-  templateUrl: './list-item.component.html',
+    templateUrl: './list-item.component.html',
-  styleUrls: ['./list-item.component.less'],
+    styleUrls: ['./list-item.component.less'],
-  standalone: false,
+    imports: [
+        NgIf,
+        UserNameComponent,
+        DatePipe,
+        ShowTypePipe,
+    ],
 })
 export class ListItemComponent {
   @Input() public show: Show | null = null;

src/app/modules/shows/list/list.component.spec.ts

@@ -9,8 +9,8 @@ describe('ListComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [ListComponent],
+    imports: [ListComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/modules/shows/list/list.component.ts

@@ -4,15 +4,33 @@ import {Show} from '../services/show';
 import {fade} from '../../../animations';
 import {ShowService} from '../services/show.service';
 import {FilterValues} from './filter/filter-values';
-import {ActivatedRoute} from '@angular/router';
+import { ActivatedRoute, RouterLink } from '@angular/router';
 import {map} from 'rxjs/operators';
+import { RoleDirective } from '../../../services/user/role.directive';
+import { ListHeaderComponent } from '../../../widget-modules/components/list-header/list-header.component';
+import { NgIf, NgFor, AsyncPipe } from '@angular/common';
+import { FilterComponent } from './filter/filter.component';
+import { CardComponent } from '../../../widget-modules/components/card/card.component';
+import { ListItemComponent } from './list-item/list-item.component';
+import { SortByPipe } from '../../../widget-modules/pipes/sort-by/sort-by.pipe';
 
 @Component({
-  selector: 'app-list',
+    selector: 'app-list',
-  templateUrl: './list.component.html',
+    templateUrl: './list.component.html',
-  styleUrls: ['./list.component.less'],
+    styleUrls: ['./list.component.less'],
-  animations: [fade],
+    animations: [fade],
-  standalone: false,
+    imports: [
+        RoleDirective,
+        ListHeaderComponent,
+        NgIf,
+        FilterComponent,
+        CardComponent,
+        NgFor,
+        ListItemComponent,
+        RouterLink,
+        AsyncPipe,
+        SortByPipe,
+    ],
 })
 export class ListComponent {
   public shows$ = this.showService.list$();

src/app/modules/shows/new/new.component.spec.ts

@@ -9,8 +9,8 @@ describe('NewComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [NewComponent],
+    imports: [NewComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/modules/shows/new/new.component.ts

@@ -3,15 +3,42 @@ import {ShowDataService} from '../services/show-data.service';
 import {Observable} from 'rxjs';
 import {Show} from '../services/show';
 import {ShowService} from '../services/show.service';
-import {UntypedFormControl, UntypedFormGroup, Validators} from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import {Router} from '@angular/router';
 import {faSave} from '@fortawesome/free-solid-svg-icons';
+import { CardComponent } from '../../../widget-modules/components/card/card.component';
+import { MatFormField, MatLabel, MatSuffix } from '@angular/material/form-field';
+import { MatSelect } from '@angular/material/select';
+import { MatOptgroup, MatOption } from '@angular/material/core';
+import { NgFor } from '@angular/common';
+import { MatInput } from '@angular/material/input';
+import { MatDatepickerInput, MatDatepickerToggle, MatDatepicker } from '@angular/material/datepicker';
+import { ButtonRowComponent } from '../../../widget-modules/components/button-row/button-row.component';
+import { ButtonComponent } from '../../../widget-modules/components/button/button.component';
+import { ShowTypePipe } from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @Component({
-  selector: 'app-new',
+    selector: 'app-new',
-  templateUrl: './new.component.html',
+    templateUrl: './new.component.html',
-  styleUrls: ['./new.component.less'],
+    styleUrls: ['./new.component.less'],
-  standalone: false,
+    imports: [
+        CardComponent,
+        ReactiveFormsModule,
+        MatFormField,
+        MatLabel,
+        MatSelect,
+        MatOptgroup,
+        NgFor,
+        MatOption,
+        MatInput,
+        MatDatepickerInput,
+        MatDatepickerToggle,
+        MatSuffix,
+        MatDatepicker,
+        ButtonRowComponent,
+        ButtonComponent,
+        ShowTypePipe,
+    ],
 })
 export class NewComponent implements OnInit {
   public shows$: Observable<Show[]>;

src/app/modules/shows/show/show.component.spec.ts

@@ -9,8 +9,8 @@ describe('ShowComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [ShowComponent],
+    imports: [ShowComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/modules/shows/show/show.component.ts

@@ -25,20 +25,60 @@ import {
   faUser,
   faUsers,
 } from '@fortawesome/free-solid-svg-icons';
-import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
+import { CdkDragDrop, moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
 import {fade} from '../../../animations';
 import {MatDialog} from '@angular/material/dialog';
 import {ArchiveDialogComponent} from '../dialog/archive-dialog/archive-dialog.component';
 import {closeFullscreen, openFullscreen} from '../../../services/fullscreen';
 import {GuestShowService} from '../../guest/guest-show.service';
 import {ShareDialogComponent} from '../dialog/share-dialog/share-dialog.component';
+import { NgIf, NgFor, AsyncPipe, DatePipe } from '@angular/common';
+import { CardComponent } from '../../../widget-modules/components/card/card.component';
+import { UserNameComponent } from '../../../services/user/user-name/user-name.component';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { MenuButtonComponent } from '../../../widget-modules/components/menu-button/menu-button.component';
+import { MatTooltip } from '@angular/material/tooltip';
+import { SongComponent } from './song/song.component';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { AddSongComponent } from '../../../widget-modules/components/add-song/add-song.component';
+import { ButtonRowComponent } from '../../../widget-modules/components/button-row/button-row.component';
+import { RoleDirective } from '../../../services/user/role.directive';
+import { OwnerDirective } from '../../../services/user/owner.directive';
+import { ButtonComponent } from '../../../widget-modules/components/button/button.component';
+import { MatMenuTrigger, MatMenu } from '@angular/material/menu';
+import { ShowTypePipe } from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @Component({
-  selector: 'app-show',
+    selector: 'app-show',
-  templateUrl: './show.component.html',
+    templateUrl: './show.component.html',
-  styleUrls: ['./show.component.less'],
+    styleUrls: ['./show.component.less'],
-  animations: [fade],
+    animations: [fade],
-  standalone: false,
+    imports: [
+        NgIf,
+        CardComponent,
+        UserNameComponent,
+        MatCheckbox,
+        ReactiveFormsModule,
+        FormsModule,
+        MenuButtonComponent,
+        MatTooltip,
+        CdkDropList,
+        NgFor,
+        CdkDrag,
+        SongComponent,
+        FaIconComponent,
+        AddSongComponent,
+        ButtonRowComponent,
+        RoleDirective,
+        OwnerDirective,
+        ButtonComponent,
+        MatMenuTrigger,
+        MatMenu,
+        AsyncPipe,
+        DatePipe,
+        ShowTypePipe,
+    ],
 })
 export class ShowComponent implements OnInit, OnDestroy {
   public show$: Observable<Show | null> | null = null;

src/app/modules/shows/show/song/song.component.spec.ts

@@ -9,8 +9,8 @@ describe('SongComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [SongComponent],
+    imports: [SongComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/modules/shows/show/song/song.component.ts

@@ -2,19 +2,43 @@ import {Component, Input, OnInit, ViewChild} from '@angular/core';
 import {ShowSongService} from '../../services/show-song.service';
 import {ShowSong} from '../../services/show-song';
 import {getScale} from '../../../songs/services/key.helper';
-import {UntypedFormControl} from '@angular/forms';
+import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
-import {ChordMode} from '../../../../widget-modules/components/song-text/song-text.component';
+import { ChordMode, SongTextComponent } from '../../../../widget-modules/components/song-text/song-text.component';
 import {Show} from '../../services/show';
 import {faEraser, faPenToSquare, faSave, faTrash} from '@fortawesome/free-solid-svg-icons';
 import {fade} from '../../../../animations';
 import {MatSelect} from '@angular/material/select';
+import { NgIf, NgFor } from '@angular/common';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatOption } from '@angular/material/core';
+import { MenuButtonComponent } from '../../../../widget-modules/components/menu-button/menu-button.component';
+import { MatTooltip } from '@angular/material/tooltip';
+import { MatInput } from '@angular/material/input';
+import { CdkTextareaAutosize } from '@angular/cdk/text-field';
+import { ButtonRowComponent } from '../../../../widget-modules/components/button-row/button-row.component';
+import { ButtonComponent } from '../../../../widget-modules/components/button/button.component';
 
 @Component({
-  selector: 'app-song',
+    selector: 'app-song',
-  templateUrl: './song.component.html',
+    templateUrl: './song.component.html',
-  styleUrls: ['./song.component.less'],
+    styleUrls: ['./song.component.less'],
-  animations: [fade],
+    animations: [fade],
-  standalone: false,
+    imports: [
+        NgIf,
+        MatFormField,
+        MatSelect,
+        ReactiveFormsModule,
+        NgFor,
+        MatOption,
+        MenuButtonComponent,
+        MatTooltip,
+        MatLabel,
+        MatInput,
+        CdkTextareaAutosize,
+        ButtonRowComponent,
+        ButtonComponent,
+        SongTextComponent,
+    ],
 })
 export class SongComponent implements OnInit {
   @Input() public show: Show | null = null;

src/app/modules/shows/shows.module.ts

@@ -3,15 +3,15 @@ import {CommonModule} from '@angular/common';
 
 import {ShowsRoutingModule} from './shows-routing.module';
 import {NewComponent} from './new/new.component';
-import {CardModule} from '../../widget-modules/components/card/card.module';
+
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatInputModule} from '@angular/material/input';
 import {ListComponent} from './list/list.component';
 import {ListItemComponent} from './list/list-item/list-item.component';
-import {ListHeaderModule} from '../../widget-modules/components/list-header/list-header.module';
+
 import {MatCheckboxModule} from '@angular/material/checkbox';
-import {ButtonRowModule} from '../../widget-modules/components/button-row/button-row.module';
+
 import {MatButtonModule} from '@angular/material/button';
 import {MatDatepickerModule} from '@angular/material/datepicker';
 import {MatSelectModule} from '@angular/material/select';
@@ -19,14 +19,14 @@ import {MatNativeDateModule} from '@angular/material/core';
 import {ShowComponent} from './show/show.component';
 import {SongComponent} from './show/song/song.component';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
-import {MenuButtonModule} from '../../widget-modules/components/menu-button/menu-button.module';
+
 import {NgxMatSelectSearchModule} from 'ngx-mat-select-search';
-import {ButtonModule} from '../../widget-modules/components/button/button.module';
+
-import {OwnerModule} from '../../services/user/owner.module';
+
-import {UserNameModule} from '../../services/user/user-name/user-name.module';
+
 import {MatMenuModule} from '@angular/material/menu';
 import {DragDropModule} from '@angular/cdk/drag-drop';
-import {RoleModule} from '../../services/user/role.module';
+
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {FilterComponent} from './list/filter/filter.component';
 import {EditComponent} from './edit/edit.component';
@@ -38,38 +38,30 @@ import {ShowTypePipe} from '../../widget-modules/pipes/show-type-translater/show
 import {SortByPipe} from '../../widget-modules/pipes/sort-by/sort-by.pipe';
 
 @NgModule({
-  declarations: [NewComponent, ListComponent, ListItemComponent, ShowComponent, SongComponent, FilterComponent, EditComponent, ArchiveDialogComponent],
+    imports: [
-  imports: [
     CommonModule,
     ShowsRoutingModule,
-    CardModule,
     MatFormFieldModule,
     ReactiveFormsModule,
     MatInputModule,
-    ListHeaderModule,
     MatCheckboxModule,
-    ButtonRowModule,
     MatButtonModule,
     MatDatepickerModule,
     MatNativeDateModule,
     MatSelectModule,
     ShowTypePipe,
     FontAwesomeModule,
-    MenuButtonModule,
     FormsModule,
     SongTextComponent,
     NgxMatSelectSearchModule,
     AddSongComponent,
-    ButtonModule,
-    OwnerModule,
-    UserNameModule,
     MatMenuModule,
     DragDropModule,
-    RoleModule,
     SortByPipe,
     MatTooltipModule,
     MatDialogModule,
-  ],
+    NewComponent, ListComponent, ListItemComponent, ShowComponent, SongComponent, FilterComponent, EditComponent, ArchiveDialogComponent,
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class ShowsModule {}

src/app/modules/songs/song-list/filter/filter.component.spec.ts

@@ -9,8 +9,8 @@ describe('FilterComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [FilterComponent],
+    imports: [FilterComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/modules/songs/song-list/filter/filter.component.ts

@@ -1,16 +1,35 @@
 import {Component, Input} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
-import {UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, ReactiveFormsModule } from '@angular/forms';
 import {SongService} from '../../services/song.service';
 import {FilterValues} from './filter-values';
 import {Song} from '../../services/song';
 import {KEYS} from '../../services/key.helper';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { MatSelect } from '@angular/material/select';
+import { MatOption } from '@angular/material/core';
+import { NgFor } from '@angular/common';
+import { LegalTypePipe } from '../../../../widget-modules/pipes/legal-type-translator/legal-type.pipe';
+import { KeyPipe } from '../../../../widget-modules/pipes/key-translator/key.pipe';
+import { SongTypePipe } from '../../../../widget-modules/pipes/song-type-translater/song-type.pipe';
 
 @Component({
-  selector: 'app-filter',
+    selector: 'app-filter',
-  templateUrl: './filter.component.html',
+    templateUrl: './filter.component.html',
-  styleUrls: ['./filter.component.less'],
+    styleUrls: ['./filter.component.less'],
-  standalone: false,
+    imports: [
+        ReactiveFormsModule,
+        MatFormField,
+        MatLabel,
+        MatInput,
+        MatSelect,
+        MatOption,
+        NgFor,
+        LegalTypePipe,
+        KeyPipe,
+        SongTypePipe,
+    ],
 })
 export class FilterComponent {
   public filterFormGroup: UntypedFormGroup;

src/app/modules/songs/song-list/song-list.component.spec.ts

@@ -18,10 +18,10 @@ describe('SongListComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [SongListComponent],
+    imports: [SongListComponent],
-        providers: [{provide: SongService, useValue: mockSongService}],
+    providers: [{ provide: SongService, useValue: mockSongService }],
-        schemas: [NO_ERRORS_SCHEMA],
+    schemas: [NO_ERRORS_SCHEMA],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/modules/songs/song-list/song-list.component.ts

@@ -4,19 +4,35 @@ import {Song} from '../services/song';
 import {map} from 'rxjs/operators';
 import {combineLatest, Observable} from 'rxjs';
 import {fade} from '../../../animations';
-import {ActivatedRoute} from '@angular/router';
+import { ActivatedRoute, RouterLink } from '@angular/router';
 import {filterSong} from '../../../services/filter.helper';
 import {FilterValues} from './filter/filter-values';
 import {ScrollService} from '../../../services/scroll.service';
 import {faBalanceScaleRight, faCheck, faPencilRuler} from '@fortawesome/free-solid-svg-icons';
+import { NgIf, NgFor, AsyncPipe } from '@angular/common';
+import { ListHeaderComponent } from '../../../widget-modules/components/list-header/list-header.component';
+import { FilterComponent } from './filter/filter.component';
+import { CardComponent } from '../../../widget-modules/components/card/card.component';
+import { RoleDirective } from '../../../services/user/role.directive';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 
 @Component({
-  selector: 'app-songs',
+    selector: 'app-songs',
-  templateUrl: './song-list.component.html',
+    templateUrl: './song-list.component.html',
-  styleUrls: ['./song-list.component.less'],
+    styleUrls: ['./song-list.component.less'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: [fade],
+    animations: [fade],
-  standalone: false,
+    imports: [
+        NgIf,
+        ListHeaderComponent,
+        FilterComponent,
+        CardComponent,
+        NgFor,
+        RouterLink,
+        RoleDirective,
+        FaIconComponent,
+        AsyncPipe,
+    ],
 })
 export class SongListComponent implements OnInit, OnDestroy {
   public anyFilterActive = false;

src/app/modules/songs/song-list/song-list.module.ts

@@ -1,40 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {SongListComponent} from './song-list.component';
-import {CardModule} from '../../../widget-modules/components/card/card.module';
-import {RouterModule} from '@angular/router';
-import {ListHeaderModule} from '../../../widget-modules/components/list-header/list-header.module';
-import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatInputModule} from '@angular/material/input';
-import {FilterComponent} from './filter/filter.component';
-import {ReactiveFormsModule} from '@angular/forms';
-import {MatSelectModule} from '@angular/material/select';
-import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
-import {MatTooltipModule} from '@angular/material/tooltip';
-import {RoleModule} from '../../../services/user/role.module';
-import {KeyPipe} from '../../../widget-modules/pipes/key-translator/key.pipe';
-import {LegalTypePipe} from '../../../widget-modules/pipes/legal-type-translator/legal-type.pipe';
-import {SongTypePipe} from '../../../widget-modules/pipes/song-type-translater/song-type.pipe';
-
-@NgModule({
-  declarations: [SongListComponent, FilterComponent],
-  exports: [SongListComponent],
-  imports: [
-    CommonModule,
-    RouterModule,
-
-    CardModule,
-    LegalTypePipe,
-    ListHeaderModule,
-    MatFormFieldModule,
-    MatInputModule,
-    ReactiveFormsModule,
-    MatSelectModule,
-    FontAwesomeModule,
-    MatTooltipModule,
-    RoleModule,
-    KeyPipe,
-    SongTypePipe,
-  ],
-})
-export class SongListModule {}

src/app/modules/songs/song/edit/edit-file/edit-file.component.spec.ts

@@ -9,8 +9,8 @@ describe('EditFileComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [EditFileComponent],
+    imports: [EditFileComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/modules/songs/song/edit/edit-file/edit-file.component.ts

@@ -6,12 +6,26 @@ import {map, switchMap} from 'rxjs/operators';
 import {FileDataService} from '../../../services/file-data.service';
 import {Observable} from 'rxjs';
 import {File} from '../../../services/file';
+import { CardComponent } from '../../../../../widget-modules/components/card/card.component';
+import { NgIf, NgStyle, NgFor, AsyncPipe } from '@angular/common';
+import { MatIconButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { FileComponent } from './file/file.component';
 
 @Component({
-  selector: 'app-edit-file',
+    selector: 'app-edit-file',
-  templateUrl: './edit-file.component.html',
+    templateUrl: './edit-file.component.html',
-  styleUrls: ['./edit-file.component.less'],
+    styleUrls: ['./edit-file.component.less'],
-  standalone: false,
+    imports: [
+        CardComponent,
+        NgIf,
+        NgStyle,
+        MatIconButton,
+        MatIcon,
+        NgFor,
+        FileComponent,
+        AsyncPipe,
+    ],
 })
 export class EditFileComponent {
   public selectedFiles: FileList | null = null;

src/app/modules/songs/song/edit/edit-file/file/file.component.spec.ts

@@ -9,8 +9,8 @@ describe('FileComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [FileComponent],
+    imports: [FileComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/modules/songs/song/edit/edit-file/file/file.component.ts

@@ -3,12 +3,19 @@ import {Observable} from 'rxjs';
 import {File} from '../../../../services/file';
 import {faTrashAlt} from '@fortawesome/free-solid-svg-icons';
 import {FileService} from '../../../../services/file.service';
+import { MatIconButton } from '@angular/material/button';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { AsyncPipe } from '@angular/common';
 
 @Component({
-  selector: 'app-file',
+    selector: 'app-file',
-  templateUrl: './file.component.html',
+    templateUrl: './file.component.html',
-  styleUrls: ['./file.component.less'],
+    styleUrls: ['./file.component.less'],
-  standalone: false,
+    imports: [
+        MatIconButton,
+        FaIconComponent,
+        AsyncPipe,
+    ],
 })
 export class FileComponent {
   public url$: Observable<string> | null = null;

src/app/modules/songs/song/edit/edit-song/edit-song.component.spec.ts

@@ -9,8 +9,8 @@ describe('EditSongComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [EditSongComponent],
+    imports: [EditSongComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/modules/songs/song/edit/edit-song/edit-song.component.ts

@@ -1,22 +1,64 @@
 import {Component, OnInit} from '@angular/core';
 import {Song} from '../../../services/song';
-import {UntypedFormGroup} from '@angular/forms';
+import { UntypedFormGroup, ReactiveFormsModule } from '@angular/forms';
 import {ActivatedRoute, Router, RouterStateSnapshot} from '@angular/router';
 import {SongService} from '../../../services/song.service';
 import {EditService} from '../edit.service';
 import {first, map, switchMap} from 'rxjs/operators';
 import {KEYS} from '../../../services/key.helper';
 import {COMMA, ENTER} from '@angular/cdk/keycodes';
-import {MatChipInputEvent} from '@angular/material/chips';
+import { MatChipInputEvent, MatChipGrid, MatChipRow, MatChipInput } from '@angular/material/chips';
 import {faExternalLinkAlt, faSave, faTimesCircle} from '@fortawesome/free-solid-svg-icons';
 import {MatDialog} from '@angular/material/dialog';
 import {SaveDialogComponent} from './save-dialog/save-dialog.component';
+import { NgIf, NgFor } from '@angular/common';
+import { CardComponent } from '../../../../../widget-modules/components/card/card.component';
+import { MatFormField, MatLabel, MatSuffix } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { MatSelect } from '@angular/material/select';
+import { MatOption } from '@angular/material/core';
+import { CdkTextareaAutosize } from '@angular/cdk/text-field';
+import { SongTextComponent } from '../../../../../widget-modules/components/song-text/song-text.component';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { MatTooltip } from '@angular/material/tooltip';
+import { ButtonRowComponent } from '../../../../../widget-modules/components/button-row/button-row.component';
+import { ButtonComponent } from '../../../../../widget-modules/components/button/button.component';
+import { SongTypePipe } from '../../../../../widget-modules/pipes/song-type-translater/song-type.pipe';
+import { LegalOwnerPipe } from '../../../../../widget-modules/pipes/legal-owner-translator/legal-owner.pipe';
+import { LegalTypePipe } from '../../../../../widget-modules/pipes/legal-type-translator/legal-type.pipe';
+import { KeyPipe } from '../../../../../widget-modules/pipes/key-translator/key.pipe';
+import { StatusPipe } from '../../../../../widget-modules/pipes/status-translater/status.pipe';
 
 @Component({
-  selector: 'app-edit-song',
+    selector: 'app-edit-song',
-  templateUrl: './edit-song.component.html',
+    templateUrl: './edit-song.component.html',
-  styleUrls: ['./edit-song.component.less'],
+    styleUrls: ['./edit-song.component.less'],
-  standalone: false,
+    imports: [
+        NgIf,
+        CardComponent,
+        ReactiveFormsModule,
+        MatFormField,
+        MatLabel,
+        MatInput,
+        MatSelect,
+        NgFor,
+        MatOption,
+        CdkTextareaAutosize,
+        SongTextComponent,
+        MatChipGrid,
+        MatChipRow,
+        FaIconComponent,
+        MatChipInput,
+        MatSuffix,
+        MatTooltip,
+        ButtonRowComponent,
+        ButtonComponent,
+        SongTypePipe,
+        LegalOwnerPipe,
+        LegalTypePipe,
+        KeyPipe,
+        StatusPipe,
+    ],
 })
 export class EditSongComponent implements OnInit {
   public song: Song | null = null;

src/app/modules/songs/song/edit/edit-song/save-dialog/save-dialog.component.spec.ts

@@ -9,8 +9,8 @@ describe('SaveDialogComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [SaveDialogComponent],
+    declarations: [SaveDialogComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/modules/songs/song/edit/edit.component.spec.ts

@@ -9,8 +9,8 @@ describe('EditComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [EditComponent],
+    imports: [EditComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/modules/songs/song/edit/edit.component.ts

@@ -1,11 +1,17 @@
 import {Component, ViewChild} from '@angular/core';
 import {EditSongComponent} from './edit-song/edit-song.component';
+import { EditFileComponent } from './edit-file/edit-file.component';
+import { HistoryComponent } from './history/history.component';
 
 @Component({
-  selector: 'app-edit',
+    selector: 'app-edit',
-  templateUrl: './edit.component.html',
+    templateUrl: './edit.component.html',
-  styleUrls: ['./edit.component.less'],
+    styleUrls: ['./edit.component.less'],
-  standalone: false,
+    imports: [
+        EditSongComponent,
+        EditFileComponent,
+        HistoryComponent,
+    ],
 })
 export class EditComponent {
   @ViewChild(EditSongComponent) public editSongComponent: EditSongComponent | null = null;

src/app/modules/songs/song/edit/edit.module.ts

@@ -1,13 +1,13 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {EditComponent} from './edit.component';
-import {CardModule} from '../../../../widget-modules/components/card/card.module';
+
 import {ReactiveFormsModule} from '@angular/forms';
 import {MatInputModule} from '@angular/material/input';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatSelectModule} from '@angular/material/select';
 import {MatButtonModule} from '@angular/material/button';
-import {ButtonRowModule} from '../../../../widget-modules/components/button-row/button-row.module';
+
 import {RouterModule} from '@angular/router';
 import {EditSongComponent} from './edit-song/edit-song.component';
 import {EditFileComponent} from './edit-file/edit-file.component';
@@ -15,7 +15,7 @@ import {MatIconModule} from '@angular/material/icon';
 import {FileComponent} from './edit-file/file/file.component';
 import {MatChipsModule} from '@angular/material/chips';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
-import {ButtonModule} from '../../../../widget-modules/components/button/button.module';
+
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {SaveDialogComponent} from './edit-song/save-dialog/save-dialog.component';
 import {MatDialogModule} from '@angular/material/dialog';
@@ -28,22 +28,18 @@ import {SongTypePipe} from '../../../../widget-modules/pipes/song-type-translate
 import {StatusPipe} from '../../../../widget-modules/pipes/status-translater/status.pipe';
 
 @NgModule({
-  declarations: [EditComponent, EditSongComponent, EditFileComponent, FileComponent, SaveDialogComponent, HistoryComponent],
+    declarations: [SaveDialogComponent],
-  exports: [EditComponent],
+    exports: [EditComponent],
-  bootstrap: [SaveDialogComponent],
+    bootstrap: [SaveDialogComponent],
-  imports: [
+    imports: [
     CommonModule,
-    CardModule,
     SongTypePipe,
     ReactiveFormsModule,
     RouterModule,
-
     MatInputModule,
     MatButtonModule,
     MatCheckboxModule,
     MatSelectModule,
-    ButtonRowModule,
-
     MatIconModule,
     LegalOwnerPipe,
     LegalTypePipe,
@@ -51,10 +47,10 @@ import {StatusPipe} from '../../../../widget-modules/pipes/status-translater/sta
     MatChipsModule,
     FontAwesomeModule,
     StatusPipe,
-    ButtonModule,
     MatTooltipModule,
     MatDialogModule,
     SongTextComponent,
-  ],
+    EditComponent, EditSongComponent, EditFileComponent, FileComponent, HistoryComponent,
+],
 })
 export class EditModule {}

src/app/modules/songs/song/edit/history/history.component.spec.ts

@@ -9,8 +9,8 @@ describe('HistoryComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [HistoryComponent],
+    imports: [HistoryComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/modules/songs/song/edit/history/history.component.ts

@@ -3,12 +3,19 @@ import {first, map, switchMap} from 'rxjs/operators';
 import {ActivatedRoute} from '@angular/router';
 import {SongService} from '../../../services/song.service';
 import {Song} from '../../../services/song';
+import { NgIf, NgFor, DatePipe } from '@angular/common';
+import { CardComponent } from '../../../../../widget-modules/components/card/card.component';
 
 @Component({
-  selector: 'app-history',
+    selector: 'app-history',
-  templateUrl: './history.component.html',
+    templateUrl: './history.component.html',
-  styleUrls: ['./history.component.less'],
+    styleUrls: ['./history.component.less'],
-  standalone: false,
+    imports: [
+        NgIf,
+        CardComponent,
+        NgFor,
+        DatePipe,
+    ],
 })
 export class HistoryComponent implements OnInit {
   public song: Song | null = null;

src/app/modules/songs/song/file/file.component.spec.ts

@@ -9,8 +9,8 @@ describe('FileComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [FileComponent],
+    imports: [FileComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/modules/songs/song/file/file.component.ts

@@ -2,12 +2,13 @@ import {Component, Input} from '@angular/core';
 import {File} from '../../services/file';
 import {AngularFireStorage} from '@angular/fire/compat/storage';
 import {Observable} from 'rxjs';
+import { AsyncPipe } from '@angular/common';
 
 @Component({
-  selector: 'app-file',
+    selector: 'app-file',
-  templateUrl: './file.component.html',
+    templateUrl: './file.component.html',
-  styleUrls: ['./file.component.less'],
+    styleUrls: ['./file.component.less'],
-  standalone: false,
+    imports: [AsyncPipe],
 })
 export class FileComponent {
   public url$: Observable<string> | null = null;

src/app/modules/songs/song/new/new.component.spec.ts

@@ -9,8 +9,8 @@ describe('NewComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [NewComponent],
+    imports: [NewComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/modules/songs/song/new/new.component.ts

@@ -1,16 +1,29 @@
 import {Component, OnDestroy, OnInit} from '@angular/core';
 import {faSave} from '@fortawesome/free-solid-svg-icons';
-import {UntypedFormControl, UntypedFormGroup, Validators} from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import {SongService} from '../../services/song.service';
 import {Song} from '../../services/song';
 import {Router} from '@angular/router';
 import {Subscription} from 'rxjs';
+import { CardComponent } from '../../../../widget-modules/components/card/card.component';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { ButtonRowComponent } from '../../../../widget-modules/components/button-row/button-row.component';
+import { ButtonComponent } from '../../../../widget-modules/components/button/button.component';
 
 @Component({
-  selector: 'app-new',
+    selector: 'app-new',
-  templateUrl: './new.component.html',
+    templateUrl: './new.component.html',
-  styleUrls: ['./new.component.less'],
+    styleUrls: ['./new.component.less'],
-  standalone: false,
+    imports: [
+        CardComponent,
+        ReactiveFormsModule,
+        MatFormField,
+        MatLabel,
+        MatInput,
+        ButtonRowComponent,
+        ButtonComponent,
+    ],
 })
 export class NewComponent implements OnInit, OnDestroy {
   public faSave = faSave;

src/app/modules/songs/song/new/new.module.ts

@@ -1,17 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {NewComponent} from './new.component';
-import {CardModule} from '../../../../widget-modules/components/card/card.module';
-import {ReactiveFormsModule} from '@angular/forms';
-import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatInputModule} from '@angular/material/input';
-import {ButtonRowModule} from '../../../../widget-modules/components/button-row/button-row.module';
-import {ButtonModule} from '../../../../widget-modules/components/button/button.module';
-import {AutofocusModule} from '../../../../widget-modules/directives/autofocus/autofocus.module';
-
-@NgModule({
-  declarations: [NewComponent],
-  imports: [CommonModule, CardModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, ButtonRowModule, ButtonModule, AutofocusModule],
-})
-export class NewModule {
-}

src/app/modules/songs/song/song.component.spec.ts

@@ -15,9 +15,9 @@ describe('SongComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [SongComponent],
+    imports: [SongComponent],
-        providers: [{provide: ActivatedRoute, useValue: mockActivatedRoute}],
+    providers: [{ provide: ActivatedRoute, useValue: mockActivatedRoute }],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/modules/songs/song/song.component.ts

@@ -1,5 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import {ActivatedRoute, Router} from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import {SongService} from '../services/song.service';
 import {distinctUntilChanged, map, switchMap} from 'rxjs/operators';
 import {Song} from '../services/song';
@@ -12,12 +12,45 @@ import {faEdit, faFileCirclePlus, faTrash} from '@fortawesome/free-solid-svg-ico
 import {ShowService} from '../../shows/services/show.service';
 import {Show} from '../../shows/services/show';
 import {ShowSongService} from '../../shows/services/show-song.service';
+import { NgIf, NgFor, AsyncPipe, DatePipe } from '@angular/common';
+import { CardComponent } from '../../../widget-modules/components/card/card.component';
+import { RoleDirective } from '../../../services/user/role.directive';
+import { SongTextComponent } from '../../../widget-modules/components/song-text/song-text.component';
+import { MatChipListbox, MatChipOption } from '@angular/material/chips';
+import { ButtonRowComponent } from '../../../widget-modules/components/button-row/button-row.component';
+import { ButtonComponent } from '../../../widget-modules/components/button/button.component';
+import { MatMenuTrigger, MatMenu } from '@angular/material/menu';
+import { FileComponent } from './file/file.component';
+import { SongTypePipe } from '../../../widget-modules/pipes/song-type-translater/song-type.pipe';
+import { LegalOwnerPipe } from '../../../widget-modules/pipes/legal-owner-translator/legal-owner.pipe';
+import { StatusPipe } from '../../../widget-modules/pipes/status-translater/status.pipe';
+import { ShowTypePipe } from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 
 @Component({
-  selector: 'app-song',
+    selector: 'app-song',
-  templateUrl: './song.component.html',
+    templateUrl: './song.component.html',
-  styleUrls: ['./song.component.less'],
+    styleUrls: ['./song.component.less'],
-  standalone: false,
+    imports: [
+        NgIf,
+        CardComponent,
+        RoleDirective,
+        SongTextComponent,
+        MatChipListbox,
+        NgFor,
+        MatChipOption,
+        ButtonRowComponent,
+        ButtonComponent,
+        RouterLink,
+        MatMenuTrigger,
+        MatMenu,
+        FileComponent,
+        AsyncPipe,
+        DatePipe,
+        SongTypePipe,
+        LegalOwnerPipe,
+        StatusPipe,
+        ShowTypePipe,
+    ],
 })
 export class SongComponent implements OnInit {
   public song$: Observable<Song | null> | null = null;

src/app/modules/songs/song/song.module.ts

@@ -1,40 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {SongComponent} from './song.component';
-import {CardModule} from '../../../widget-modules/components/card/card.module';
-import {MatButtonModule} from '@angular/material/button';
-import {ButtonRowModule} from '../../../widget-modules/components/button-row/button-row.module';
-import {RouterModule} from '@angular/router';
-import {MatChipsModule} from '@angular/material/chips';
-import {RoleModule} from '../../../services/user/role.module';
-import {ButtonModule} from '../../../widget-modules/components/button/button.module';
-import {FileComponent} from './file/file.component';
-import {MatMenuModule} from '@angular/material/menu';
-import {SongTextComponent} from '../../../widget-modules/components/song-text/song-text.component';
-import {LegalOwnerPipe} from '../../../widget-modules/pipes/legal-owner-translator/legal-owner.pipe';
-import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
-import {SongTypePipe} from '../../../widget-modules/pipes/song-type-translater/song-type.pipe';
-import {StatusPipe} from '../../../widget-modules/pipes/status-translater/status.pipe';
-
-@NgModule({
-  declarations: [SongComponent, FileComponent],
-  exports: [SongComponent],
-  imports: [
-    CommonModule,
-    CardModule,
-    RouterModule,
-
-    SongTypePipe,
-    MatButtonModule,
-    ButtonRowModule,
-    LegalOwnerPipe,
-    SongTextComponent,
-    MatChipsModule,
-    RoleModule,
-    StatusPipe,
-    ButtonModule,
-    MatMenuModule,
-    ShowTypePipe,
-  ],
-})
-export class SongModule {}

src/app/modules/songs/songs.module.ts

@@ -2,14 +2,14 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 
 import {SongsRoutingModule} from './songs-routing.module';
-import {SongListModule} from './song-list/song-list.module';
+
-import {SongModule} from './song/song.module';
+
 import {EditModule} from './song/edit/edit.module';
-import {NewModule} from './song/new/new.module';
+
 
 @NgModule({
   declarations: [],
-  imports: [CommonModule, SongsRoutingModule, SongListModule, SongModule, EditModule, NewModule],
+  imports: [CommonModule, SongsRoutingModule, EditModule],
 })
 export class SongsModule {
 }

src/app/modules/user/info/info.component.spec.ts

@@ -9,8 +9,8 @@ describe('InfoComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [InfoComponent],
+    imports: [InfoComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/modules/user/info/info.component.ts

@@ -6,12 +6,39 @@ import {ChordMode} from '../../../widget-modules/components/song-text/song-text.
 import {faSignOutAlt} from '@fortawesome/free-solid-svg-icons';
 import {RolePipe} from './role.pipe';
 import {roles} from '../../../services/user/roles';
+import { NgIf, AsyncPipe } from '@angular/common';
+import { CardComponent } from '../../../widget-modules/components/card/card.component';
+import { MatFormField, MatLabel, MatHint } from '@angular/material/form-field';
+import { MatSelect } from '@angular/material/select';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { MatOption } from '@angular/material/core';
+import { ButtonRowComponent } from '../../../widget-modules/components/button-row/button-row.component';
+import { ButtonComponent } from '../../../widget-modules/components/button/button.component';
+import { RouterLink } from '@angular/router';
+import { RoleDirective } from '../../../services/user/role.directive';
+import { UsersComponent } from './users/users.component';
 
 @Component({
-  selector: 'app-info',
+    selector: 'app-info',
-  templateUrl: './info.component.html',
+    templateUrl: './info.component.html',
-  styleUrls: ['./info.component.less'],
+    styleUrls: ['./info.component.less'],
-  standalone: false,
+    imports: [
+        NgIf,
+        CardComponent,
+        MatFormField,
+        MatLabel,
+        MatSelect,
+        ReactiveFormsModule,
+        FormsModule,
+        MatOption,
+        MatHint,
+        ButtonRowComponent,
+        ButtonComponent,
+        RouterLink,
+        RoleDirective,
+        UsersComponent,
+        AsyncPipe,
+    ],
 })
 export class InfoComponent implements OnInit {
   public user$: Observable<User | null> | null = null;

src/app/modules/user/info/role.pipe.ts

@@ -1,10 +1,7 @@
 import {Pipe, PipeTransform} from '@angular/core';
 import {roles} from '../../../services/user/roles';
 
-@Pipe({
+@Pipe({ name: 'role', })
-  name: 'role',
-  standalone: false,
-})
 export class RolePipe implements PipeTransform {
   public transform(role: roles): string {
     switch (role) {

src/app/modules/user/info/users/user/user.component.spec.ts

@@ -9,8 +9,8 @@ describe('UserComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [UserComponent],
+    imports: [UserComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/modules/user/info/users/user/user.component.ts

@@ -3,12 +3,34 @@ import {User} from '../../../../../services/user/user';
 import {UserService} from '../../../../../services/user/user.service';
 import {ROLE_TYPES} from '../../../../../services/user/roles';
 import {faTimes} from '@fortawesome/free-solid-svg-icons';
+import { NgIf, NgFor } from '@angular/common';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { MatSelect } from '@angular/material/select';
+import { MatOption } from '@angular/material/core';
+import { MatIconButton } from '@angular/material/button';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { RolePipe } from '../../role.pipe';
 
 @Component({
-  selector: 'app-user',
+    selector: 'app-user',
-  templateUrl: './user.component.html',
+    templateUrl: './user.component.html',
-  styleUrls: ['./user.component.less'],
+    styleUrls: ['./user.component.less'],
-  standalone: false,
+    imports: [
+        NgIf,
+        MatFormField,
+        MatLabel,
+        MatInput,
+        ReactiveFormsModule,
+        FormsModule,
+        MatSelect,
+        NgFor,
+        MatOption,
+        MatIconButton,
+        FaIconComponent,
+        RolePipe,
+    ],
 })
 export class UserComponent {
   public id = '';

src/app/modules/user/info/users/users.component.spec.ts

@@ -9,8 +9,8 @@ describe('UsersComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [UsersComponent],
+    imports: [UsersComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/modules/user/info/users/users.component.ts

@@ -2,12 +2,22 @@ import {Component} from '@angular/core';
 import {UserService} from '../../../../services/user/user.service';
 import {Observable} from 'rxjs';
 import {User} from '../../../../services/user/user';
+import { CardComponent } from '../../../../widget-modules/components/card/card.component';
+import { NgFor, AsyncPipe } from '@angular/common';
+import { UserComponent } from './user/user.component';
+import { SortByPipe } from '../../../../widget-modules/pipes/sort-by/sort-by.pipe';
 
 @Component({
-  selector: 'app-users',
+    selector: 'app-users',
-  templateUrl: './users.component.html',
+    templateUrl: './users.component.html',
-  styleUrls: ['./users.component.less'],
+    styleUrls: ['./users.component.less'],
-  standalone: false,
+    imports: [
+        CardComponent,
+        NgFor,
+        UserComponent,
+        AsyncPipe,
+        SortByPipe,
+    ],
 })
 export class UsersComponent {
   public users$: Observable<User[]>;

src/app/modules/user/login/auth-message.pipe.ts

@@ -1,9 +1,6 @@
 import {Pipe, PipeTransform} from '@angular/core';
 
-@Pipe({
+@Pipe({ name: 'authMessage', })
-  name: 'authMessage',
-  standalone: false,
-})
 export class AuthMessagePipe implements PipeTransform {
   public transform(code: string): string {
     switch (code) {

src/app/modules/user/login/login.component.spec.ts

@@ -9,8 +9,8 @@ describe('LoginComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [LoginComponent],
+    imports: [LoginComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/modules/user/login/login.component.ts

@@ -1,14 +1,30 @@
 import {Component, OnInit} from '@angular/core';
-import {UntypedFormControl, UntypedFormGroup, Validators} from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
-import {Router} from '@angular/router';
+import { Router, RouterLink } from '@angular/router';
 import {UserService} from '../../../services/user/user.service';
 import {faSignInAlt, faUserPlus} from '@fortawesome/free-solid-svg-icons';
+import { LogoComponent } from '../../../widget-modules/components/logo/logo.component';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { NgIf } from '@angular/common';
+import { MatButton } from '@angular/material/button';
+import { AuthMessagePipe } from './auth-message.pipe';
 
 @Component({
-  selector: 'app-login',
+    selector: 'app-login',
-  templateUrl: './login.component.html',
+    templateUrl: './login.component.html',
-  styleUrls: ['./login.component.less'],
+    styleUrls: ['./login.component.less'],
-  standalone: false,
+    imports: [
+        LogoComponent,
+        ReactiveFormsModule,
+        MatFormField,
+        MatLabel,
+        MatInput,
+        NgIf,
+        MatButton,
+        RouterLink,
+        AuthMessagePipe,
+    ],
 })
 export class LoginComponent implements OnInit {
   public form: UntypedFormGroup = new UntypedFormGroup({

src/app/modules/user/logout/logout.component.spec.ts

@@ -9,8 +9,8 @@ describe('LogoutComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [LogoutComponent],
+    imports: [LogoutComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/modules/user/logout/logout.component.ts

@@ -3,10 +3,9 @@ import {Router} from '@angular/router';
 import {UserService} from '../../../services/user/user.service';
 
 @Component({
-  selector: 'app-logout',
+    selector: 'app-logout',
-  templateUrl: './logout.component.html',
+    templateUrl: './logout.component.html',
-  styleUrls: ['./logout.component.less'],
+    styleUrls: ['./logout.component.less'],
-  standalone: false,
 })
 export class LogoutComponent implements AfterViewInit {
   public constructor(private userService: UserService, private router: Router) {

src/app/modules/user/new/new.component.spec.ts

@@ -9,8 +9,8 @@ describe('NewComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [NewComponent],
+    imports: [NewComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/modules/user/new/new.component.ts

@@ -1,13 +1,26 @@
 import {Component, OnInit} from '@angular/core';
-import {UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators} from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import {UserService} from '../../../services/user/user.service';
 import {faUserPlus} from '@fortawesome/free-solid-svg-icons';
+import { CardComponent } from '../../../widget-modules/components/card/card.component';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { ButtonRowComponent } from '../../../widget-modules/components/button-row/button-row.component';
+import { ButtonComponent } from '../../../widget-modules/components/button/button.component';
 
 @Component({
-  selector: 'app-new',
+    selector: 'app-new',
-  templateUrl: './new.component.html',
+    templateUrl: './new.component.html',
-  styleUrls: ['./new.component.less'],
+    styleUrls: ['./new.component.less'],
-  standalone: false,
+    imports: [
+        CardComponent,
+        ReactiveFormsModule,
+        MatFormField,
+        MatLabel,
+        MatInput,
+        ButtonRowComponent,
+        ButtonComponent,
+    ],
 })
 export class NewComponent implements OnInit {
   public form: UntypedFormGroup = this.fb.group({

src/app/modules/user/password-send/password-send.component.spec.ts

@@ -9,8 +9,8 @@ describe('PasswordSendComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [PasswordSendComponent],
+    imports: [PasswordSendComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/modules/user/password-send/password-send.component.ts

@@ -1,10 +1,11 @@
 import {Component} from '@angular/core';
+import { CardComponent } from '../../../widget-modules/components/card/card.component';
 
 @Component({
-  selector: 'app-password-send',
+    selector: 'app-password-send',
-  templateUrl: './password-send.component.html',
+    templateUrl: './password-send.component.html',
-  styleUrls: ['./password-send.component.less'],
+    styleUrls: ['./password-send.component.less'],
-  standalone: false,
+    imports: [CardComponent],
 })
 export class PasswordSendComponent {
 }

src/app/modules/user/password/password.component.spec.ts

@@ -9,8 +9,8 @@ describe('PasswordComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [PasswordComponent],
+    imports: [PasswordComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/modules/user/password/password.component.ts

@@ -1,14 +1,31 @@
 import {Component, OnInit} from '@angular/core';
-import {UntypedFormControl, UntypedFormGroup, Validators} from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import {Router} from '@angular/router';
 import {UserService} from '../../../services/user/user.service';
 import {faWindowRestore} from '@fortawesome/free-solid-svg-icons';
+import { CardComponent } from '../../../widget-modules/components/card/card.component';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { ButtonRowComponent } from '../../../widget-modules/components/button-row/button-row.component';
+import { ButtonComponent } from '../../../widget-modules/components/button/button.component';
+import { NgIf } from '@angular/common';
+import { AuthMessagePipe } from '../login/auth-message.pipe';
 
 @Component({
-  selector: 'app-password',
+    selector: 'app-password',
-  templateUrl: './password.component.html',
+    templateUrl: './password.component.html',
-  styleUrls: ['./password.component.less'],
+    styleUrls: ['./password.component.less'],
-  standalone: false,
+    imports: [
+        CardComponent,
+        ReactiveFormsModule,
+        MatFormField,
+        MatLabel,
+        MatInput,
+        ButtonRowComponent,
+        ButtonComponent,
+        NgIf,
+        AuthMessagePipe,
+    ],
 })
 export class PasswordComponent implements OnInit {
   public form: UntypedFormGroup = new UntypedFormGroup({

src/app/modules/user/user.module.ts

@@ -2,11 +2,11 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {LoginComponent} from './login/login.component';
 import {UserRoutingModule} from './user-routing.module';
-import {CardModule} from '../../widget-modules/components/card/card.module';
+
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatInputModule} from '@angular/material/input';
-import {ButtonRowModule} from '../../widget-modules/components/button-row/button-row.module';
+
 import {MatButtonModule} from '@angular/material/button';
 import {AuthMessagePipe} from './login/auth-message.pipe';
 import {InfoComponent} from './info/info.component';
@@ -16,32 +16,27 @@ import {MatSelectModule} from '@angular/material/select';
 import {PasswordComponent} from './password/password.component';
 import {PasswordSendComponent} from './password-send/password-send.component';
 import {UsersComponent} from './info/users/users.component';
-import {RoleModule} from '../../services/user/role.module';
+
 import {UserComponent} from './info/users/user/user.component';
 import {NewComponent} from './new/new.component';
-import {ButtonModule} from '../../widget-modules/components/button/button.module';
+
-import {LogoModule} from '../../widget-modules/components/logo/logo.module';
+
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {SortByPipe} from '../../widget-modules/pipes/sort-by/sort-by.pipe';
 
 @NgModule({
-  declarations: [LoginComponent, AuthMessagePipe, InfoComponent, LogoutComponent, RolePipe, PasswordComponent, PasswordSendComponent, UsersComponent, UserComponent, NewComponent],
+    imports: [
-  imports: [
     CommonModule,
     UserRoutingModule,
-    CardModule,
     MatFormFieldModule,
     ReactiveFormsModule,
     MatInputModule,
-    ButtonRowModule,
     MatButtonModule,
     MatSelectModule,
     FormsModule,
-    RoleModule,
-    ButtonModule,
-    LogoModule,
     FontAwesomeModule,
     SortByPipe,
-  ],
+    LoginComponent, AuthMessagePipe, InfoComponent, LogoutComponent, RolePipe, PasswordComponent, PasswordSendComponent, UsersComponent, UserComponent, NewComponent,
+],
 })
 export class UserModule {}

src/app/services/user/owner.directive.ts

@@ -1,10 +1,7 @@
 import {Directive, ElementRef, Input, OnInit, TemplateRef, ViewContainerRef} from '@angular/core';
 import {UserService} from './user.service';
 
-@Directive({
+@Directive({ selector: '[appOwner]', })
-  selector: '[appOwner]',
-  standalone: false,
-})
 export class OwnerDirective implements OnInit {
   private currentUserId: string | null = null;
   private iAppOwner: string | null = null;

src/app/services/user/owner.module.ts

@@ -1,11 +0,0 @@
-import {NgModule} from '@angular/core';
-import {OwnerDirective} from './owner.directive';
-import {CommonModule} from '@angular/common';
-
-@NgModule({
-  declarations: [OwnerDirective],
-  exports: [OwnerDirective],
-  imports: [CommonModule],
-})
-export class OwnerModule {
-}

src/app/services/user/role.directive.ts

@@ -4,10 +4,7 @@ import {UserService} from './user.service';
 import {User} from './user';
 import {combineLatest} from 'rxjs';
 
-@Directive({
+@Directive({ selector: '[appRole]', })
-  selector: '[appRole]',
-  standalone: false,
-})
 export class RoleDirective implements OnInit {
   @Input() public appRole: roles[] = [];
   private currentUser: User | null = null;

src/app/services/user/role.module.ts

@@ -1,11 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {RoleDirective} from './role.directive';
-
-@NgModule({
-  declarations: [RoleDirective],
-  exports: [RoleDirective],
-  imports: [CommonModule],
-})
-export class RoleModule {
-}

src/app/services/user/user-name/user-name.component.spec.ts

@@ -9,8 +9,8 @@ describe('UserNameComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [UserNameComponent],
+    imports: [UserNameComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/services/user/user-name/user-name.component.ts

@@ -2,12 +2,13 @@ import {Component, Input} from '@angular/core';
 import {UserService} from '../user.service';
 import {map} from 'rxjs/operators';
 import {Observable} from 'rxjs';
+import { AsyncPipe } from '@angular/common';
 
 @Component({
-  selector: 'app-user-name',
+    selector: 'app-user-name',
-  templateUrl: './user-name.component.html',
+    templateUrl: './user-name.component.html',
-  styleUrls: ['./user-name.component.less'],
+    styleUrls: ['./user-name.component.less'],
-  standalone: false,
+    imports: [AsyncPipe],
 })
 export class UserNameComponent {
   public name$: Observable<string | null> | null = null;

src/app/services/user/user-name/user-name.module.ts

@@ -1,11 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {UserNameComponent} from './user-name.component';
-
-@NgModule({
-  declarations: [UserNameComponent],
-  exports: [UserNameComponent],
-  imports: [CommonModule],
-})
-export class UserNameModule {
-}

src/app/widget-modules/components/add-song/add-song.component.spec.ts

@@ -9,8 +9,8 @@ describe('AddSongComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [AddSongComponent],
+    imports: [AddSongComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/widget-modules/components/application-frame/application-frame.module.ts

@@ -1,18 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {NavigationComponent} from './navigation/navigation.component';
-import {RouterModule} from '@angular/router';
-import {FilterComponent} from './navigation/filter/filter.component';
-import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
-import {LinkComponent} from './navigation/link/link.component';
-import {FormsModule} from '@angular/forms';
-import {RoleModule} from '../../../services/user/role.module';
-import {BrandComponent} from './navigation/brand/brand.component';
-
-@NgModule({
-  declarations: [NavigationComponent, FilterComponent, LinkComponent, BrandComponent],
-  imports: [CommonModule, RouterModule, FontAwesomeModule, FormsModule, RoleModule],
-  exports: [NavigationComponent],
-})
-export class ApplicationFrameModule {
-}

src/app/widget-modules/components/application-frame/navigation/brand/brand.component.spec.ts

@@ -9,8 +9,8 @@ describe('BrandComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [BrandComponent],
+    imports: [BrandComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/widget-modules/components/application-frame/navigation/brand/brand.component.ts

@@ -1,10 +1,9 @@
 import {Component} from '@angular/core';
 
 @Component({
-  selector: 'app-brand',
+    selector: 'app-brand',
-  templateUrl: './brand.component.html',
+    templateUrl: './brand.component.html',
-  styleUrls: ['./brand.component.less'],
+    styleUrls: ['./brand.component.less'],
-  standalone: false,
 })
 export class BrandComponent {
 }

src/app/widget-modules/components/application-frame/navigation/filter/filter.component.spec.ts

@@ -9,8 +9,8 @@ describe('FilterComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [FilterComponent],
+    imports: [FilterComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/widget-modules/components/application-frame/navigation/filter/filter.component.ts

@@ -1,11 +1,12 @@
 import {Component} from '@angular/core';
 import {ActivatedRoute, Params, Router} from '@angular/router';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 
 @Component({
-  selector: 'app-filter',
+    selector: 'app-filter',
-  templateUrl: './filter.component.html',
+    templateUrl: './filter.component.html',
-  styleUrls: ['./filter.component.less'],
+    styleUrls: ['./filter.component.less'],
-  standalone: false,
+    imports: [ReactiveFormsModule, FormsModule],
 })
 export class FilterComponent {
   public value = '';

src/app/widget-modules/components/application-frame/navigation/link/link.component.spec.ts

@@ -9,8 +9,8 @@ describe('LinkComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [LinkComponent],
+    imports: [LinkComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/widget-modules/components/application-frame/navigation/link/link.component.ts

@@ -1,12 +1,18 @@
 import {Component, Input} from '@angular/core';
 import {IconProp} from '@fortawesome/fontawesome-svg-core';
 import {faCross} from '@fortawesome/free-solid-svg-icons';
+import { RouterLinkActive, RouterLink } from '@angular/router';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 
 @Component({
-  selector: 'app-link',
+    selector: 'app-link',
-  templateUrl: './link.component.html',
+    templateUrl: './link.component.html',
-  styleUrls: ['./link.component.less'],
+    styleUrls: ['./link.component.less'],
-  standalone: false,
+    imports: [
+        RouterLinkActive,
+        RouterLink,
+        FaIconComponent,
+    ],
 })
 export class LinkComponent {
   @Input() public text: string | null = null;

src/app/widget-modules/components/application-frame/navigation/navigation.component.spec.ts

@@ -9,8 +9,8 @@ describe('NavigationComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [NavigationComponent],
+    imports: [NavigationComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );
 

src/app/widget-modules/components/application-frame/navigation/navigation.component.ts

@@ -2,12 +2,25 @@ import {Component} from '@angular/core';
 import {faChalkboard, faMusic, faPersonBooth, faUserCog} from '@fortawesome/free-solid-svg-icons';
 import {fromEvent, Observable} from 'rxjs';
 import {distinctUntilChanged, map, shareReplay, startWith} from 'rxjs/operators';
+import { BrandComponent } from './brand/brand.component';
+import { RouterLink } from '@angular/router';
+import { RoleDirective } from '../../../../services/user/role.directive';
+import { LinkComponent } from './link/link.component';
+import { FilterComponent } from './filter/filter.component';
+import { AsyncPipe } from '@angular/common';
 
 @Component({
-  selector: 'app-navigation',
+    selector: 'app-navigation',
-  templateUrl: './navigation.component.html',
+    templateUrl: './navigation.component.html',
-  styleUrls: ['./navigation.component.less'],
+    styleUrls: ['./navigation.component.less'],
-  standalone: false,
+    imports: [
+        BrandComponent,
+        RouterLink,
+        RoleDirective,
+        LinkComponent,
+        FilterComponent,
+        AsyncPipe,
+    ],
 })
 export class NavigationComponent {
   public faSongs = faMusic;

src/app/widget-modules/components/button-row/button-row.component.spec.ts

@@ -9,8 +9,8 @@ describe('ButtonRowComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        declarations: [ButtonRowComponent],
+    imports: [ButtonRowComponent],
-      }).compileComponents();
+}).compileComponents();
     }),
   );