Skip to content

Commit 308b3b5

Browse files
NathanWalkerNathanWalker
authored
feat: Angular 17 support (#124)
1 parent 1e5e864 commit 308b3b5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+5718
-6679
lines changed

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,3 +46,5 @@ Thumbs.db
4646

4747
.angular
4848
/.env
49+
50+
.nx/cache

‎.prettierignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,5 @@
1717
**/apps/*nativescript/tools/**/*
1818
**/apps/*nativescript/src/assets/*.css
1919
**/xplat/nativescript/scss/fonticons/*.css
20-
**/xplat/nativescript*/plugins/**/*
20+
**/xplat/nativescript*/plugins/**/*
21+
/.nx/cache

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,9 @@
2424
"prefix": "",
2525
"style": "kebab-case"
2626
}
27-
]
27+
],
28+
"@typescript-eslint/no-explicit-any": "warn",
29+
"@typescript-eslint/no-unused-vars": "warn"
2830
}
2931
},
3032
{

‎apps/nativescript-demo-ng/App_Resources/Android/src/main/res/values/colors.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<?xml version="1.0" encoding="utf-8"?>
22
<resources>
33
<color name="ns_primary">#F5F5F5</color>
4-
<color name="ns_primaryDark">#757575</color>
4+
<color name="ns_primaryDark">#a6120d</color>
55
<color name="ns_accent">#33B5E5</color>
66
<color name="ns_blue">#272734</color>
77
</resources>

‎apps/nativescript-demo-ng/nativescript.config.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default {
1111
discardUncaughtJsExceptions: true,
1212
},
1313
ios: {
14-
discardUncaughtJsExceptions: true,
14+
discardUncaughtJsExceptions: false,
1515
},
1616
appPath: 'src',
1717
cli: {

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

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,13 @@
22
"name": "demong",
33
"main": "./src/main.ts",
44
"description": "NativeScript Application",
5-
"scripts": {
6-
"postinstall": "node ./tools/xplat-postinstall.js"
7-
},
85
"dependencies": {
96
"@nativescript/core": "file:../../node_modules/@nativescript/core",
10-
"@nativescript-community/ui-material-bottom-navigation": "^7.1.3"
7+
"@nativescript-community/ui-material-bottom-navigation": "^7.2.0"
118
},
129
"devDependencies": {
13-
"@nativescript/android": "~8.5.0",
14-
"@nativescript/ios": "~8.5.0",
10+
"@nativescript/android": "~8.6.0",
11+
"@nativescript/ios": "~8.6.0",
1512
"@nativescript/unit-test-runner": "^3.0.1"
1613
}
1714
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565
}
6666
},
6767
"lint": {
68-
"executor": "@nx/linter:eslint",
68+
"executor": "@nx/eslint:lint",
6969
"options": {
7070
"lintFilePatterns": ["apps/nativescript-demo-ng/**/*.ts", "apps/nativescript-demo-ng/src/**/*.html"]
7171
}

‎apps/nativescript-demo-ng/references.d.ts

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,2 @@
11
/* eslint-disable @typescript-eslint/triple-slash-reference */
2-
/// <reference path="../../node_modules/@nativescript/types-ios/index.d.ts" />
3-
/// <reference path="../../node_modules/@nativescript/types-android/lib/android-29.d.ts" />
4-
5-
declare namespace NodeJS {
6-
interface Global {
7-
__runtimeVersion: any;
8-
TNS_ENV: string;
9-
}
10-
}
2+
/// <reference path="../../references.d.ts" />

‎apps/nativescript-demo-ng/src/app.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,17 @@ refer to http://docs.nativescript.org/ui/theme.
1212
@import '@nativescript/theme/css/core.css';
1313
@import '@nativescript/theme/css/default.css';
1414

15+
Button {
16+
border: 0;
17+
background-color: transparent;
18+
text-transform: none;
19+
min-width: 0;
20+
min-height: 0;
21+
android-elevation: 0;
22+
android-dynamic-elevation-offset: 0;
23+
color: #fff;
24+
}
25+
1526
.h1 {
1627
font-weight: bold;
1728
margin: 10 0 0;

‎apps/nativescript-demo-ng/src/app/app-routing.module.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { NgModule } from '@angular/core';
2-
import { NativeScriptRouterModule, NSEmptyOutletComponent } from '@nativescript/angular';
32
import { Routes } from '@angular/router';
3+
import { NativeScriptRouterModule } from '@nativescript/angular';
44

5-
import { ItemsComponent } from './item/items.component';
65
import { ItemDetailComponent } from './item/item-detail.component';
6+
import { ItemsComponent } from './item/items.component';
77
// import { HomeComponent } from './home/home.component';
88
// import { BootGuardService } from './boot-guard.service';
99

@@ -21,7 +21,7 @@ const routes: Routes = [
2121
// {
2222
// path: 'home',
2323
// component: HomeComponent,
24-
// canActivate: [BootGuardService],
24+
// canActivate: [() => Promise.resolve(true)],
2525
// children: [
2626
// {
2727
// path: 'start',

‎apps/nativescript-demo-ng/src/app/app.module.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
2-
import { NativeScriptModule, NativeScriptCommonModule, NativeScriptHttpClientModule, NativeDialogModule } from '@nativescript/angular';
2+
import { NativeDialogModule, NativeScriptHttpClientModule, NativeScriptModule } from '@nativescript/angular';
33

44
import { AppRoutingModule } from './app-routing.module';
55
import { AppComponent } from './app.component';
6-
import { ItemsComponent } from './item/items.component';
76
import { ItemDetailComponent } from './item/item-detail.component';
7+
import { ItemsComponent } from './item/items.component';
88
import { ModalComponent } from './modal/modal.component';
99

1010
/**

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

Lines changed: 0 additions & 17 deletions
This file was deleted.

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

Lines changed: 42 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -7,30 +7,50 @@ import { Item } from './item';
77
})
88
export class ItemService {
99
private items = new Array<Item>(
10-
{ id: 1, name: 'Ter Stegen', role: 'Goalkeeper' },
11-
{ id: 3, name: 'Piqué', role: 'Defender' },
12-
{ id: 4, name: 'I. Rakitic', role: 'Midfielder' },
13-
{ id: 5, name: 'Sergio', role: 'Midfielder' },
14-
{ id: 6, name: 'Denis Suárez', role: 'Midfielder' },
15-
{ id: 7, name: 'Arda', role: 'Midfielder' },
16-
{ id: 8, name: 'A. Iniesta', role: 'Midfielder' },
17-
{ id: 9, name: 'Suárez', role: 'Forward' },
18-
{ id: 10, name: 'Messi', role: 'Forward' },
19-
{ id: 11, name: 'Neymar', role: 'Forward' },
20-
{ id: 12, name: 'Rafinha', role: 'Midfielder' },
21-
{ id: 13, name: 'Cillessen', role: 'Goalkeeper' },
22-
{ id: 14, name: 'Mascherano', role: 'Defender' },
23-
{ id: 17, name: 'Paco Alcácer', role: 'Forward' },
24-
{ id: 18, name: 'Jordi Alba', role: 'Defender' },
25-
{ id: 19, name: 'Digne', role: 'Defender' },
26-
{ id: 20, name: 'Sergi Roberto', role: 'Midfielder' },
27-
{ id: 21, name: 'André Gomes', role: 'Midfielder' },
28-
{ id: 22, name: 'Aleix Vidal', role: 'Midfielder' },
29-
{ id: 23, name: 'Umtiti', role: 'Defender' },
30-
{ id: 24, name: 'Mathieu', role: 'Defender' },
31-
{ id: 25, name: 'Masip', role: 'Goalkeeper' }
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' },
17+
{ id: 9, name: 'intermediate,', role: 'Forward' },
18+
{ id: 10, name: 'and advanced programmers.', role: 'Forward' },
19+
{ id: 11, name: 'Celebrate web tech', role: 'Forward' },
20+
{ id: 12, name: 'with native platform tech.', role: 'Midfielder' },
21+
{ id: 13, name: 'Find', role: 'Goalkeeper' },
22+
{ id: 14, name: 'wonderful learning', role: 'Defender' },
23+
{ id: 17, name: 'learning', role: 'Forward' },
24+
{ id: 18, name: 'resources', role: 'Defender' },
25+
{ id: 19, name: 'across', role: 'Defender' },
26+
{ id: 20, name: 'the', role: 'Midfielder' },
27+
{ id: 21, name: 'entire', role: 'Midfielder' },
28+
{ id: 22, name: 'web', role: 'Midfielder' },
29+
{ id: 23, name: 'community', role: 'Defender' },
30+
{ id: 24, name: 'to', role: 'Defender' },
31+
{ id: 25, name: 'Get Started!', role: 'Goalkeeper' }
3232
);
3333

34+
flavors = [
35+
{
36+
color: '#087ea4',
37+
logo: '~/assets/react.png'
38+
},
39+
{
40+
color: '#2c4f7c',
41+
logo: '~/assets/solid.png'
42+
},
43+
{
44+
color: '#b7462a',
45+
logo: '~/assets/svelte.png'
46+
},
47+
{
48+
color: '#286f47',
49+
logo: '~/assets/vue.png'
50+
}
51+
];
52+
currentFlavor = 0;
53+
3454
getItems(): Array<Item> {
3555
return this.items;
3656
}

‎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 16!';
15+
message = 'Hello Angular 17!';
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/item2/item-detail2.component.html

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
1-
<ActionBar title="Details" class="action-bar"></ActionBar>
2-
<FlexboxLayout flexDirection="column" class="page">
1+
<ActionBar title="Get Started!" class="action-bar"></ActionBar>
2+
<!-- <FlexboxLayout flexDirection="column" class="page">
33
<FlexboxLayout class="m-15">
44
<Label class="h2" [text]="item.id + '. '"></Label>
55
<Label class="h2" [text]="item.name"></Label>
66
</FlexboxLayout>
77
<Label class="h4 m-l-15" [text]="item.role"></Label>
88
<Button text="GO BACK!" (tap)="goBack()"></Button>
9-
</FlexboxLayout>
9+
</FlexboxLayout> -->
10+
11+
<GridLayout class="page" rows="auto,*" padding="10">
12+
<!-- <Label marginTop="20" fontSize="18" textAlignment="center" [text]="item.name"></Label> -->
13+
<GridLayout row="1" rows="auto,auto" columns="">
14+
<Label marginTop="20" fontSize="45" text="Congrats to the Angular Team!" class="c-light-blue" textWrap="true" textAlignment="center" fontWeight="bold"></Label>
15+
<Label row="1" marginTop="20" fontSize="35" text="👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏" class="c-light-blue" textWrap="true" textAlignment="center" textWrap="true"></Label>
16+
</GridLayout>
17+
</GridLayout>

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,15 +25,14 @@
2525
<GridLayout rows="auto,,*" class="page">
2626
<StackLayout row="0" padding="10">
2727
<Label [text]="message" class="h1 text-center c-light-blue"></Label>
28-
<Label [text]="'NativeScript loves you.'" class="h2 text-center c-light-blue" marginTop="20" marginBottom="5"></Label>
29-
<Image src="https://angular.io/assets/images/logos/angular/angular.png" horizontalAlignment="center" width="120" verticalAlignment="top"></Image>
30-
<Button (tap)="openModal()" text="Open Modal" class="-btn -primary"></Button>
31-
<Button (tap)="fetchTodos()" text="Make Http Call" class="-btn -primary"></Button>
28+
<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>
30+
<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>
3231
</StackLayout>
3332
<ListView row="1" [items]="items" class="list-group" backgroundColor="#efefef">
3433
<ng-template let-item="item">
3534
<StackLayout [nsRouterLink]="['/item2', item.id]" padding="10">
36-
<Label [text]="item.name" class="list-group-item"></Label>
35+
<Label [text]="item.name" class="list-group-item" fontSize="18" textAlignment="center"></Label>
3736
</StackLayout>
3837
</ng-template>
3938
</ListView>

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

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,20 @@ import { ModalDialogService, NativeDialogService } from '@nativescript/angular';
1212
templateUrl: './items.component.html',
1313
})
1414
export class ItemsComponent implements OnInit {
15-
message = 'Hello Angular 16!';
15+
message = 'Hello Angular 17...rc';
1616
items: Array<Item>;
17-
18-
constructor(private itemService: ItemService, private nativeDialog: NativeDialogService, private modalDialog: ModalDialogService, private http: HttpClient) {}
17+
borderRadius: number;
18+
fontSize: number;
19+
20+
constructor(private itemService: ItemService, private nativeDialog: NativeDialogService, private modalDialog: ModalDialogService, private http: HttpClient) {
21+
if (global.isAndroid) {
22+
this.borderRadius = 25;
23+
this.fontSize = 15;
24+
} else {
25+
this.borderRadius = 25;
26+
this.fontSize = 18;
27+
}
28+
}
1929

2030
ngOnInit(): void {
2131
console.log('ItemsComponent ngOnInit');
@@ -28,7 +38,11 @@ export class ItemsComponent implements OnInit {
2838
}
2939

3040
openModal() {
31-
const ref = this.nativeDialog.open(ModalComponent);
41+
const ref = this.nativeDialog.open(ModalComponent, {
42+
nativeOptions: {
43+
fullscreen: !!global.isAndroid
44+
}
45+
});
3246
ref.afterOpened().subscribe(() => console.log('after openend'));
3347
ref.beforeClosed().subscribe((result) => console.log('beforeClosed', result));
3448
ref.afterClosed().subscribe((result) => console.log('afterClosed', result));

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
<GridLayout backgroundColor="blue" columns="*,*" padding="20" width="100%" height="100%">
2-
<Button col="0" [nativeDialogClose]="'thanks for clicking modal ' + id" text="Close modal" fontSize="20"></Button>
3-
<Button col="1" (tap)="openNewModal()" text="Open Another" fontSize="20"></Button>
1+
<GridLayout [backgroundColor]="color" rows="*,auto,auto" padding="20" width="100%" height="100%">
2+
<Image [src]="logo" stretch="aspectFit" width="200" marginTop="50" />
3+
4+
<Button row="1" (tap)="openNewModal()" text="Taste Another" fontSize="20" borderRadius="25"></Button>
5+
<Button row="2" [nativeDialogClose]="'thanks for clicking modal ' + id" text="Close" fontSize="20" marginTop="30" borderRadius="25"></Button>
46
</GridLayout>

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

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,34 @@
1-
import { Component, Inject, OnDestroy, OnInit, Optional, ViewContainerRef } from '@angular/core';
1+
import { Component, OnDestroy, OnInit, Optional, ViewContainerRef, inject } from '@angular/core';
22
import { ModalDialogService, NativeDialogRef, NativeDialogService } from '@nativescript/angular';
3+
import { ItemService } from '../item/item.service';
34

45
@Component({
56
selector: 'ns-modal',
67
templateUrl: `./modal.component.html`,
78
})
89
export class ModalComponent implements OnInit, OnDestroy {
910
id = Math.floor(Math.random() * 1000);
11+
itemService = inject(ItemService);
12+
logo: string;
13+
color: string;
1014

11-
constructor(@Optional() private ref: NativeDialogRef<ModalComponent>, private nativeDialog: NativeDialogService, private modalDialog: ModalDialogService, private vcRef: ViewContainerRef) {}
15+
constructor(
16+
@Optional() private ref: NativeDialogRef<ModalComponent>,
17+
private nativeDialog: NativeDialogService,
18+
private modalDialog: ModalDialogService,
19+
private vcRef: ViewContainerRef,
20+
) {
21+
this.logo = this.itemService.flavors[this.itemService.currentFlavor].logo;
22+
this.color = this.itemService.flavors[this.itemService.currentFlavor].color;
23+
}
1224

1325
openNewModal() {
14-
this.nativeDialog.open(ModalComponent);
26+
this.itemService.currentFlavor++;
27+
this.nativeDialog.open(ModalComponent, {
28+
nativeOptions: {
29+
fullscreen: !!global.isAndroid,
30+
},
31+
});
1532
// this.modalDialog.showModal(ModalComponent, {
1633
// viewContainerRef: this.vcRef
1734
// });

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

553 KB
Loading

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

73.1 KB
Loading

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

29.1 KB
Loading

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

54.1 KB
Loading

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

34.9 KB
Loading

‎apps/nativescript-demo-ng/src/main.ts

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,20 @@ import { NativeScriptNgZone, platformNativeScript, runNativeScriptAngularApp } f
22
import { Trace } from '@nativescript/core';
33

44
import { AppModule } from './app/app.module';
5+
import { setWindowBackgroundColor } from '@nativescript/core/utils/ios';
56

67
Trace.enable();
78
Trace.setCategories('ns-route-reuse-strategy,ns-router');
89

910
runNativeScriptAngularApp({
10-
appModuleBootstrap: () =>
11-
platformNativeScript().bootstrapModule(AppModule, {
11+
appModuleBootstrap: () => {
12+
if (global.isIOS) {
13+
setWindowBackgroundColor('#a6120d');
14+
}
15+
return platformNativeScript().bootstrapModule(AppModule, {
1216
ngZone: new NativeScriptNgZone(),
13-
}),
17+
});
18+
},
1419
});
1520

1621
// Comment above and Uncomment below to try without custom NgZone:

‎apps/nativescript-demo-ng/src/tests/detached-loader-tests.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ class LoaderComponentBase {
1717
}
1818

1919
@Component({
20-
selector: 'loader-component-on-push',
20+
selector: 'loader-component',
2121
template: `
2222
<StackLayout>
2323
<DetachedContainer #loader></DetachedContainer>

0 commit comments

Comments
 (0)