Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 5b0c5e5

Browse files
adumesnyadumesny
authored
Merge pull request gridstack#2889 from adumesny/master
angular downgrade v19 - v14
2 parents 503940d + 078b08a commit 5b0c5e5

17 files changed

+4058
-4451
lines changed

‎angular/README.md

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,15 @@ CSS
2929
}
3030
```
3131

32-
Component Code
32+
33+
Standalone Component Code
3334

3435
```ts
3536
import { GridStackOptions } from 'gridstack';
3637
import { GridstackComponent, GridstackItemComponent } from 'gridstack/dist/angular';
3738

3839
@Component({
39-
imports: [
40+
imports: [ // SKIP if doing module import instead (next)
4041
GridstackComponent,
4142
GridstackItemComponent
4243
]
@@ -56,6 +57,19 @@ export class MyComponent {
5657
}
5758
```
5859

60+
IF doing module import instead of standalone, you will also need this:
61+
62+
```ts
63+
import { GridstackModule } from 'gridstack/dist/angular';
64+
65+
@NgModule({
66+
imports: [GridstackModule, ...]
67+
...
68+
bootstrap: [AppComponent]
69+
})
70+
export class AppModule { }
71+
```
72+
5973
# More Complete example
6074

6175
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 {
95109
export class BComponent extends BaseWidget {
96110
}
97111

98-
// in your app.config for example
99-
export const appConfig: ApplicationConfig = {
100-
providers: [
101-
...
102-
provideEnvironmentInitializer(() => {
103-
// register all our dynamic components created in the grid
104-
GridstackComponent.addComponentToSelectorType([AComponent, BComponent]);
105-
})
106-
]
107-
};
112+
// ...in your module (classic), OR your ng19 app.config provideEnvironmentInitializer call this:
113+
constructor() {
114+
// register all our dynamic components types created by the grid
115+
GridstackComponent.addComponentToSelectorType([AComponent, BComponent]) ;
116+
}
108117

109118
// now our content will use Components instead of dummy html content
110119
public gridOptions: NgGridStackOptions = {
@@ -177,10 +186,11 @@ Code started shipping with v8.1.2+ in `dist/angular` for people to use directly
177186
## Caveats
178187

179188
- This wrapper needs:
180-
- gridstack v8 to run as it needs the latest changes (use older version that matches GS versions)
181-
- Angular 14+ for dynamic `createComponent()` API and Standalone Components
189+
- gridstack v8+ to run as it needs the latest changes (use older version that matches GS versions)
190+
- <b>Angular 14+</b> for dynamic `createComponent()` API and Standalone Components (verified against 19+)
182191

183192
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:
193+
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)
184194
```ts
185195
protected resolver: ComponentFactoryResolver,
186196
...

‎angular/angular.json

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -42,15 +42,12 @@
4242
"prefix": "app",
4343
"architect": {
4444
"build": {
45-
"builder": "@angular-devkit/build-angular:application",
45+
"builder": "@angular-devkit/build-angular:browser",
4646
"options": {
47-
"outputPath": {
48-
"base": "dist/demo"
49-
},
47+
"outputPath": "dist/demo",
5048
"index": "projects/demo/src/index.html",
51-
"polyfills": [
52-
"projects/demo/src/polyfills.ts"
53-
],
49+
"main": "projects/demo/src/main.ts",
50+
"polyfills": "projects/demo/src/polyfills.ts",
5451
"tsConfig": "projects/demo/tsconfig.app.json",
5552
"assets": [
5653
"projects/demo/src/favicon.ico",
@@ -61,8 +58,7 @@
6158
"node_modules/gridstack/dist/gridstack-extra.min.css",
6259
"projects/demo/src/styles.css"
6360
],
64-
"scripts": [],
65-
"browser": "projects/demo/src/main.ts"
61+
"scripts": []
6662
},
6763
"configurations": {
6864
"production": {
@@ -84,7 +80,9 @@
8480
"outputHashing": "all"
8581
},
8682
"development": {
83+
"buildOptimizer": false,
8784
"optimization": false,
85+
"vendorChunk": true,
8886
"extractLicenses": false,
8987
"sourceMap": true,
9088
"namedChunks": true
@@ -96,18 +94,18 @@
9694
"builder": "@angular-devkit/build-angular:dev-server",
9795
"configurations": {
9896
"production": {
99-
"buildTarget": "demo:build:production"
97+
"browserTarget": "demo:build:production"
10098
},
10199
"development": {
102-
"buildTarget": "demo:build:development"
100+
"browserTarget": "demo:build:development"
103101
}
104102
},
105103
"defaultConfiguration": "development"
106104
},
107105
"extract-i18n": {
108106
"builder": "@angular-devkit/build-angular:extract-i18n",
109107
"options": {
110-
"buildTarget": "demo:build"
108+
"browserTarget": "demo:build"
111109
}
112110
},
113111
"test": {

‎angular/package.json

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,31 +10,31 @@
1010
},
1111
"private": true,
1212
"dependencies": {
13-
"@angular/animations": "~19.0.0",
14-
"@angular/common": "~19.0.0",
15-
"@angular/compiler": "~19.0.0",
16-
"@angular/core": "~19.0.0",
17-
"@angular/forms": "~19.0.0",
18-
"@angular/platform-browser": "~19.0.0",
19-
"@angular/platform-browser-dynamic": "~19.0.0",
20-
"@angular/router": "~19.0.0",
13+
"@angular/animations": "^14",
14+
"@angular/common": "^14",
15+
"@angular/compiler": "^14",
16+
"@angular/core": "^14",
17+
"@angular/forms": "^14",
18+
"@angular/platform-browser": "^14",
19+
"@angular/platform-browser-dynamic": "^14",
20+
"@angular/router": "^14",
2121
"gridstack": "^11.1.1",
2222
"rxjs": "~7.5.0",
2323
"tslib": "^2.3.0",
24-
"zone.js": "~0.15.0"
24+
"zone.js": "~0.11.4"
2525
},
2626
"devDependencies": {
27-
"@angular-devkit/build-angular": "~19.0.0",
28-
"@angular/cli": "~19.0.0",
29-
"@angular/compiler-cli": "~19.0.0",
27+
"@angular-devkit/build-angular": "^14",
28+
"@angular/cli": "^14",
29+
"@angular/compiler-cli": "^14",
3030
"@types/jasmine": "~4.0.0",
3131
"jasmine-core": "~4.3.0",
32-
"karma": "~6.4.4",
32+
"karma": "~6.4.0",
3333
"karma-chrome-launcher": "~3.1.0",
3434
"karma-coverage": "~2.2.0",
3535
"karma-jasmine": "~5.1.0",
3636
"karma-jasmine-html-reporter": "~2.0.0",
37-
"ng-packagr": "~19.0.0",
38-
"typescript": "~5.6.3"
37+
"ng-packagr": "^14",
38+
"typescript": "~4.7.2"
3939
}
4040
}

‎angular/projects/demo/.browserslistrc

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
2+
# For additional information regarding the format and rule options, please see:
3+
# https://github.com/browserslist/browserslist#queries
4+
5+
# For the full list of supported browsers by the Angular framework, please see:
6+
# https://angular.io/guide/browser-support
7+
8+
# You can see what browsers were selected by your queries by running:
9+
# npx browserslist
10+
11+
last 1 Chrome version
12+
last 1 Firefox version
13+
last 2 Edge major versions
14+
last 2 Safari major versions
15+
last 2 iOS major versions
16+
Firefox ESR

0 commit comments

Comments
 (0)