Angular 21: standalone components, Vitest and angular19 CI

.github/workflows/dotnet-core-master.yml

@@ -108,6 +108,8 @@ jobs:
       run: cat docker_run_log
     - name: Pretest changes to work with Docker container
       run: sed -i 's/localhost/mariadbtest/g' eform-angular-frontend/eform-client/playwright/e2e/Constants/DatabaseConfigurationConstants.ts
+    - name: Enable Corepack
+      run: corepack enable
     - name: yarn install
       run: cd eform-angular-frontend/eform-client && yarn install
     - name: Install Playwright browsers

.github/workflows/dotnet-core-pr.yml

@@ -18,7 +18,7 @@ jobs:
       uses: actions/checkout@v3
       with:
         repository: microting/eform-angular-frontend
-        ref: stable
+        ref: ${{ github.base_ref }}
         path: eform-angular-frontend
     - name: Copy dependencies
       run: |
@@ -81,7 +81,7 @@ jobs:
       uses: actions/checkout@v3
       with:
         repository: microting/eform-angular-frontend
-        ref: stable
+        ref: ${{ github.base_ref }}
         path: eform-angular-frontend
     - name: Sleep 15 seconds
       run: sleep 15
@@ -102,6 +102,8 @@ jobs:
       run: cat docker_run_log
     - name: Pretest changes to work with Docker container
       run: sed -i 's/localhost/mariadbtest/g' eform-angular-frontend/eform-client/playwright/e2e/Constants/DatabaseConfigurationConstants.ts
+    - name: Enable Corepack
+      run: corepack enable
     - name: yarn install
       run: cd eform-angular-frontend/eform-client && yarn install
     - name: Install Playwright browsers

Dockerfile

@@ -2,8 +2,9 @@ FROM node:22-bookworm-slim as node-env
 WORKDIR /app
 ENV PATH /app/node_modules/.bin:$PATH
 COPY eform-angular-frontend/eform-client ./
+RUN corepack enable
 RUN yarn install
-RUN npm run build
+RUN yarn build
 
 FROM mcr.microsoft.com/dotnet/sdk:10.0-noble AS build-env
 WORKDIR /app

eform-client/src/app/plugins/modules/outer-inner-resource-pn/components/outer-inner-resource-settings/outer-inner-resource-settings.component.ts

@@ -1,3 +1,11 @@
+import {EformNewSubheaderComponent} from 'src/app/common/modules/eform-shared/components/eform-new-subheader/eform-new-subheader.component';
+import {TranslatePipe} from '@ngx-translate/core';
+import {MatButton} from '@angular/material/button';
+import {MatCard, MatCardContent} from '@angular/material/card';
+import {FormsModule} from '@angular/forms';
+import {MatFormField, MatLabel} from '@angular/material/form-field';
+import {MatInput} from '@angular/material/input';
+import {MtxSelect} from '@ng-matero/extensions/select';
 import {
   ChangeDetectorRef,
   Component,
@@ -18,8 +26,8 @@ import {EFormService} from 'src/app/common/services';
 @Component({
     selector: 'app-machine-area-settings',
     templateUrl: './outer-inner-resource-settings.component.html',
-    styleUrls: ['./outer-inner-resource-settings.component.scss'],
-    standalone: false
+    imports: [EformNewSubheaderComponent, TranslatePipe, MatButton, MatCard, MatCardContent, FormsModule, MatFormField, MatLabel, MatInput, MtxSelect],
+    styleUrls: ['./outer-inner-resource-settings.component.scss']
 })
 export class OuterInnerResourceSettingsComponent implements OnInit {
   typeahead = new EventEmitter<string>();

eform-client/src/app/plugins/modules/outer-inner-resource-pn/layouts/outer-inner-resource-pn-layout.component.ts

@@ -1,3 +1,4 @@
+import {RouterOutlet} from '@angular/router';
 import {AfterContentInit, Component, OnInit} from '@angular/core';
 import {TranslateService} from '@ngx-translate/core';
 import {translates} from '../i18n/translates';
@@ -7,9 +8,9 @@ import {take} from 'rxjs';
 
 @Component({
     selector: 'app-machine-area-pn-layout',
+    imports: [RouterOutlet],
     template: `
-    <router-outlet></router-outlet>`,
-    standalone: false
+    <router-outlet></router-outlet>`
 })
 export class OuterInnerResourcePnLayoutComponent implements AfterContentInit, OnInit {
   private pluginName = 'outer-inner-resource';

eform-client/src/app/plugins/modules/outer-inner-resource-pn/modules/inner-resources/components/inner-resource-create/inner-resource-create.component.ts

@@ -1,3 +1,8 @@
+import {FormsModule} from '@angular/forms';
+import {MatFormField, MatLabel} from '@angular/material/form-field';
+import {MatInput} from '@angular/material/input';
+import {MtxGrid} from '@ng-matero/extensions/grid';
+import {MatCheckbox} from '@angular/material/checkbox';
 import {
   Component,
   EventEmitter,
@@ -13,15 +18,15 @@ import {OuterInnerResourcePnInnerResourceService} from '../../../../services';
 import {AutoUnsubscribe} from 'ngx-auto-unsubscribe';
 import {Subscription} from 'rxjs';
 import {MtxGridColumn} from '@ng-matero/extensions/grid';
-import {TranslateService} from '@ngx-translate/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {TranslateService, TranslatePipe} from '@ngx-translate/core';
+import {MAT_DIALOG_DATA, MatDialogRef, MatDialogTitle, MatDialogContent, MatDialogActions} from '@angular/material/dialog';
 
 @AutoUnsubscribe()
 @Component({
     selector: 'app-machine-area-pn-machine-create',
     templateUrl: './inner-resource-create.component.html',
-    styleUrls: ['./inner-resource-create.component.scss'],
-    standalone: false
+    imports: [TranslatePipe, MatDialogTitle, MatDialogContent, MatDialogActions, FormsModule, MatFormField, MatLabel, MatInput, MtxGrid, MatCheckbox],
+    styleUrls: ['./inner-resource-create.component.scss']
 })
 export class InnerResourceCreateComponent implements OnInit, OnDestroy {
   onMachineCreated: EventEmitter<void> = new EventEmitter<void>();

eform-client/src/app/plugins/modules/outer-inner-resource-pn/modules/inner-resources/components/inner-resource-delete/inner-resource-delete.component.ts

@@ -1,3 +1,4 @@
+import {TranslatePipe} from '@ngx-translate/core';
 import {
   Component,
   EventEmitter, Inject,
@@ -8,14 +9,14 @@ import {InnerResourcePnModel,} from '../../../../models';
 import { OuterInnerResourcePnInnerResourceService } from '../../../../services';
 import { AutoUnsubscribe } from 'ngx-auto-unsubscribe';
 import { Subscription } from 'rxjs';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {MAT_DIALOG_DATA, MatDialogRef, MatDialogTitle, MatDialogContent, MatDialogActions} from '@angular/material/dialog';
 
 @AutoUnsubscribe()
 @Component({
     selector: 'app-machine-area-pn-machine-delete',
     templateUrl: './inner-resource-delete.component.html',
-    styleUrls: ['./inner-resource-delete.component.scss'],
-    standalone: false
+    imports: [TranslatePipe, MatDialogTitle, MatDialogContent, MatDialogActions],
+    styleUrls: ['./inner-resource-delete.component.scss']
 })
 export class InnerResourceDeleteComponent implements OnInit, OnDestroy {
   onMachineDeleted: EventEmitter<void> = new EventEmitter<void>();

eform-client/src/app/plugins/modules/outer-inner-resource-pn/modules/inner-resources/components/inner-resource-edit/inner-resource-edit.component.ts

@@ -1,3 +1,8 @@
+import {FormsModule} from '@angular/forms';
+import {MatFormField, MatLabel} from '@angular/material/form-field';
+import {MatInput} from '@angular/material/input';
+import {MtxGrid} from '@ng-matero/extensions/grid';
+import {MatCheckbox} from '@angular/material/checkbox';
 import {
   Component,
   EventEmitter,
@@ -14,15 +19,15 @@ import { OuterInnerResourcePnInnerResourceService } from '../../../../services';
 import { Subscription } from 'rxjs';
 import { AutoUnsubscribe } from 'ngx-auto-unsubscribe';
 import {MtxGridColumn} from '@ng-matero/extensions/grid';
-import {TranslateService} from '@ngx-translate/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {TranslateService, TranslatePipe} from '@ngx-translate/core';
+import {MAT_DIALOG_DATA, MatDialogRef, MatDialogTitle, MatDialogContent, MatDialogActions} from '@angular/material/dialog';
 
 @AutoUnsubscribe()
 @Component({
     selector: 'app-machine-area-pn-machine-edit',
     templateUrl: './inner-resource-edit.component.html',
-    styleUrls: ['./inner-resource-edit.component.scss'],
-    standalone: false
+    imports: [TranslatePipe, MatDialogTitle, MatDialogContent, MatDialogActions, FormsModule, MatFormField, MatLabel, MatInput, MtxGrid, MatCheckbox],
+    styleUrls: ['./inner-resource-edit.component.scss']
 })
 export class InnerResourceEditComponent implements OnInit, OnDestroy {
   mappingAreas: OuterResourcesPnModel = new OuterResourcesPnModel();

eform-client/src/app/plugins/modules/outer-inner-resource-pn/modules/inner-resources/components/inner-resources-page/inner-resources-page.component.ts

@@ -1,3 +1,10 @@
+import {Sort} from '@angular/material/sort';
+import {EformNewSubheaderComponent} from 'src/app/common/modules/eform-shared/components/eform-new-subheader/eform-new-subheader.component';
+import {EformPaginationComponent} from 'src/app/common/modules/eform-shared/components/eform-pagination/eform-pagination.component';
+import {AsyncPipe, NgIf} from '@angular/common';
+import {MatButton} from '@angular/material/button';
+import {MatTooltip} from '@angular/material/tooltip';
+import {MtxGrid} from '@ng-matero/extensions/grid';
 import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {
   InnerResourcePnModel,
@@ -16,10 +23,9 @@ import {InnerResourcesStateService} from '../store';
 import {PaginationModel, TableHeaderElementModel} from 'src/app/common/models';
 import {AuthStateService} from 'src/app/common/store';
 import {MtxGridColumn} from '@ng-matero/extensions/grid';
-import {TranslateService} from '@ngx-translate/core';
+import {TranslateService, TranslatePipe} from '@ngx-translate/core';
 import {MatDialog} from '@angular/material/dialog';
 import {Overlay} from '@angular/cdk/overlay';
-import {Sort} from '@angular/material/sort';
 import {
   InnerResourceCreateComponent,
   InnerResourceDeleteComponent,
@@ -37,8 +43,8 @@ import {
 @Component({
     selector: 'app-machine-area-pn-machines-page',
     templateUrl: './inner-resources-page.component.html',
-    styleUrls: ['./inner-resources-page.component.scss'],
-    standalone: false
+    imports: [EformNewSubheaderComponent, EformPaginationComponent, NgIf, TranslatePipe, AsyncPipe, MatButton, MatTooltip, MtxGrid],
+    styleUrls: ['./inner-resources-page.component.scss']
 })
 export class InnerResourcesPageComponent implements OnInit, OnDestroy {
   @ViewChild('createMachineModal', {static: false}) createMachineModal;

eform-client/src/app/plugins/modules/outer-inner-resource-pn/modules/inner-resources/inner-resources.module.ts

@@ -1,41 +1,21 @@
-import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {TranslateModule} from '@ngx-translate/core';
+import {MatDialogModule} from '@angular/material/dialog';
 import {
   InnerResourceCreateComponent,
   InnerResourceDeleteComponent,
   InnerResourceEditComponent,
   InnerResourcesPageComponent,
 } from './components';
 import {InnerResourcesRouting} from './inner-resources.routing';
-import {EformSharedModule} from 'src/app/common/modules/eform-shared/eform-shared.module';
-import {FormsModule} from '@angular/forms';
-import {MatTooltipModule} from '@angular/material/tooltip';
-import {MatButtonModule} from '@angular/material/button';
-import {MtxGridModule} from '@ng-matero/extensions/grid';
-import {MatDialogModule} from '@angular/material/dialog';
-import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatInputModule} from '@angular/material/input';
 
 @NgModule({
-  declarations: [
+  imports: [
+    MatDialogModule,
     InnerResourceCreateComponent,
     InnerResourceDeleteComponent,
     InnerResourceEditComponent,
     InnerResourcesPageComponent,
-  ],
-  imports: [
-    CommonModule,
-    TranslateModule,
     InnerResourcesRouting,
-    EformSharedModule,
-    FormsModule,
-    MatTooltipModule,
-    MatButtonModule,
-    MtxGridModule,
-    MatDialogModule,
-    MatFormFieldModule,
-    MatInputModule,
   ],
   providers: [],
 })

eform-client/src/app/plugins/modules/outer-inner-resource-pn/modules/outer-resources/components/outer-resource-create/outer-resource-create.component.ts

@@ -1,3 +1,8 @@
+import {FormsModule} from '@angular/forms';
+import {MatFormField, MatLabel} from '@angular/material/form-field';
+import {MatInput} from '@angular/material/input';
+import {MtxGrid} from '@ng-matero/extensions/grid';
+import {MatCheckbox} from '@angular/material/checkbox';
 import {
   Component,
   EventEmitter,
@@ -13,15 +18,15 @@ import {OuterInnerResourcePnOuterResourceService} from '../../../../services';
 import {AutoUnsubscribe} from 'ngx-auto-unsubscribe';
 import {Subscription} from 'rxjs';
 import {MtxGridColumn} from '@ng-matero/extensions/grid';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
-import {TranslateService} from '@ngx-translate/core';
+import {MAT_DIALOG_DATA, MatDialogRef, MatDialogTitle, MatDialogContent, MatDialogActions} from '@angular/material/dialog';
+import {TranslateService, TranslatePipe} from '@ngx-translate/core';
 
 @AutoUnsubscribe()
 @Component({
     selector: 'app-machine-area-pn-area-create',
     templateUrl: './outer-resource-create.component.html',
-    styleUrls: ['./outer-resource-create.component.scss'],
-    standalone: false
+    imports: [TranslatePipe, MatDialogTitle, MatDialogContent, MatDialogActions, FormsModule, MatFormField, MatLabel, MatInput, MtxGrid, MatCheckbox],
+    styleUrls: ['./outer-resource-create.component.scss']
 })
 export class OuterResourceCreateComponent implements OnInit, OnDestroy {
   onAreaCreated: EventEmitter<void> = new EventEmitter<void>();

eform-client/src/app/plugins/modules/outer-inner-resource-pn/modules/outer-resources/components/outer-resource-delete/outer-resource-delete.component.ts

@@ -1,3 +1,4 @@
+import {TranslatePipe} from '@ngx-translate/core';
 import {
   Component,
   EventEmitter,
@@ -9,14 +10,14 @@ import {OuterInnerResourcePnOuterResourceService} from '../../../../services';
 import {OuterResourcePnModel} from '../../../../models';
 import {AutoUnsubscribe} from 'ngx-auto-unsubscribe';
 import {Subscription} from 'rxjs';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {MAT_DIALOG_DATA, MatDialogRef, MatDialogTitle, MatDialogContent, MatDialogActions} from '@angular/material/dialog';
 
 @AutoUnsubscribe()
 @Component({
     selector: 'app-machine-area-pn-area-delete',
     templateUrl: './outer-resource-delete.component.html',
-    styleUrls: ['./outer-resource-delete.component.scss'],
-    standalone: false
+    imports: [TranslatePipe, MatDialogTitle, MatDialogContent, MatDialogActions],
+    styleUrls: ['./outer-resource-delete.component.scss']
 })
 export class OuterResourceDeleteComponent implements OnInit, OnDestroy {
   onAreaDeleted: EventEmitter<void> = new EventEmitter<void>();

eform-client/src/app/plugins/modules/outer-inner-resource-pn/modules/outer-resources/components/outer-resource-edit/outer-resource-edit.component.ts

@@ -1,3 +1,8 @@
+import {FormsModule} from '@angular/forms';
+import {MatFormField, MatLabel} from '@angular/material/form-field';
+import {MatInput} from '@angular/material/input';
+import {MtxGrid} from '@ng-matero/extensions/grid';
+import {MatCheckbox} from '@angular/material/checkbox';
 import {
   Component,
   EventEmitter,
@@ -13,16 +18,16 @@ import {
 import {OuterInnerResourcePnOuterResourceService} from '../../../../services';
 import {AutoUnsubscribe} from 'ngx-auto-unsubscribe';
 import {Subscription} from 'rxjs';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {MAT_DIALOG_DATA, MatDialogRef, MatDialogTitle, MatDialogContent, MatDialogActions} from '@angular/material/dialog';
 import {MtxGridColumn} from '@ng-matero/extensions/grid';
-import {TranslateService} from '@ngx-translate/core';
+import {TranslateService, TranslatePipe} from '@ngx-translate/core';
 
 @AutoUnsubscribe()
 @Component({
     selector: 'app-machine-area-pn-area-edit',
     templateUrl: './outer-resource-edit.component.html',
-    styleUrls: ['./outer-resource-edit.component.scss'],
-    standalone: false
+    imports: [TranslatePipe, MatDialogTitle, MatDialogContent, MatDialogActions, FormsModule, MatFormField, MatLabel, MatInput, MtxGrid, MatCheckbox],
+    styleUrls: ['./outer-resource-edit.component.scss']
 })
 export class OuterResourceEditComponent implements OnInit, OnDestroy {
   mappingMachines: InnerResourcesPnModel = new InnerResourcesPnModel();

eform-client/src/app/plugins/modules/outer-inner-resource-pn/modules/outer-resources/components/outer-resources-page/outer-resources-page.component.ts

@@ -1,3 +1,10 @@
+import {Sort} from '@angular/material/sort';
+import {EformNewSubheaderComponent} from 'src/app/common/modules/eform-shared/components/eform-new-subheader/eform-new-subheader.component';
+import {EformPaginationComponent} from 'src/app/common/modules/eform-shared/components/eform-pagination/eform-pagination.component';
+import {AsyncPipe} from '@angular/common';
+import {MatButton} from '@angular/material/button';
+import {MatTooltip} from '@angular/material/tooltip';
+import {MtxGrid} from '@ng-matero/extensions/grid';
 import {Component, OnDestroy, OnInit} from '@angular/core';
 import {
   OuterResourcePnModel,
@@ -13,9 +20,8 @@ import {OuterResourcesStateService} from '../store';
 import {PaginationModel} from 'src/app/common/models';
 import {Subscription} from 'rxjs';
 import {AutoUnsubscribe} from 'ngx-auto-unsubscribe';
-import {Sort} from '@angular/material/sort';
 import {MtxGridColumn} from '@ng-matero/extensions/grid';
-import {TranslateService} from '@ngx-translate/core';
+import {TranslateService, TranslatePipe} from '@ngx-translate/core';
 import {dialogConfigHelper} from 'src/app/common/helpers';
 import {MatDialog} from '@angular/material/dialog';
 import {Overlay} from '@angular/cdk/overlay';
@@ -35,8 +41,8 @@ import {
 @Component({
     selector: 'app-areas-page',
     templateUrl: './outer-resources-page.component.html',
-    styleUrls: ['./outer-resources-page.component.scss'],
-    standalone: false
+    imports: [EformNewSubheaderComponent, EformPaginationComponent, TranslatePipe, AsyncPipe, MatButton, MatTooltip, MtxGrid],
+    styleUrls: ['./outer-resources-page.component.scss']
 })
 export class OuterResourcesPageComponent implements OnInit, OnDestroy {
   areasModel: OuterResourcesPnModel = new OuterResourcesPnModel();