Migration To latest Version of Angular 19.2.1

angular.json

@@ -15,13 +15,16 @@
       },
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist",
+            "outputPath": {
+              "base": "dist"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
             "preserveSymlinks": true,
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "src/polyfills.ts"
+            ],
             "tsConfig": "src/tsconfig.app.json",
             "assets": [
               "src/favicon.ico",
@@ -40,7 +43,8 @@
               "./node_modules/prismjs/components/prism-json.min.js",
               "./node_modules/prismjs/components/prism-javascript.min.js",
               "./node_modules/prismjs/components/prism-typescript.min.js"
-            ]
+            ],
+            "browser": "src/main.ts"
           },
           "configurations": {
             "production": {
@@ -55,14 +59,10 @@
               "sourceMap": false,
               "namedChunks": false,
               "aot": true,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true
+              "extractLicenses": true
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
@@ -72,21 +72,21 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "demo:build"
+            "buildTarget": "demo:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "demo:build:production"
+              "buildTarget": "demo:build:production"
             },
             "development": {
-              "browserTarget": "demo:build:development"
+              "buildTarget": "demo:build:development"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "demo:build"
+            "buildTarget": "demo:build"
           }
         },
         "test": {

e2e/protractor.conf.js

@@ -25,4 +25,4 @@ exports.config = {
     });
     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
   }
-};
+};

package.json

@@ -13,18 +13,18 @@
     "deploy": "npm run builddemo; cd dist; git init; git remote add origin [email protected]:formio/angular-demo.git; git checkout -b gh-pages; git add -A; git commit -m 'Update demo application'; git push -f origin gh-pages;"
   },
   "dependencies": {
-    "@angular/animations": "^17.0.8",
-    "@angular/common": "^17.0.8",
-    "@angular/compiler": "^17.0.8",
-    "@angular/core": "^17.0.8",
-    "@angular/elements": "^17.0.8",
-    "@angular/forms": "^17.0.8",
-    "@angular/platform-browser": "^17.0.8",
-    "@angular/platform-browser-dynamic": "^17.0.8",
-    "@angular/router": "^17.0.8",
+    "@angular/animations": "^19.2.1",
+    "@angular/common": "^19.2.1",
+    "@angular/compiler": "^19.2.1",
+    "@angular/core": "^19.2.1",
+    "@angular/elements": "^19.2.1",
+    "@angular/forms": "^19.2.1",
+    "@angular/platform-browser": "^19.2.1",
+    "@angular/platform-browser-dynamic": "^19.2.1",
+    "@angular/router": "^19.2.1",
     "@formio/angular": "^7.0.0",
-    "bootstrap": "4",
-    "bootswatch": "^4.5.3",
+    "bootstrap": "^5.0.0",
+    "bootswatch": "^5.3.3",
     "core-js": "^3.8.1",
     "font-awesome": "^4.7.0",
     "formiojs": "^4.18.0",
@@ -34,13 +34,13 @@
     "prism-themes": "^1.5.0",
     "prismjs": "^1.22.0",
     "rxjs": "^7.8.0",
-    "zone.js": "^0.14.2"
+    "zone.js": "^0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.0.9",
-    "@angular/cli": "^17.0.9",
-    "@angular/compiler-cli": "^17.0.8",
-    "@angular/language-service": "^17.0.8",
+    "@angular-devkit/build-angular": "^19.2.1",
+    "@angular/cli": "^19.2.1",
+    "@angular/compiler-cli": "^19.2.1",
+    "@angular/language-service": "^19.2.1",
     "@types/jasmine": "^5.1.4",
     "@types/jasminewd2": "^2.0.8",
     "@types/node": "^20.2.5",
@@ -55,6 +55,6 @@
     "protractor": "~7.0.0",
     "ts-node": "^10.9.1",
     "tslint": "^6.1.3",
-    "typescript": "~5.2.0"
+    "typescript": "~5.5.4"
   }
 }

src/app/app.component.spec.ts

@@ -1,4 +1,5 @@
-import { TestBed, async } from '@angular/core/testing';
+// @ts-ignore
+import {async, TestBed} from '@angular/core/testing';
 import { AppComponent } from './app.component';
 describe('AppComponent', () => {
   beforeEach(async(() => {

src/app/app.component.ts

@@ -2,9 +2,10 @@ import { Component } from '@angular/core';
 import { FormioAuthService } from '@formio/angular/auth';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss'],
+    standalone: false
 })
 export class AppComponent {
   constructor(public auth: FormioAuthService) {}

src/app/auth/auth/auth.component.ts

@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
 import { FormioAuthComponent, FormioAuthService } from '@formio/angular/auth';
 @Component({
-  selector: 'app-auth',
-  templateUrl: './auth.component.html',
-  styleUrls: ['./auth.component.scss']
+    selector: 'app-auth',
+    templateUrl: './auth.component.html',
+    styleUrls: ['./auth.component.scss'],
+    standalone: false
 })
 export class AuthComponent extends FormioAuthComponent {
   constructor(public service: FormioAuthService) {

src/app/auth/login/login.component.ts

@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
 import { FormioAuthLoginComponent, FormioAuthService } from '@formio/angular/auth';
 @Component({
-  selector: 'app-login',
-  templateUrl: './login.component.html',
-  styleUrls: ['./login.component.scss']
+    selector: 'app-login',
+    templateUrl: './login.component.html',
+    styleUrls: ['./login.component.scss'],
+    standalone: false
 })
 export class LoginComponent extends FormioAuthLoginComponent {
   constructor(public service: FormioAuthService) {

src/app/data/data.component.ts

@@ -4,10 +4,11 @@ import { FormioAuthService } from '@formio/angular/auth';
 import SubmissionComponents from './submission/index';
 import { PrismService } from '../Prism.service';
 @Component({
-  selector: 'app-data',
-  templateUrl: './data.component.html',
-  styleUrls: ['./data.component.scss'],
-  encapsulation: ViewEncapsulation.None
+    selector: 'app-data',
+    templateUrl: './data.component.html',
+    styleUrls: ['./data.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    standalone: false
 })
 export class DataComponent implements AfterViewInit {
 

src/app/data/submission/SubmissionGridHeader.component.ts

@@ -2,6 +2,7 @@ import { Component } from "@angular/core";
 import { SubmissionGridHeaderComponent } from "@formio/angular/grid";
 
 @Component({
-    templateUrl: './SubmissionGridHeader.component.html'
+    templateUrl: './SubmissionGridHeader.component.html',
+    standalone: false
 })
 export class CustomSubmissionGridHeaderComponent extends SubmissionGridHeaderComponent {}

src/app/event/resource/resource.component.ts

@@ -2,8 +2,9 @@ import { Component } from '@angular/core';
 import { FormioResourceComponent } from '@formio/angular/resource';
 
 @Component({
-  selector: 'app-resource',
-  templateUrl: './resource.component.html',
-  styleUrls: ['./resource.component.scss']
+    selector: 'app-resource',
+    templateUrl: './resource.component.html',
+    styleUrls: ['./resource.component.scss'],
+    standalone: false
 })
 export class ResourceComponent extends FormioResourceComponent {}

src/app/event/view/view.component.ts

@@ -2,8 +2,9 @@ import { Component } from '@angular/core';
 import { FormioResourceViewComponent } from '@formio/angular/resource';
 
 @Component({
-  selector: 'app-view',
-  templateUrl: './view.component.html',
-  styleUrls: ['./view.component.scss']
+    selector: 'app-view',
+    templateUrl: './view.component.html',
+    styleUrls: ['./view.component.scss'],
+    standalone: false
 })
 export class ViewComponent extends FormioResourceViewComponent {}

src/app/form/index/index.component.ts

@@ -4,9 +4,10 @@ import { FormManagerIndexComponent, FormManagerService, FormManagerConfig } from
 import { FormioAuthService } from '@formio/angular/auth';
 
 @Component({
-  selector: 'app-index',
-  templateUrl: './index.component.html',
-  styleUrls: ['./index.component.scss']
+    selector: 'app-index',
+    templateUrl: './index.component.html',
+    styleUrls: ['./index.component.scss'],
+    standalone: false
 })
 export class IndexComponent extends FormManagerIndexComponent {
   constructor(

src/app/forms/builder/builder.component.ts

@@ -3,9 +3,10 @@ import { Component, AfterViewInit, ViewChild, ElementRef, EventEmitter } from '@
 import { PrismService } from '../../Prism.service';
 
 @Component({
-  selector: 'app-builder',
-  templateUrl: './builder.component.html',
-  styleUrls: ['./builder.component.scss']
+    selector: 'app-builder',
+    templateUrl: './builder.component.html',
+    styleUrls: ['./builder.component.scss'],
+    standalone: false
 })
 export class BuilderComponent implements AfterViewInit {
   @ViewChild('json', {static: true}) jsonElement?: ElementRef;

src/app/forms/custom-builder/builder.component.ts

@@ -4,8 +4,9 @@ import { options } from './options';
 import {Observable, Subject} from "rxjs";
 
 @Component({
-  selector: 'app-builder',
-  templateUrl: './builder.component.html',
+    selector: 'app-builder',
+    templateUrl: './builder.component.html',
+    standalone: false
 })
 export class CustomBuilderComponent implements AfterViewInit {
   @ViewChild('json', {static: true}) jsonElement?: ElementRef;

src/app/forms/forms/forms.component.ts

@@ -2,9 +2,10 @@ import { Component, OnInit } from '@angular/core';
 import { FORMS } from '../forms.index';
 
 @Component({
-  selector: 'app-forms',
-  templateUrl: './forms.component.html',
-  styleUrls: ['./forms.component.scss']
+    selector: 'app-forms',
+    templateUrl: './forms.component.html',
+    styleUrls: ['./forms.component.scss'],
+    standalone: false
 })
 export class FormsComponent implements OnInit {
   public forms: any[];

src/app/forms/kitchen/kitchen.component.ts

@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
 import { FORM } from './form';
 @Component({
-  selector: 'app-kitchen',
-  templateUrl: './kitchen.component.html',
-  styleUrls: ['./kitchen.component.scss']
+    selector: 'app-kitchen',
+    templateUrl: './kitchen.component.html',
+    styleUrls: ['./kitchen.component.scss'],
+    standalone: false
 })
 export class KitchenComponent {
   public form: any = FORM;

src/app/forms/language/language.component.ts

@@ -2,9 +2,10 @@ import { Component, EventEmitter } from '@angular/core';
 import { FormioOptions, FormioAppConfig } from '@formio/angular';
 
 @Component({
-  selector: 'app-language',
-  templateUrl: './language.component.html',
-  styleUrls: ['./language.component.scss']
+    selector: 'app-language',
+    templateUrl: './language.component.html',
+    styleUrls: ['./language.component.scss'],
+    standalone: false
 })
 export class LanguageComponent {
   public language: EventEmitter<string>;

src/app/forms/pdf/pdf.component.ts

@@ -1,9 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { FormioAppConfig } from '@formio/angular';
 @Component({
-  selector: 'app-pdf',
-  templateUrl: './pdf.component.html',
-  styleUrls: ['./pdf.component.scss']
+    selector: 'app-pdf',
+    templateUrl: './pdf.component.html',
+    styleUrls: ['./pdf.component.scss'],
+    standalone: false
 })
 export class PdfComponent implements OnInit {
   constructor(public config: FormioAppConfig) {}

src/app/forms/renderer/renderer.component.ts

@@ -2,9 +2,10 @@ import { Component, AfterViewInit } from '@angular/core';
 import { PrismService } from '../../Prism.service';
 
 @Component({
-  selector: 'app-renderer',
-  templateUrl: './renderer.component.html',
-  styleUrls: ['./renderer.component.scss']
+    selector: 'app-renderer',
+    templateUrl: './renderer.component.html',
+    styleUrls: ['./renderer.component.scss'],
+    standalone: false
 })
 export class RendererComponent implements AfterViewInit {
 

src/app/forms/simple/simple.component.ts

@@ -3,9 +3,10 @@ import { FormioAppConfig } from '@formio/angular';
 import { PrismService } from '../../Prism.service';
 
 @Component({
-  selector: 'app-simple',
-  templateUrl: './simple.component.html',
-  styleUrls: ['./simple.component.scss']
+    selector: 'app-simple',
+    templateUrl: './simple.component.html',
+    styleUrls: ['./simple.component.scss'],
+    standalone: false
 })
 export class SimpleComponent implements AfterViewInit {
   constructor(

src/app/forms/wizard/wizard.component.ts

@@ -3,9 +3,10 @@ import { FormioAppConfig } from '@formio/angular';
 import { PrismService } from '../../Prism.service';
 
 @Component({
-  selector: 'app-wizard',
-  templateUrl: './wizard.component.html',
-  styleUrls: ['./wizard.component.scss']
+    selector: 'app-wizard',
+    templateUrl: './wizard.component.html',
+    styleUrls: ['./wizard.component.scss'],
+    standalone: false
 })
 export class WizardComponent implements AfterViewInit {
   constructor(

src/app/home/home.component.ts

@@ -2,9 +2,10 @@ import { Component, AfterViewInit } from '@angular/core';
 import { FormioAppConfig } from '@formio/angular';
 import { PrismService } from '../Prism.service';
 @Component({
-  selector: 'app-home',
-  templateUrl: './home.component.html',
-  styleUrls: ['./home.component.scss']
+    selector: 'app-home',
+    templateUrl: './home.component.html',
+    styleUrls: ['./home.component.scss'],
+    standalone: false
 })
 export class HomeComponent implements AfterViewInit {
   constructor(

src/styles.scss

@@ -1,5 +1,4 @@
-@import "bootswatch/dist/cosmo/_variables.scss";
-@import "bootstrap/scss/bootstrap.scss";
-@import "bootswatch/dist/cosmo/_bootswatch.scss";
+@forward "bootswatch/dist/cosmo/_variables";
+@use "bootstrap/scss/bootstrap";
 $fa-font-path: '~font-awesome/fonts';
-@import 'font-awesome/scss/font-awesome';
+@forward 'font-awesome/scss/font-awesome';