Angular 18 upgrade

package.json

@@ -7,70 +7,61 @@
     "build": "run-s flo:build demo:build",
     "test": "run-p flo:test demo:test",
     "test-coverage": "run-p flo:test-coverage demo:test-coverage",
-
     "flo:build": "ng build spring-flo && npm run flo:styles",
     "flo:styles": "scss-bundle --entryFile projects/flo/styles.scss --outFile dist/flo/flo.css",
     "flo:watch": "ng build spring-flo --watch --configuration development",
     "flo:test": "ng test spring-flo",
     "flo:test-coverage": "ng test spring-flo --no-watch --code-coverage",
-
     "demo:start-waiton": "wait-on dist/flo/package.json && npm run demo:start",
     "demo:start": "ng serve demo",
     "demo:build": "ng build demo",
     "demo:watch": "ng build demo --watch --configuration development",
     "demo:test": "ng test demo",
     "demo:test-coverage": "ng test demo --no-watch --code-coverage",
-
     "clean": "rimraf dist"
   },
   "private": true,
   "dependencies": {
+    "@angular-devkit/build-angular": "~18.2.12",
+    "@angular/animations": "~18.2.13",
+    "@angular/common": "~18.2.13",
+    "@angular/compiler": "~18.2.13",
+    "@angular/compiler-cli": "~18.2.13",
+    "@angular/core": "~18.2.13",
+    "@angular/forms": "~18.2.13",
+    "@angular/platform-browser": "~18.2.13",
+    "@angular/platform-browser-dynamic": "~18.2.13",
+    "@angular/router": "~18.2.13",
+    "@types/backbone": "1.3.42",
+    "@types/codemirror": "0.0.64",
+    "@types/jasmine": "~3.10.0",
+    "@types/jquery": "3.5.4",
+    "@types/lodash": "^4.14.191",
+    "@types/node": "^12.11.1",
+    "@types/resize-observer-browser": "^0.1.3",
     "codemirror": "5.65.12",
     "jointjs": "3.4.2",
     "jquery": "^3.6.3",
     "lodash": "^4.17.21",
-    "ts-disposables": "2.2.3",
-
-    "@angular-devkit/build-angular": "~15.2.9",
-    "@angular/cli": "~15.2.9",
-    "@angular/compiler-cli": "~15.2.9",
-
-    "@angular/animations": "~15.2.9",
-    "@angular/common": "~15.2.9",
-    "@angular/compiler": "~15.2.9",
-    "@angular/core": "~15.2.9",
-    "@angular/forms": "~15.2.9",
-    "@angular/platform-browser": "~15.2.9",
-    "@angular/platform-browser-dynamic": "~15.2.9",
-    "@angular/router": "~15.2.9",
-    "ng-packagr": "^15.0.1",
+    "ng-packagr": "^18.2.1",
     "rxjs": "~7.8.0",
-
-    "@types/resize-observer-browser": "^0.1.3",
-    "@types/jasmine": "~3.10.0",
-    "@types/node": "^12.11.1",
-    "@types/backbone": "1.3.42",
-    "@types/codemirror": "0.0.64",
-    "@types/jquery": "3.5.4",
-    "@types/lodash": "^4.14.191",
-
     "scss-bundle": "^3.1.2",
-    "typescript": "~4.8.0",
+    "ts-disposables": "2.2.3",
     "tslib": "^2.5.0",
-    "zone.js": "~0.11.4"
+    "typescript": "~5.4.5",
+    "zone.js": "~0.14.10"
   },
-
   "devDependencies": {
+    "@angular/cli": "~18.2.12",
     "jasmine-core": "~4.0.0",
     "karma": "~6.3.0",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.1.0",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "~1.7.0",
-    "ngx-bootstrap": "^10.3.0",
+    "ngx-bootstrap": "^18.1.3",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
     "wait-on": "^6.0.1"
   }
-
 }

projects/demo/app/app.component.ts

@@ -12,6 +12,7 @@ import 'codemirror/mode/clike/clike';
 import 'codemirror/addon/lint/javascript-lint';
 import {PropertiesEditorService} from './properties-editor.service';
 import {dia} from 'jointjs';
+import {setTheme} from "ngx-bootstrap/utils";
 
 @Component({
   selector: 'demo-app',
@@ -36,6 +37,7 @@ export class AppComponent {
     this.renderer = new Renderer();
     this.editor = new Editor(propertiesEditor);
     this.dsl = '';
+    setTheme('bs5'); // or 'bs4'
   }
 
   arrangeAll() {

projects/demo/app/app.module.ts

@@ -10,7 +10,6 @@ import { AppComponent }  from './app.component';
 @NgModule({
   imports:      [ BrowserModule, FormsModule, FloModule, ModalModule.forRoot() ],
   declarations: [ AppComponent, PropertiesDialogComponent ],
-  entryComponents: [ PropertiesDialogComponent ],
   bootstrap:    [ AppComponent ]
 })
 export class AppModule { }

projects/demo/app/properties.dialog.component.ts

@@ -9,7 +9,8 @@ import { FormGroup } from '@angular/forms';
 @Component({
   selector: 'properties-dialog-content',
   templateUrl: './properties.dialog.component.html',
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: false
 })
 export class PropertiesDialogComponent {
 

projects/demo/polyfills.ts

@@ -37,7 +37,7 @@
 /***************************************************************************************************
  * Zone JS is required by Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
+import 'zone.js';  // Included with Angular CLI.
 
 
 

tsconfig.json

@@ -14,7 +14,6 @@
     "declaration": true,
     "experimentalDecorators": true,
     "noImplicitAny": true,
-    "suppressImplicitAnyIndexErrors": true,
     "skipLibCheck": true,
     "stripInternal": true,
     "target": "ES2022",
@@ -27,6 +26,6 @@
     "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
-    "strictTemplates": true
+    "strictTemplates": false
   }
 }