angular upgrade v18 -> v19 (#2877)

* Update to Angular 19

* Run default standalone migration

* refactor to standalone components

* Undo control flow migration

---------

Co-authored-by: Alain Dumesny <[email protected]>

Author: andre-steudel

angular/README.md

@@ -29,32 +29,30 @@ CSS
 }
 ```
 
-in your module Code
-
-```ts
-import { GridstackModule } from 'gridstack/dist/angular';
-
-@NgModule({
-  imports: [GridstackModule, ...]
-  ...
-  bootstrap: [AppComponent]
-})
-export class AppModule { }
-```
-
 Component Code
 
 ```ts
 import { GridStackOptions } from 'gridstack';
+import { GridstackComponent, GridstackItemComponent } from 'gridstack/dist/angular';
 
-// sample grid options + items to load...
-public gridOptions: GridStackOptions = {
-  margin: 5,
-  children: [ // or call load()/addWidget() with same data
-    {x:0, y:0, minW:2, content:'Item 1'},
-    {x:1, y:0, content:'Item 2'},
-    {x:0, y:1, content:'Item 3'},
+@Component({
+  imports: [
+    GridstackComponent,
+    GridstackItemComponent
   ]
+  ...
+ })
+export class MyComponent {
+  // sample grid options + items to load...
+  public gridOptions: GridStackOptions = {
+    margin: 5,
+    children: [ // or call load()/addWidget() with same data
+      {x:0, y:0, minW:2, content:'Item 1'},
+      {x:1, y:0, content:'Item 2'},
+      {x:0, y:1, content:'Item 3'},
+    ]
+  }
+
 }
 ```
 
@@ -97,11 +95,16 @@ export class AComponent extends BaseWidget implements OnDestroy {
 export class BComponent extends BaseWidget {
 }
 
-// .... in your module for example
-constructor() {
-  // register all our dynamic components types created by the grid
-  GridstackComponent.addComponentToSelectorType([AComponent, BComponent]);
-}
+// in your app.config for example
+export const appConfig: ApplicationConfig = {
+  providers: [
+    ...
+    provideEnvironmentInitializer(() => {
+      // register all our dynamic components created in the grid
+      GridstackComponent.addComponentToSelectorType([AComponent, BComponent]);
+    })
+  ]
+};
 
 // now our content will use Components instead of dummy html content
 public gridOptions: NgGridStackOptions = {
@@ -175,7 +178,7 @@ Code started shipping with v8.1.2+ in `dist/angular` for people to use directly
 
 - This wrapper needs:
   - gridstack v8 to run as it needs the latest changes (use older version that matches GS versions)
-  - Angular 14+ for dynamic `createComponent()` API
+  - Angular 14+ for dynamic `createComponent()` API and Standalone Components
 
 NOTE: if you are on Angular 13 or below: copy the wrapper code over (or patch it - see main page example) and change `createComponent()` calls to use old API instead:
 ```ts

angular/package.json

@@ -10,31 +10,31 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~18.2.6",
-    "@angular/common": "~18.2.6",
-    "@angular/compiler": "~18.2.6",
-    "@angular/core": "~18.2.6",
-    "@angular/forms": "~18.2.6",
-    "@angular/platform-browser": "~18.2.6",
-    "@angular/platform-browser-dynamic": "~18.2.6",
-    "@angular/router": "~18.2.6",
+    "@angular/animations": "~19.0.0",
+    "@angular/common": "~19.0.0",
+    "@angular/compiler": "~19.0.0",
+    "@angular/core": "~19.0.0",
+    "@angular/forms": "~19.0.0",
+    "@angular/platform-browser": "~19.0.0",
+    "@angular/platform-browser-dynamic": "~19.0.0",
+    "@angular/router": "~19.0.0",
     "gridstack": "^11.1.1",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.14"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~18.2.6",
-    "@angular/cli": "~18.2.6",
-    "@angular/compiler-cli": "~18.2.6",
+    "@angular-devkit/build-angular": "~19.0.0",
+    "@angular/cli": "~19.0.0",
+    "@angular/compiler-cli": "~19.0.0",
     "@types/jasmine": "~4.0.0",
     "jasmine-core": "~4.3.0",
     "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.0.0",
-    "ng-packagr": "~18.2.1",
-    "typescript": "~5.4"
+    "ng-packagr": "~19.0.0",
+    "typescript": "~5.6.3"
   }
 }

angular/projects/demo/src/app/app.component.ts

@@ -6,14 +6,21 @@ import { AngularNgForCmdTestComponent } from './ngFor_cmd';
 
 // TEST: local testing of file
 // import { GridstackComponent, NgGridStackOptions, NgGridStackWidget, elementCB, gsCreateNgComponents, nodesCB } from './gridstack.component';
-import { GridstackComponent, NgGridStackOptions, NgGridStackWidget, elementCB, gsCreateNgComponents, nodesCB } from 'gridstack/dist/angular';
+import { GridstackComponent, GridstackItemComponent, NgGridStackOptions, NgGridStackWidget, elementCB, gsCreateNgComponents, nodesCB } from 'gridstack/dist/angular';
 
 // unique ids sets for each item for correct ngFor updating
 let ids = 1;
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
+  imports: [
+    AngularSimpleComponent,
+    AngularNgForTestComponent,
+    AngularNgForCmdTestComponent,
+    GridstackComponent,
+    GridstackItemComponent
+  ]
 })
 export class AppComponent implements OnInit {
 

angular/projects/demo/src/app/app.config.ts

@@ -0,0 +1,15 @@
+import { ApplicationConfig, provideEnvironmentInitializer } from '@angular/core';
+
+// TEST local testing
+// import { GridstackComponent } from './gridstack.component';
+import { GridstackComponent } from 'gridstack/dist/angular';
+import { AComponent, BComponent, CComponent, NComponent } from './dummy.component';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideEnvironmentInitializer(() => {
+      // register all our dynamic components created in the grid
+      GridstackComponent.addComponentToSelectorType([AComponent, BComponent, CComponent, NComponent]);
+    })
+  ]
+};

angular/projects/demo/src/app/app.module.ts

@@ -14,7 +14,7 @@ import { BaseWidget, NgCompInputs } from 'gridstack/dist/angular';
 
 @Component({
   selector: 'app-a',
-  template: 'Comp A {{text}}',
+  template: 'Comp A {{text}}'
 })
 export class AComponent extends BaseWidget implements OnDestroy {
   @Input() text: string = 'foo'; // test custom input data
@@ -25,7 +25,7 @@ export class AComponent extends BaseWidget implements OnDestroy {
 
 @Component({
   selector: 'app-b',
-  template: 'Comp B',
+  template: 'Comp B'
 })
 export class BComponent extends BaseWidget implements OnDestroy {
   constructor() { super(); console.log('Comp B created'); }
@@ -34,7 +34,7 @@ export class BComponent extends BaseWidget implements OnDestroy {
 
 @Component({
   selector: 'app-c',
-  template: 'Comp C',
+  template: 'Comp C'
 })
 export class CComponent extends BaseWidget implements OnDestroy {
   ngOnDestroy() { console.log('Comp C destroyed'); }
@@ -51,7 +51,7 @@ export class CComponent extends BaseWidget implements OnDestroy {
   styles: [`
     :host { height: 100%; display: flex; flex-direction: column; }
     ::ng-deep .grid-stack.grid-stack-nested { flex: 1; }
-  `],
+  `]
 })
 export class NComponent extends BaseWidget implements OnDestroy {
   /** this is where the dynamic nested grid will be hosted. gsCreateNgComponents() looks for 'container' like GridstackItemComponent */

angular/projects/demo/src/app/dummy.component.ts

@@ -1,12 +1,12 @@
 import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
 import { environment } from './environments/environment';
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));

angular/projects/demo/src/main.ts

@@ -5,6 +5,7 @@
 
 import { AfterContentInit, Component, ContentChildren, ElementRef, EventEmitter, Input,
   OnDestroy, OnInit, Output, QueryList, Type, ViewChild, ViewContainerRef, reflectComponentType, ComponentRef } from '@angular/core';
+import { NgIf } from '@angular/common';
 import { Subscription } from 'rxjs';
 import { GridHTMLElement, GridItemHTMLElement, GridStack, GridStackNode, GridStackOptions, GridStackWidget } from 'gridstack';
 
@@ -60,6 +61,7 @@ export type SelectorToType = {[key: string]: Type<Object>};
   styles: [`
     :host { display: block; }
   `],
+  imports: [NgIf]
   // changeDetection: ChangeDetectionStrategy.OnPush, // IFF you want to optimize and control when ChangeDetection needs to happen...
 })
 export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
@@ -130,6 +132,13 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
     // protected readonly cd: ChangeDetectorRef,
     protected readonly elementRef: ElementRef<GridCompHTMLElement>,
   ) {
+    // set globally our method to create the right widget type
+    if (!GridStack.addRemoveCB) {
+      GridStack.addRemoveCB = gsCreateNgComponents;
+    }
+    if (!GridStack.saveCB) {
+      GridStack.saveCB = gsSaveAdditionalNgInfo;
+    }
     this.el._gridComp = this;
   }
 

angular/projects/lib/src/lib/gridstack.component.ts

@@ -4,17 +4,13 @@
  */
 
 import { NgModule } from "@angular/core";
-import { CommonModule } from '@angular/common';
 
-import { GridStack } from "gridstack";
-import { GridstackComponent, gsCreateNgComponents, gsSaveAdditionalNgInfo } from "./gridstack.component";
+import { GridstackComponent } from "./gridstack.component";
 import { GridstackItemComponent } from "./gridstack-item.component";
 
+// @deprecated use GridstackComponent and GridstackItemComponent as standalone components
 @NgModule({
   imports: [
-    CommonModule,
-  ],
-  declarations: [
     GridstackComponent,
     GridstackItemComponent,
   ],
@@ -23,10 +19,4 @@ import { GridstackItemComponent } from "./gridstack-item.component";
     GridstackItemComponent,
   ],
 })
-export class GridstackModule {
-  constructor() {
-    // set globally our method to create the right widget type
-    GridStack.addRemoveCB = gsCreateNgComponents;
-    GridStack.saveCB = gsSaveAdditionalNgInfo;
-  }
-}
+export class GridstackModule {}