Skip to content

Commit 4f6e156

Browse files
NathanWalkerNathanWalker
authored
feat: Angular 18 support (#134)
1 parent 990ba78 commit 4f6e156

File tree

15 files changed

+2029
-2832
lines changed

15 files changed

+2029
-2832
lines changed

‎apps/nativescript-demo-ng/project.json‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"sourceRoot": "apps/nativescript-demo-ng/src",
55
"projectType": "application",
66
"prefix": "nativescript",
7+
"tags": [],
78
"generators": {
89
"@schematics/angular:component": {
910
"styleext": "scss"
@@ -65,10 +66,7 @@
6566
}
6667
},
6768
"lint": {
68-
"executor": "@nx/eslint:lint",
69-
"options": {
70-
"lintFilePatterns": ["apps/nativescript-demo-ng/**/*.ts", "apps/nativescript-demo-ng/src/**/*.html"]
71-
}
69+
"executor": "@nx/eslint:lint"
7270
},
7371
"test": {
7472
"executor": "@nativescript/nx:test",
@@ -85,6 +83,5 @@
8583
}
8684
}
8785
}
88-
},
89-
"tags": []
86+
}
9087
}

‎apps/nativescript-demo-ng/src/app/item/item.service.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ import { Item } from './item';
77
})
88
export class ItemService {
99
private items = new Array<Item>(
10-
{ id: 1, name: 'The', role: 'Goalkeeper' },
11-
{ id: 3, name: 'JavaScript', role: 'Defender' },
12-
{ id: 4, name: 'Ecosystem', role: 'Midfielder' },
13-
{ id: 5, name: 'Is', role: 'Midfielder' },
14-
{ id: 6, name: 'For', role: 'Midfielder' },
15-
{ id: 7, name: 'Everyone.', role: 'Midfielder' },
16-
{ id: 8, name: 'Welcome beginners,', role: 'Midfielder' },
10+
{ id: 1, name: 'Minko Gechev', role: 'Goalkeeper' },
11+
{ id: 3, name: 'Pawel Kozlowski', role: 'Defender' },
12+
{ id: 4, name: 'Alex Rickabaugh', role: 'Midfielder' },
13+
{ id: 5, name: 'Jessica Janiuk', role: 'Midfielder' },
14+
{ id: 6, name: 'Emma Twersky', role: 'Midfielder' },
15+
{ id: 7, name: 'Joey Perrott', role: 'Midfielder' },
16+
{ id: 8, name: 'Dylan Hunn', role: 'Midfielder' },
1717
{ id: 9, name: 'intermediate,', role: 'Forward' },
1818
{ id: 10, name: 'and advanced programmers.', role: 'Forward' },
1919
{ id: 11, name: 'Celebrate web tech', role: 'Forward' },

‎apps/nativescript-demo-ng/src/app/item/items.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { ModalDialogService, NativeDialogService } from '@nativescript/angular';
1212
templateUrl: './items.component.html',
1313
})
1414
export class ItemsComponent implements OnInit {
15-
message = 'Hello Angular 17!';
15+
message = 'Hello Angular 18!';
1616
items: Array<Item>;
1717

1818
constructor(private itemService: ItemService, private nativeDialog: NativeDialogService, private modalDialog: ModalDialogService, private http: HttpClient) {}

‎apps/nativescript-demo-ng/src/app/item3/items.component.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@
2626
<StackLayout row="0" padding="10">
2727
<Label [text]="message" class="h1 text-center c-light-blue"></Label>
2828
<Image src="~/assets/angular.png" horizontalAlignment="center" width="200" verticalAlignment="top" marginBottom="10"></Image>
29-
<Button (tap)="openModal()" text="Taste the Rainbow 🌈" [borderRadius]="borderRadius" [fontSize]="fontSize" backgroundColor="#00d2ff" color="#fff" margin="0" width="100%" fontWeight="bold" height="50"></Button>
29+
<!-- <Button (tap)="openModal()" text="Taste the Rainbow 🌈" [borderRadius]="borderRadius" [fontSize]="fontSize" backgroundColor="#00d2ff" color="#fff" margin="0" width="100%" fontWeight="bold" height="50"></Button> -->
30+
<Button (tap)="openModal()" text="Open Modal" [borderRadius]="borderRadius" [fontSize]="fontSize" backgroundColor="#00d2ff" color="#fff" margin="0" width="100%" fontWeight="bold" height="50"></Button>
3031
<Button (tap)="fetchTodos()" text="Make a native Http networking request" [borderRadius]="borderRadius" [fontSize]="fontSize" padding="0" backgroundColor="#00d2ff" color="#fff" marginTop="10" width="100%" fontWeight="bold" height="50"></Button>
3132
</StackLayout>
3233
<ListView row="1" [items]="items" class="list-group" backgroundColor="#efefef">

‎apps/nativescript-demo-ng/src/app/item3/items.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { ModalDialogService, NativeDialogService } from '@nativescript/angular';
1212
templateUrl: './items.component.html',
1313
})
1414
export class ItemsComponent implements OnInit {
15-
message = 'Hello Angular 17';
15+
message = 'Hello Angular 18';
1616
items: Array<Item>;
1717
borderRadius: number;
1818
fontSize: number;

‎apps/nativescript-demo-ng/src/app/modal/modal.component.html‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
<GridLayout [backgroundColor]="color" rows="*,auto,auto" padding="20" width="100%" height="100%">
2-
<Image [src]="logo" stretch="aspectFit" width="200" marginTop="50" />
1+
<GridLayout [backgroundColor]="'#d63681'" rows="*,auto,auto" padding="0" width="100%" height="100%">
2+
<!-- <Image [src]="logo" stretch="aspectFit" width="200" marginTop="50" /> -->
3+
<Image src="~/assets/ng-18.png" stretch="aspectFit" width="100%" marginTop="0" (loaded)="loadedImg($event)" />
34

4-
@if (this.itemService.currentFlavor + 1 !== this.itemService.flavors.length) {
5+
<!-- @if (this.itemService.currentFlavor + 1 !== this.itemService.flavors.length) {
56
<Button row="1" (tap)="openNewModal()" text="Taste Another" fontSize="20" borderRadius="25"></Button>
6-
}
7+
} -->
78
<Button row="2" [nativeDialogClose]="'thanks for clicking modal ' + id" text="Close" fontSize="20" marginTop="30" borderRadius="25"></Button>
89
</GridLayout>

‎apps/nativescript-demo-ng/src/app/modal/modal.component.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Component, OnDestroy, OnInit, Optional, ViewContainerRef, inject } from '@angular/core';
22
import { ModalDialogService, NativeDialogRef, NativeDialogService } from '@nativescript/angular';
33
import { ItemService } from '../item/item.service';
4+
import { View } from '@nativescript/core';
45

56
@Component({
67
selector: 'ns-modal',
@@ -40,4 +41,20 @@ export class ModalComponent implements OnInit, OnDestroy {
4041
ngOnDestroy() {
4142
console.log('modal destroy');
4243
}
44+
45+
img: View;
46+
loadedImg(args) {
47+
this.img = args.object as View;
48+
const scaleImage = (up: boolean) => {
49+
this.img.animate({
50+
scale: { x: up ? 1.5 : 1.0, y: up ? 1.5 : 1.0},
51+
translate: { x: up ? -100 : 0, y: 0},
52+
duration: 1000,
53+
54+
}).then(() => {
55+
scaleImage(up ? false : true);
56+
})
57+
}
58+
scaleImage(true);
59+
}
4360
}

‎apps/nativescript-demo-ng/src/assets/ng-18.png‎

129 KB
Loading

‎nx.json‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
11
{
2-
"affected": {
3-
"defaultBase": "main"
4-
},
52
"tasksRunnerOptions": {
63
"default": {
74
"options": {
@@ -25,10 +22,6 @@
2522
"inputs": ["default", "^production", "{workspaceRoot}/jest.preset.js"],
2623
"cache": true
2724
},
28-
"lint": {
29-
"inputs": ["default", "{workspaceRoot}/.eslintrc.json"],
30-
"cache": true
31-
},
3225
"@nx/jest:jest": {
3326
"inputs": ["default", "^production", "{workspaceRoot}/jest.preset.js"],
3427
"cache": true,
@@ -41,6 +34,10 @@
4134
"codeCoverage": true
4235
}
4336
}
37+
},
38+
"@nx/eslint:lint": {
39+
"inputs": ["default", "{workspaceRoot}/.eslintrc.json"],
40+
"cache": true
4441
}
4542
},
4643
"namedInputs": {
@@ -50,5 +47,7 @@
5047
},
5148
"useDaemonProcess": false,
5249
"nxCloudAccessToken": "NWJjY2UzMjctM2Q2Yy00ODZlLWExYjktNzE3YTRmMzRmMWQwfHJlYWQ=",
53-
"parallel": 2
50+
"parallel": 2,
51+
"useInferencePlugins": false,
52+
"defaultBase": "main"
5453
}

‎package.json‎

Lines changed: 44 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -35,55 +35,52 @@
3535
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
3636
},
3737
"dependencies": {
38-
"@angular/animations": "17.3.8",
39-
"@angular/common": "17.3.8",
40-
"@angular/compiler": "17.3.8",
41-
"@angular/core": "17.3.8",
42-
"@angular/forms": "17.3.8",
43-
"@angular/platform-browser": "17.3.8",
44-
"@angular/platform-browser-dynamic": "17.3.8",
45-
"@angular/router": "17.3.8",
38+
"@angular/animations": "~18.0.0",
39+
"@angular/common": "~18.0.0",
40+
"@angular/compiler": "~18.0.0",
41+
"@angular/core": "~18.0.0",
42+
"@angular/forms": "~18.0.0",
43+
"@angular/platform-browser": "~18.0.0",
44+
"@angular/platform-browser-dynamic": "~18.0.0",
45+
"@angular/router": "~18.0.0",
4646
"@nativescript/core": "~8.7.0",
4747
"@nativescript/theme": "~3.0.2",
4848
"@ngx-translate/core": "~15.0.0",
49-
"nativescript-fonticon": "~8.1.0",
49+
"nativescript-fonticon": "~5.2.0",
5050
"rxjs": "^7.8.0",
51-
"zone.js": "0.14.2"
51+
"zone.js": "~0.14.6"
5252
},
5353
"devDependencies": {
54-
"@angular-devkit/build-angular": "17.3.7",
55-
"@angular-devkit/core": "17.3.7",
56-
"@angular-devkit/schematics": "17.3.7",
57-
"@angular-eslint/eslint-plugin": "17.4.0",
58-
"@angular-eslint/eslint-plugin-template": "17.4.0",
59-
"@angular-eslint/template-parser": "17.4.0",
60-
"@angular/compiler-cli": "17.3.8",
54+
"@angular-devkit/build-angular": "~18.0.0",
55+
"@angular-devkit/core": "~18.0.0",
56+
"@angular-devkit/schematics": "~18.0.0",
57+
"@angular-eslint/eslint-plugin": "17.5.0",
58+
"@angular-eslint/eslint-plugin-template": "17.5.0",
59+
"@angular-eslint/template-parser": "17.5.0",
60+
"@angular/compiler-cli": "~18.0.0",
6161
"@jsdevtools/coverage-istanbul-loader": "3.0.5",
62+
"@nativescript/nx": "~18.0.0",
6263
"@nativescript/types": "~8.7.0",
6364
"@nativescript/unit-test-runner": "^3.0.4",
6465
"@nativescript/webpack": "~5.0.21",
65-
"@ngtools/webpack": "17.3.7",
66-
"@nstudio/angular": "17.0.1",
67-
"@nstudio/nativescript": "17.0.1",
68-
"@nstudio/nativescript-angular": "17.0.1",
69-
"@nstudio/xplat": "17.0.1",
70-
"@nx/angular": "17.1.3",
71-
"@nx/eslint": "17.1.3",
72-
"@nx/eslint-plugin": "17.1.3",
73-
"@nx/jest": "17.1.3",
74-
"@nx/js": "17.1.3",
75-
"@nx/node": "17.1.3",
76-
"@nx/workspace": "17.1.3",
77-
"@schematics/angular": "17.0.0",
66+
"@ngtools/webpack": "~18.0.0",
67+
"@nx/angular": "19.0.6",
68+
"@nx/eslint": "19.0.6",
69+
"@nx/eslint-plugin": "19.0.6",
70+
"@nx/jest": "19.0.6",
71+
"@nx/js": "19.0.6",
72+
"@nx/node": "19.0.6",
73+
"@nx/workspace": "19.0.6",
74+
"@schematics/angular": "~18.0.0",
7875
"@types/jasmine": "5.1.1",
7976
"@types/jest": "29.5.7",
8077
"@types/node": "^20.0.0",
8178
"@types/sinon": "^17.0.0",
82-
"@typescript-eslint/eslint-plugin": "6.10.0",
83-
"@typescript-eslint/parser": "6.10.0",
79+
"@typescript-eslint/eslint-plugin": "7.9.0",
80+
"@typescript-eslint/parser": "7.9.0",
8481
"conventional-changelog-cli": "^4.1.0",
8582
"dotenv": "16.3.1",
86-
"eslint": "8.53.0",
83+
"eslint": "8.57.0",
8784
"eslint-config-prettier": "9.0.0",
8885
"fs-extra": "^11.1.0",
8986
"husky": "~9.0.0",
@@ -96,21 +93,31 @@
9693
"karma-nativescript-launcher": "0.4.0",
9794
"karma-sinon": "^1.0.5",
9895
"lint-staged": "^15.0.0",
99-
"ng-packagr": "17.3.0",
100-
"nx": "17.1.3",
96+
"ng-packagr": "~18.0.0",
97+
"nx": "19.0.6",
10198
"nyc": "15.1.0",
10299
"postcss": "^8.4.16",
103100
"postcss-import": "15.1.0",
104101
"postcss-preset-env": "9.3.0",
105102
"postcss-url": "10.1.3",
106-
"prettier": "3.0.3",
103+
"prettier": "~3.2.0",
107104
"sass": "^1.54.5",
108105
"sinon": "^17.0.0",
109106
"ts-jest": "29.1.1",
110-
"ts-node": "10.9.1",
107+
"ts-node": "10.9.2",
111108
"tslib": "^2.6.0",
112109
"typescript": "~5.4.0"
113110
},
111+
"resolutions": {
112+
"@nx/angular": "19.0.6",
113+
"@nx/devkit": "19.0.6",
114+
"@nx/eslint": "19.0.6",
115+
"@nx/eslint-plugin": "19.0.6",
116+
"@nx/jest": "19.0.6",
117+
"@nx/js": "19.0.6",
118+
"@nx/node": "19.0.6",
119+
"@nx/workspace": "19.0.6"
120+
},
114121
"xplat": {
115122
"prefix": "nativescript",
116123
"framework": "angular"

0 commit comments

Comments
 (0)