gridstack · adumesny · Dec 9, 2024 · Dec 9, 2024
diff --git a/angular/README.md b/angular/README.md
@@ -29,14 +29,15 @@ CSS
 }
 ```
 
-Component Code
+
+Standalone Component Code
 
 ```ts
 import { GridStackOptions } from 'gridstack';
 import { GridstackComponent, GridstackItemComponent } from 'gridstack/dist/angular';
 
 @Component({
-  imports: [
+  imports: [ // SKIP if doing module import instead (next)
     GridstackComponent,
     GridstackItemComponent
   ]
@@ -56,6 +57,19 @@ export class MyComponent {
 }
 ```
 
+IF doing module import instead of standalone, you will also need this:
+
+```ts
+import { GridstackModule } from 'gridstack/dist/angular';
+
+@NgModule({
+  imports: [GridstackModule, ...]
+  ...
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+```
+
 # More Complete example
 
 In this example (build on previous one) will use your actual custom angular components inside each grid item (instead of dummy html content) and have per component saved settings as well (using BaseWidget).
@@ -95,16 +109,11 @@ export class AComponent extends BaseWidget implements OnDestroy {
 export class BComponent extends BaseWidget {
 }
 
-// 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]);
-    })
-  ]
-};
+// ...in your module (classic), OR your ng19 app.config provideEnvironmentInitializer call this:
+constructor() {
+  // register all our dynamic components types created by the grid
+  GridstackComponent.addComponentToSelectorType([AComponent, BComponent]) ;
+}
 
 // now our content will use Components instead of dummy html content
 public gridOptions: NgGridStackOptions = {
@@ -177,10 +186,11 @@ Code started shipping with v8.1.2+ in `dist/angular` for people to use directly
 ## Caveats
 
 - 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 and Standalone Components
+  - gridstack v8+ to run as it needs the latest changes (use older version that matches GS versions)
+  - <b>Angular 14+</b> for dynamic `createComponent()` API and Standalone Components (verified against 19+)
 
 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:
+NOTE2: now that we're using standalone, you will also need to remove `standalone: true` and `imports` on each component so you will to copy those locally (or use <11.1.2 version)
 ```ts
 protected resolver: ComponentFactoryResolver,
 ...

diff --git a/angular/angular.json b/angular/angular.json
@@ -42,15 +42,12 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": {
-              "base": "dist/demo"
-            },
+            "outputPath": "dist/demo",
             "index": "projects/demo/src/index.html",
-            "polyfills": [
-              "projects/demo/src/polyfills.ts"
-            ],
+            "main": "projects/demo/src/main.ts",
+            "polyfills": "projects/demo/src/polyfills.ts",
             "tsConfig": "projects/demo/tsconfig.app.json",
             "assets": [
               "projects/demo/src/favicon.ico",
@@ -61,8 +58,7 @@
               "node_modules/gridstack/dist/gridstack-extra.min.css",
               "projects/demo/src/styles.css"
             ],
-            "scripts": [],
-            "browser": "projects/demo/src/main.ts"
+            "scripts": []
           },
           "configurations": {
             "production": {
@@ -84,7 +80,9 @@
               "outputHashing": "all"
             },
             "development": {
+              "buildOptimizer": false,
               "optimization": false,
+              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
@@ -96,18 +94,18 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "buildTarget": "demo:build:production"
+              "browserTarget": "demo:build:production"
             },
             "development": {
-              "buildTarget": "demo:build:development"
+              "browserTarget": "demo:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "buildTarget": "demo:build"
+            "browserTarget": "demo:build"
           }
         },
         "test": {

diff --git a/angular/package.json b/angular/package.json
@@ -10,31 +10,31 @@
   },
   "private": true,
   "dependencies": {
-    "@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",
+    "@angular/animations": "^14",
+    "@angular/common": "^14",
+    "@angular/compiler": "^14",
+    "@angular/core": "^14",
+    "@angular/forms": "^14",
+    "@angular/platform-browser": "^14",
+    "@angular/platform-browser-dynamic": "^14",
+    "@angular/router": "^14",
     "gridstack": "^11.1.1",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.15.0"
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~19.0.0",
-    "@angular/cli": "~19.0.0",
-    "@angular/compiler-cli": "~19.0.0",
+    "@angular-devkit/build-angular": "^14",
+    "@angular/cli": "^14",
+    "@angular/compiler-cli": "^14",
     "@types/jasmine": "~4.0.0",
     "jasmine-core": "~4.3.0",
-    "karma": "~6.4.4",
+    "karma": "~6.4.0",
     "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": "~19.0.0",
-    "typescript": "~5.6.3"
+    "ng-packagr": "^14",
+    "typescript": "~4.7.2"
   }
 }
diff --git a/angular/projects/demo/.browserslistrc b/angular/projects/demo/.browserslistrc
@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR