nativescript / angular Goto Github PK

TypeScript 97.45% CSS 0.17% HTML 1.66% JavaScript 0.64% Shell 0.02% Ruby 0.06%

angular's Introduction

@nativescript/angular

For usage with NativeScript for Angular projects.

Clean and setup workspace:

npm run clean.all

Build packages:

npm run build

Run demo:

npm run demo.ios
// or...
npm run demo.android

Clean/Reset demo dependencies

npm run demo.clean

Unit tests for iOS and Android:

npm run test.android
npm run test.ios

angular's People

Contributors

Stargazers

Watchers

Forkers

williamjuan027 wsedlacek brianrclow timdoege jcassidyav mukaschultze lekhmanrus darklight365 seankelly369 chrcou herefishyfish adam-morgan

angular's Issues

Cannot read property '_domId' of undefined after upgrading to Angular 12

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):
✔ Getting NativeScript components versions information...
✔ Component nativescript has 8.0.2 version and is up to date.
✔ Component @nativescript/core has 8.0.8 version and is up to date.
✔ Component @nativescript/ios has 8.0.0 version and is up to date.
✔ Component @nativescript/android has 8.0.0 version and is up to date.

Describe the bug
I followed the guide to upgrade to Nativescript Angular 12 (https://blog.nativescript.org/nativescript-angular-12/index.html) and when I run a tns run android I'm getting this error :

System.err: Calling js method onSaveInstanceState failed
System.err: TypeError: Cannot read property '_domId' of undefined
System.err:
System.err: StackTrace:
System.err: onSaveInstanceState(file: src\webpack:\greenperformer\node_modules\@nativescript\core\ui\frame\index.android.js:965:0)
System.err:     at onSaveInstanceState(file: src\webpack:\greenperformer\node_modules\@nativescript\core\ui\frame\activity.android.js:27:0)
System.err:     at com.tns.Runtime.callJSMethodNative(Native Method)
System.err:     at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1302)
System.err:     at com.tns.Runtime.callJSMethodImpl(Runtime.java:1188)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1175)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1153)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1149)
System.err:     at com.tns.NativeScriptActivity.onSaveInstanceState(NativeScriptActivity.java:55)
System.err:     at android.app.Activity.performSaveInstanceState(Activity.java:2169)
System.err:     at android.app.Instrumentation.callActivityOnSaveInstanceState(Instrumentation.java:1625)
System.err:     at android.app.ActivityThread.callActivityOnSaveInstanceState(ActivityThread.java:5680)
System.err:     at android.app.ActivityThread.callActivityOnStop(ActivityThread.java:5051)
System.err:     at android.app.ActivityThread.performStopActivityInner(ActivityThread.java:5016)
System.err:     at android.app.ActivityThread.handleStopActivity(ActivityThread.java:5090)
System.err:     at android.app.servertransaction.StopActivityItem.execute(StopActivityItem.java:40)
System.err:     at android.app.servertransaction.TransactionExecutor.executeLifecycleState(TransactionExecutor.java:176)
System.err:     at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:97)
System.err:     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2246)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:106)
System.err:     at android.os.Looper.loop(Looper.java:233)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:8010)
System.err:     at java.lang.reflect.Method.invoke(Native Method)
System.err:     at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:631)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:978)

To Reproduce
Update my Ns 8, Angular 11 project to Angular 12

Expected behavior
That it builds and works well

Bug: Named Outlet non responsive after `clearHistory` navigation

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

CLI: 8.1.3
Cross-platform modules: NA
Android Runtime: 8.1.1
iOS Runtime: Not Tested
Plugin(s): @nativescript-community/ui-material-bottomnavigationbar
NativeScript-Angular: 12.2.0
Angular: 12.2.0

Describe the bug
When navigating to a nested route (one with a named outlet) after a clearHistory a navigation event would fire, but the outlet would not be updated

To Reproduce
Clone https://github.com/herefishyfish/named-router-navigation-bug
Start Android application
Press "Go to dashboard"
Press "Nested route in navbar"
Press Notifications tab
Press Todos tab
Press "Nested route in navbar"

Expected behavior
For the second press of Nested route in navbar to navigate to the nested route.

Sample project
https://github.com/herefishyfish/named-router-navigation-bug

Additional context
There was a few messages in Discord about this:
https://discord.com/channels/603595811204366337/606457628729671691/895530953068408894

Please add support for Angular 14

Hello together,
would be great if you could add support for Angular 14.

Environment
✔ Getting NativeScript components versions information...
✔ Component nativescript has 8.2.3 version and is up to date.
✔ Component @nativescript/core has 8.2.4 version and is up to date.
✔ Component @nativescript/ios has 8.2.3 version and is up to date.
✔ Component @nativescript/android has 8.2.3 version and is up to date.

NativeScript-Angular: "@nativescript/angular": "13.0.4",
Angular: 14.0.0

Describe the bug
When building my app against Angular 14 the app crashes on startup. Seems like I am currently running into breaking changes with Angular 14.

CONSOLE LOG: Angular is running in development mode. Call enableProdMode() to enable production mode.
CONSOLE ERROR: ERROR Error: Uncaught (in promise): TypeError: loadedResolver.resolveComponentFactory is not a function
TypeError: loadedResolver.resolveComponentFactory is not a function
at PageRouterOutlet.getComponentFactory (file:///app/vendor.js:291130:46)
at PageRouterOutlet.activateOnGoForward (file:///app/vendor.js:290954:26)
at PageRouterOutlet.activateWith (file:///app/vendor.js:290944:12)
at ActivateRoutes.activateRoutes (file:///app/vendor.js:266319:31)
at file:///app/vendor.js:266259:17
at Array.forEach ()
at ActivateRoutes.activateChildRoutes (file:///app/vendor.js:266258:27)
at ActivateRoutes.activateRoutes (file:///app/vendor.js:266326:16)
at file:///app/vendor.js:266259:17
at Array.forEach ()

TabView transparent under iOS 15

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

CLI: 8.1.1
Cross-platform modules: 8.1.3
Android Runtime:
iOS Runtime: 8.1.0
Plugin(s): -
NativeScript-Angular: ^12.2.0
Angular: ^12.2.0

Describe the bug

The TabView is transparent on first render and only gets initialised correctly after some clicking around.

To Reproduce

Setup:

ns create my-tab-ng --template @nativescript/template-tab-navigation-ng

Run:

tns run ios

Make sure you run a iOS 15 simulator with a small enough screen, e.g. iPhone SE 2.

Expected behavior

TabView covers ListView elements.

Sample project

@nativescript/template-tab-navigation-ng

Additional context

It seems to be an nativescript-angular problem since the @nativescript/template-tab-navigation is not affected.

HMR does not work (Angular)

Environment

CLI: 8.0.2
Android Runtime: 8.1.1
iOS Runtime:8.1.0
NativeScript-Angular: 13.0.0
Angular: 13.1.1

HMR does not work as it should. Only with the --no-hmr flag the application is restarted.

Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Error calling module function System.err: Error: Angular JIT compilation failed: '@angular/compiler' not loaded!

Nativescript 8.0.2
Node 12.18.3
Angular 12.2.0

when tns run android it return the following error
System.err: An uncaught Exception occurred on "main" thread.
System.err: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Error calling module function
System.err: Error: Angular JIT compilation failed: '@angular/compiler' not loaded!
System.err: - JIT compilation is discouraged for production use-cases! Consider AOT mode instead.
System.err: - Did you bootstrap using '@angular/platform-browser-dynamic' or '@angular/platform-server'?
System.err: - Alternatively provide the compiler with 'import "@angular/compiler";' before bootstrap

historyGo Not implemented on Angular 13

Environment
✔ Getting NativeScript components versions information...
✔ Component nativescript has 8.1.4 version and is up to date.
✔ Component @nativescript/core has 8.1.5 version and is up to date.
✔ Component @nativescript/ios has 8.1.0 version and is up to date.
✔ Component @nativescript/android has 8.1.1 version and is up to date.

Describe the bug
When app starts the following issue logs on the console and then exits.

CONSOLE LOG: Loading inspector modules...
CONSOLE LOG: Finished loading inspector modules.
CONSOLE ERROR: JIT compilation failed for injectable class PlatformLocation {
historyGo(relativePosition) {
throw new Error('Not implemented');
}
}
NativeScript discarding uncaught JS exception!
CONSOLE LOG: Loading inspector modules...
CONSOLE LOG: Finished loading inspector modules.
CONSOLE ERROR: JIT compilation failed for injectable class PlatformLocation {
historyGo(relativePosition) {
throw new Error('Not implemented');
}
}
NativeScript discarding uncaught JS exception!

To Reproduce
Just update your code to Angular13

Cannot capture keypressed event in modal on Android

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

CLI: 8.2.0
Cross-platform modules:
Android Runtime: 6.3.1
iOS Runtime: N/A
Plugin(s):
NativeScript-Angular: 8.2.1
Angular: 8.2.0

Describe the bug
Same as title, I am unable to capture the keydown event in a modal dialog.

The key press is coming from a hardware keyboard, not the onscreen one.

I can accomplish this in any other component using:

application.on('KEYCODE_DPAD_DOWN', (() => {
	console.log('Keyboard Down Arrow Pressed');
}));

And it works fine.

This is after extending activity.android.ts, and adding:

public dispatchKeyEvent(event) {
    let keyCode = event.getKeyCode();

    switch (keyCode) {
        case android.view.KeyEvent.KEYCODE_DPAD_LEFT:
        case android.view.KeyEvent.KEYCODE_DPAD_UP:
            application.notify({
                eventName: 'KEYCODE_DPAD_UP',
            })
            return true;
        case android.view.KeyEvent.KEYCODE_DPAD_RIGHT:
        case android.view.KeyEvent.KEYCODE_DPAD_DOWN:
            application.notify({
                eventName: 'KEYCODE_DPAD_DOWN',
            })
            return true;
        default:
            return super.dispatchKeyEvent(event);
    }
}

I have tried every manner of capturing the keypress in a modal that I could, none work.

To Reproduce
Extend android activity to capture a keypress, try to capture a keypress in a non-fullscreen modal.

Expected behavior
Should be able to capture the keypress and console log it, similar to how it is in a component.

Additional context
In my modal, I have a dropdown. If I open the dropdown and then press the up/down arrow keys, it navigates through the selections, so the buttons work in the modal, I just don't know how to capture and console log them.

Please let me know if additional info is required.

Back navigation in nested page router outlets fails after consecutive invocations

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

CLI: 8.1.5
Cross-platform modules: 8.1.1
Android Runtime: 8.1.0
iOS Runtime: 8.1.0
Plugin(s): @nativescript-community/ui-material-bottom-navigation / 6.2.5
NativeScript-Angular: 13.0.0
Angular: 13.1.1

There seems to be something a bit off using back-navigation after upgrading from Angular 12 to Angular 13.
During the first back navigation everything looks normal, but repeating the exact same navigation a second time starts with a blank screen (animated sliding in from the left) and then the actual content comes sliding in from the right after a small delay.

I cannot reproduce this using the smallest sample (ns create ns81-ng13 --ng) but using this sample with bottom navigation and nested page router outlets:

https://github.com/timdoege/ns-login-tab-navigation-ng13

This is just the same app as this one:

NativeScript/login-tab-navigation-ng#21

just updated from Angular 12 to Angular 13.

The Angular 12 version does not have this behaviour (just testing by entering player details and pressing Back()).
In my larger project, I do get this new error message now

CONSOLE ERROR: ns-router: Attempted to call startGoBack while going back:

when the back navigation is off.

Angular 12.0.6: reader.readAsText is not a function

Environment

CLI: 8.0.2
Cross-platform modules:
Android Runtime: 8.0.0
iOS Runtime: JSC and "@nativescript/ios": "rc",
Plugin(s):
"@apollo/client": "~3.3.21",
"apollo-angular": "~2.6.0",
"apollo3-cache-persist": "~0.9.1",
"graphql": "^15.5.1",
"graphql-tag": "^2.12.5",
NativeScript-Angular: "@nativescript/angular": "~12.0.6",
Angular: "~12.1.2"

Describe the bug
I am using an Apollo Angular client in my app. I just tried to migrate to Angular 12 with the app. Unfortunately, the Apollo client is not able to resolve http requests anymore. The apollo watch (watchQuery) Observable always errors out with the following error message:

reader.readAsText is not a function. (In 'reader.readAsText(blob)', 'reader.readAsText' is undefined)

To Reproduce
I assume the issue is directly related to

#15

My hope was Version 12.0.16 fixed it. Unfortunately not the case. I unfortunately do not know how to easily reproduce the issue without Apollo Angular. I hope the error message is helpful. Seems like a function signature is missing.

Expected behavior
HTTP requests are possible in order to fetch data with apollo client

I hope the issue is related to the polyfills. Seems like this was the topic for #15. If someone knows about a workaround, which I could try to get my code running, it would be great if he could post it here! Thanks for your help.

NativeScript 8.2 upgrade failed, throws build errors and npm installs fail

Environment
✔ Component nativescript has 8.2.3 version and is up to date.
✔ Component @nativescript/core has 8.2.1 version and is up to date.
✔ Component @nativescript/ios has 8.2.3 version and is up to date.
✔ Component @nativescript/android has 8.2.2 version and is up to date.

iOS Runtime: 15.4
NativeScript-Angular: 13.0.0
Angular: 13.2.0

Describe the bug
After following this guide to upgrade to NativeScript 8.2.0 from 8.1.5, now when I run "npm install" it gives these warnings:

MacBook-Pro:UI justintoth$ npm install
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@eslint/[email protected]',
npm WARN EBADENGINE   required: { node: '^12.22.0 || ^14.17.0 || >=16.0.0' },
npm WARN EBADENGINE   current: { node: 'v14.16.0', npm: '8.3.1' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@typescript-eslint/[email protected]',
npm WARN EBADENGINE   required: { node: '^12.22.0 || ^14.17.0 || >=16.0.0' },
npm WARN EBADENGINE   current: { node: 'v14.16.0', npm: '8.3.1' }
npm WARN EBADENGINE }
npm WARN EBADENGINE ...

Worse, when trying to build it throws errors about "fs":

Module not found: Error: Can't resolve 'fs' in '/Users/justintoth/Dev/housters/UI/node_modules/source-map/lib'
 @ ./node_modules/source-map/lib/source-map-consumer.js 17:17-44
 @ ./node_modules/source-map/source-map.js 7:0-82
 @ ./node_modules/stacktrace-gps/stacktrace-gps.js
 @ ./node_modules/stacktrace-js/stacktrace.js
 @ ./node_modules/@nativescript/firebase-crashlytics/index.ios.js 14:0-39 73:12-32
 @ ./src/app/shared/services/analytics.service.ts 4:0-44
 @ ./src/app/components/public/signin/signin.component.ts 9:0-78 13:0-65 126:116-135 177:37-53
 @ ./src/app/app.module.ts 15:0-73
 @ ./src/main.ts 4:0-45 6:69-78

ERROR in ./node_modules/source-map/lib/read-wasm.js 21:15-30
Module not found: Error: Can't resolve 'path' in '/Users/justintoth/Dev/housters/UI/node_modules/source-map/lib'...

Here is the full build log: https://gist.github.com/justintoth/d8fde7b79e45df5f2f3310cf56d04edd

Issues with NativeScript 8 and Angular 12 concerning modals

Environment

CLI: ├── [email protected]
Cross-platform modules: @nativescript/[email protected]
Android Runtime: ├── @nativescript/[email protected]
iOS Runtime: ├── @nativescript/[email protected] (JSC)
Plugin(s):
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @nativescript/[email protected]
├── @nativescript/[email protected]
├── @nativescript/[email protected]
├── @nativescript/[email protected]
├── @nativescript/[email protected]
├── @ngtools/[email protected]
├── [email protected]
├── [email protected]
└── [email protected]

Describe the bug

Since uprading to Angular 12 the following issues occur:

ScrollView within a modal is no longer working
Opening a second modal from a first modal throws the following error:

ERROR TypeError: options.parentView.showModal is not a function

To Reproduce

Clone the demo repository: https://github.com/jessorlisa/issues-n8-angular12-modals
Run the project ns run android (or ns run ios)
Tap any list item to open first modal -> scroll does not work (1st issue)
Tap on "Open 2nd modal" -> check console output for error (2nd issue)

Expected behavior

Scrolling works
No error, 2nd modal opens

Additional context
Both scenarios worked totally fine before upgrading to Angular 12. To demonstrate it, I created a branch downgrade-to-angular-11 https://github.com/jessorlisa/issues-n8-angular12-modals/tree/downgrade-to-angular-11.
Check out the branch, run ns clean and run the project again -> everything is working as expected.

I could not find any changes regading modal handling, did I miss anything? Any hint in the right direction would be welcomed.

Thanks!

[hidden]=condition attribute not working correctly since migration from nativescript/core 8.2 -> 8.3,

Update available for component nativescript. Your current version is 8.3.2 and the latest available version is 8.3.3
✔ Component @nativescript/core has 8.3.4 version and is up to date.
✔ Component @nativescript/ios has 8.3.3 version and is up to date.
✔ Component @nativescript/android has 8.3.1 version and is up to date.

Plugin(s):
NativeScript-Angular: 14.1.3
Angular: 14.0.4

Describe the bug
Since migration of my project from ns-core 8.2-> 8.3 I have seen a couple of issues related to the usage of the "hidden" attribute in my templates. It seems that the layouting does not work correctly where it is used. Interestingly, everything works fine when I replace the hidden attribute with the visibility attribute, even though I thought it should be just syntactic sugar.

For example the wrapped page-router-outlet in the example below keeps an offset for the hidden actionbar if a route is navigated to the hidden control.

I also used the hidden property to make certain layouts visible (as dialogs) which were then animated on screen. In such situations the animations were not played correctly anymore. Again, replacing [hidden]="condition" with [visibility] resolved the issue.

Calling js method onSaveInstanceState failed TypeError: Cannot read property '_domId' of undefined

Environment

CLI: ├── [email protected]
Cross-platform modules: ├── @nativescript/[email protected]
Android Runtime: ├── @nativescript/[email protected]
iOS Runtime: ├── @nativescript/[email protected] (JSC)
Plugin(s):
NativeScript-Angular: ├── @nativescript/[email protected]
Angular:├── @angular/[email protected]

Describe the bug
Since upgrading to Angular 12 the following report can be found multiple times in Crashlytics:

Fatal Exception: com.tns.NativeScriptException: Calling js method onSaveInstanceState failed
TypeError: Cannot read property '_domId' of undefined
       at com.tns.Runtime.callJSMethodNative(Runtime.java)
       at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1302)
       at com.tns.Runtime.callJSMethodImpl(Runtime.java:1188)
       at com.tns.Runtime.callJSMethod(Runtime.java:1175)
       at com.tns.Runtime.callJSMethod(Runtime.java:1153)
       at com.tns.Runtime.callJSMethod(Runtime.java:1149)
       at com.tns.NativeScriptActivity.onSaveInstanceState(NativeScriptActivity.java:55)
       at android.app.Activity.performSaveInstanceState(Activity.java:2075)
       at android.app.Instrumentation.callActivityOnSaveInstanceState(Instrumentation.java:1486)
       at android.app.ActivityThread.callActivityOnSaveInstanceState(ActivityThread.java:5694)
       at android.app.ActivityThread.callActivityOnStop(ActivityThread.java:5001)
       at android.app.ActivityThread.performStopActivityInner(ActivityThread.java:4960)
       at android.app.ActivityThread.handleStopActivity(ActivityThread.java:5040)
       at android.app.servertransaction.StopActivityItem.execute(StopActivityItem.java:41)
       at android.app.servertransaction.TransactionExecutor.executeLifecycleState(TransactionExecutor.java:176)
       at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:97)
       at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2216)
       at android.os.Handler.dispatchMessage(Handler.java:107)
       at android.os.Looper.loop(Looper.java:237)
       at android.app.ActivityThread.main(ActivityThread.java:7948)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
       at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1075)

It seems the error already was reported before here, the issue was closed but the "possible fix" is not yet released: NativeScript/NativeScript#9447

To Reproduce
As of today, this does not happen in development? 🤷🏻‍♀️

Expected behavior
No crash reports

Response.json() throwing TypeError: reader.readAsText is not a function after nativescript-angular 12

Environment

tns info
✔ Getting NativeScript components versions information...
✔ Component nativescript has 8.0.2 version and is up to date.
✔ Component @nativescript/core has 8.0.8 version and is up to date.
✔ Component @nativescript/ios has 8.0.0 version and is up to date.
✔ Component @nativescript/android has 8.0.0 version and is up to date.

Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

CLI: 8.0.2
Cross-platform modules: N/A
Android Runtime: 8.0.0
iOS Runtime: 8.0.0
Plugin(s): none
NativeScript-Angular: ~12.0.0
Angular: ~12.0.0

Describe the bug
Body.json is throwing an Error after fetch.

CONSOLE ERROR: ERROR Error: Uncaught (in promise): TypeError: reader.readAsText is not a function
TypeError: reader.readAsText is not a function
at readBlobAsText (file: src/webpack:/@nativescript/template-hello-world-ng/node_modules/@nativescript/core/fetch/index.js:189:0)
at Response.Body.text (file: src/webpack:/@nativescript/template-hello-world-ng/node_modules/@nativescript/core/fetch/index.js:295:0)
at Response.Body.json (file: src/webpack:/@nativescript/template-hello-world-ng/node_modules/@nativescript/core/fetch/index.js:312:0)
at myhttp (file: src/webpack:/@nativescript/template-hello-world-ng/src/app/app.component.ts:5:0)

To Reproduce
Call Response.json() in nativescript-angular 12 project. (android or ios)

In my provided example

git clone https://github.com/IanNMarshall/nativescript-angular-fetch-bug.git
cd nativescript-angular-fetch-bug
tns prepare ios && tns build ios && tns run ios
# errors on init

Expected behavior
Response.json() parses response.

Note:

Error did not occur before nativescript-angular 12
Error does not occur in pure ts app with same version - typescript 4.2.4

Sample project
Example throws the error on app.component.init:
https://github.com/IanNMarshall/nativescript-angular-fetch-bug

Note: this is just the hello world demo with minimal change to add fetch example.

tns create
# Select Angular, name, Hello World tempate

then added the following:

--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,7 +1,24 @@
-import { Component } from '@angular/core'
+import { Component, OnInit } from '@angular/core'
+
+export async function myhttp(
+  request: RequestInfo
+): Promise<any> {
+  const response = await fetch(request);
+  const body = await response.json();
+  return body;
+}
 
 @Component({
   selector: 'ns-app',
   templateUrl: './app.component.html',
 })
-export class AppComponent {}
+export class AppComponent implements OnInit {
+
+  constructor() {}
+
+  ngOnInit() {
+    console.log("MyApp - onInit");
+    const body = myhttp("https://jsonplaceholder.typicode.com/todos");
+    body.then(body => console.log("MyApp - response", body));
+  }
+}

Here's an example of it working with same {N} and typescript versions:
https://github.com/IanNMarshall/nativescript-ts-only-fetch-working

Router: TypeError Cannot read property 'key' of undefined

Environment

CLI: 8.0.2
Cross-platform modules:
Android Runtime: 8.0.0
iOS Runtime: 8.0.0
Plugin(s):
NativeScript-Angular: 12.0.6
Angular: 12.2.1

Describe the bug
Sometimes if I go back (this.routerExtensions.back();) within the router history the screen will be white (background color) with no elements because of an error appears and the rendering aborted:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'key' of undefined

The error throws at https://github.com/NativeScript/angular/blob/main/packages/angular/src/lib/legacy/router/ns-route-reuse-strategy.ts#L136:

const cache = this.cacheByOutlet[outletKey];
if (!cache) {
   return false;
}
// ...
const shouldAttach = isBack && cache.peek().key === key;

the cache.peek() returns an undefined and the following cache.peek().key fails.

Expected behavior
The peek() method shouldn't return an undefined even the cache is empty. In my opinion the result have to be an empty CacheItem (interface)

The second (worse) option is to check if the result of peek() is defined:

const shouldAttach = isBack && !!cache.peek() && cache.peek().key === key;

Additional context
I'm not sure but I think this happened because in my code I navigate to a page with clearHistory

this.router.navigate([...], {clearHistory: true})

and if a special flag is set directly after the first navigate a second will be fired without clearHistory. I don't no why the cache are empty.

Display Component Inside Listview Template Not Updating with Async

Environment

  "dependencies": {
    "@angular/animations": "~12.0.0",
    "@angular/common": "~12.0.0",
    "@angular/compiler": "~12.0.0",
    "@angular/core": "~12.0.0",
    "@angular/forms": "~12.0.0",
    "@angular/platform-browser": "~12.0.0",
    "@angular/platform-browser-dynamic": "~12.0.0",
    "@angular/router": "~12.0.0",
    "@nativescript/angular": "~12.0.0",
    "@nativescript/core": "~8.0.0",
    "@nativescript/theme": "~3.0.1",
    "@nativescript/zone-js": "2.0.1",
    "rxjs": "^6.6.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~12.0.0",
    "@nativescript/ios": "8.0.0",
    "@nativescript/types": "~8.0.0",
    "@nativescript/webpack": "beta",
    "@ngtools/webpack": "~12.0.0",
    "typescript": "~4.2.0"
  },

Describe the bug
Using a component inside of the ListView's ngTemplate does not update the view when changes occur in the Observable tied to that listview. The display component never registers an OnChanges event. This worked previously in a project using NS7 and NG10 and stopped working when we upgraded to NS8 and NG12.

To Reproduce
This is a starter project that was generated with ns create testApp --angular. It has an ItemService that now returns an observable array and in the main view there is a button that will change the name of the first item in that observable.
The working branch does not use a component inside of the ngTemplate and the view updates as expected.
https://github.com/nickmorlan-newinnov/listview-component

  <ListView [items]="players$ | async" row="1">
    <ng-template let-player="item">
      <StackLayout>
        <Label style="font-size: 20px; font-weight: bold" [text]="player.name"></Label>
        <Label col="1" row="0" [text]="player.name" textWrap="true"></Label>
      </StackLayout>
    </ng-template>
  </ListView>

This branch uses a component for the display and does not update the view.
https://github.com/nickmorlan-newinnov/listview-component/tree/component-in-listview

  <ListView [items]="players$ | async" row="1">
    <ng-template let-player="item">
      <item-node [item]="player"></item-node>
    </ng-template>
  </ListView>

Expected behavior
That the component inside of the template would update, it doesn't appear to be registering an input OnChange event.

Additional context
I could be doing this wrong and it is a terrible idea to use a display component within a ListView ngTemplate.

After upgrading to Nativescript 8 from 7 My app crashes with error R3InjectorError(AppModule)[Page -> Page -> Page]

Issue Description

below is my package json

{
"name": "@nativescript/template-hello-world-ng",
"main": "./src/main.ts",
"version": "7.0.2",
"author": "NativeScript Team [email protected]",
"description": "NativeScript Application",
"license": "SEE LICENSE IN ",
"publishConfig": {
"access": "public"
},
"keywords": [
"nativescript",
"mobile",
"angular",
"{N}",
"template"
],
"repository": "",
"bugs": {
"url": "https://github.com/NativeScript/NativeScript/issues"
},
"scripts": {
"ngcc": "ngcc --properties es2015 module main --first-only",
"postinstall": "./src/scripts/nativescript-camera/nativescriptCamera.sh",
"android-build": "tns clean && tns prepare android && tns run android",
"ios-build": "tns clean && tns prepare ios && tns run ios",
"ios": "tns run ios --device 'iPhone 12 Pro'"
},
"nativescript": {
"id": "com.atd.atdmobileapp",
"tns-android": {
"version": "6.5.3"
}
},
"dependencies": {
"@angular-devkit/build-angular": "^13.3.1",
"@angular/animations": "~13.3.1",
"@angular/common": "~13.3.1",
"@angular/compiler": "~13.3.1",
"@angular/core": "~13.3.1",
"@angular/forms": "~13.3.1",
"@angular/platform-browser": "~13.3.1",
"@angular/platform-browser-dynamic": "~13.3.1",
"@angular/router": "~13.3.1",
"@dmi/camera": "file:./src/thirdPartyLibraries/camera",
"@nativescript-community/ui-material-bottom-navigation": "^7.0.3",
"@nativescript/angular": "^13.0.0",
"@nativescript/auto-fit-text": "^1.0.1",
"@nativescript/background-http": "^5.0.1",
"@nativescript/core": "~8.2.0",
"@nativescript/email": "^2.0.0",
"@nativescript/firebase": "11.1.3",
"@nativescript/iqkeyboardmanager": "^2.0.0",
"@nativescript/local-notifications": "^5.1.0",
"@nativescript/localize": "^5.0.2",
"@nativescript/theme": "~2.3.0",
"@nota/nativescript-accessibility-ext": "^7.0.3",
"@nstudio/nativescript-cardview": "^2.0.0",
"@nstudio/nativescript-pulltorefresh": "^3.0.1",
"axios": "^0.23.0",
"emitter": "^0.0.5",
"file-base64": "^1.0.0",
"follow-redirects": "^1.13.2",
"jspdf": "^2.1.1",
"nativescript-appversion": "^1.4.4",
"nativescript-barcodescanner": "^4.0.1",
"nativescript-camera": "^4.5.0",
"nativescript-clipboard": "^2.0.0",
"nativescript-fingerprint-auth": "^7.0.2",
"nativescript-gif": "^5.0.0",
"nativescript-numeric-keyboard": "^5.0.0",
"nativescript-orientation": "file:./src/thirdPartyLibraries/nativescript-orientation",
"nativescript-permissions": "1.3.11",
"nativescript-phone": "^2.0.0",
"nativescript-secure-storage": "^2.6.2",
"nativescript-speech-recognition": "^2.0.0",
"nativescript-ui-calendar": "^7.0.2",
"nativescript-ui-listview": "^9.0.2",
"nativescript-videoplayer": "^5.0.1",
"nativescript-xml2js": "^0.5.2",
"pdfmake": "^0.1.68",
"reflect-metadata": "~0.1.12",
"rxjs": "~7.5.0",
"stream": "^0.0.2",
"timer": "^1.0.1",
"util": "^0.10.3",
"zone.js": "~0.11.1"
},
"devDependencies": {
"@angular/cli": "~13.3.1",
"@angular/compiler-cli": "~13.3.1",
"@nativescript/android": "~8.2.0",
"@nativescript/ios": "~8.2.0",
"@nativescript/schematics": "^10.1.0",
"@nativescript/types": "~8.2.0",
"@nativescript/webpack": "~5.0.6",
"@ngtools/webpack": "~13.3.1",
"@schematics/angular": "^10.1.1",
"tns-android": "6.5.3",
"typescript": "~4.5.5"
},
"private": "true",
"readme": "NativeScript Application"
}

Reproduction

No response

Relevant log output (if applicable)

ERROR NullInjectorError: R3InjectorError(AppModule)[Page -> Page -> Page]: 
JS:   NullInjectorError: No provider for Page!
JS: bootstrap: Error bootstrapping app module:
JS: R3InjectorError(AppModule)[Page -> Page -> Page]: 
JS:   NullInjectorError: No provider for Page!
JS: 
JS: NullInjectorError: R3InjectorError(AppModule)[Page -> Page -> Page]: 
JS:   NullInjectorError: No provider for Page!
JS:     at NullInjector.get (file: src/webpack:/@nativescript/template-hello-world-ng/node_modules/@angular/core/fesm2015/core.mjs:11120:0)
JS:     at R3Injector.get (file: src/webpack:/@nativescript/template-hello-world-ng/node_modules/@angular/core/fesm2015/core.mjs:11287:0)
JS:     at R3Injector.get (file: src/webpack:/@nativescript/template-hello-world-ng/node_modules/@angular/core/fesm2015/core.mjs:11287:0)
JS:     at R3Injector.get (file: src/webpack:/@nativescript/template-hello-world-ng/node_modules/@angular/core/fesm2015/core.mjs:11287:0)
JS:     at NgModuleRef.get (file: src/webpack:/@nativescript/template-hello-world-ng/node_modules/@angular/core/fesm2015/core.mjs:21832:0)
JS:     at Object.get (file: src/webpack:/@nativescript/template-hello-world-ng/node_modules/@angular/core/fesm2015/core.mjs:21509:0)
JS:     at lookupTokenUsingModuleInjector (file: src/webpack:/@nativescript/template-hello-world-ng/node_modules/@angular/core/fesm2015/core.mjs:3358:0)
JS:     at getOrCreateInjectable (file: src/webpack:/@nativescript/template-hello-world-ng/node_modules/@angular/core/fesm2015/core.mjs:3470:0)
JS:     at ...
JS: Unhandled Promise rejection: R3InjectorError(AppModule)[Page -> Page -> Page]: 
JS:   NullInjectorError: No provider for Page! ; Zone: <root> ; Task: Promise.then ; Value: NullInjectorError: R3InjectorError(AppModule)[Page -> Page -> Page]: 
JS:   NullInjectorError: No provider for Page! NullInjectorError: R3InjectorError(AppModule)[Page -> Page -> Page]: 
JS:   NullInjectorError: No provider for Page!
JS:     at NullInjector.get (file: src/webpack:/@nativescript/template-hello-world-ng/node_modules/@angular/core/fesm2015/core.mjs:11120:0)
JS:     at R3Injector.get (file: src/webpack:/@nativescript/template-hello-world-ng/node_modules/@angular/core/fesm2015/core.mjs:11287:0)
JS:     at R3Injector.get (file: src/webpack:/@nativescript/template-hello-world-ng/node_modules/@angular/core/fesm2015/core.mjs:11287:0)
JS:     at R3Injector.get (file: src/webpack:/@nativescript/template-hello-world-ng/node_modules/@angular/core/fesm2015/core.mjs:11287:0)
JS:     at NgModuleRef.get (file: src/webpack:/@nativescript/template-hello-world-ng/node_modules/@angular/core/fesm2015/core.mjs:21832:0)
JS:     at Object.get (file: src/webpack:/@nativescript/template-hello-world-ng/node_modules/@angular/core/fesm2015/core.mjs:21509:0)
JS:     at lookupTokenUsingModuleInjector (file:///data/data/com.atd.atdmobil...

Environment

No response

Please accept these terms

I have searched the existing issues as well as StackOverflow and this has not been posted before
This is a bug report
I agree to follow this project's Code of Conduct

historyGo Not implemented on Angular 13

Describe the bug
When app starts the following issue logs on the console and then exits.
CONSOLE LOG: Loading inspector modules...
CONSOLE LOG: Finished loading inspector modules.
CONSOLE ERROR: JIT compilation failed for injectable class PlatformLocation {
historyGo(relativePosition) {
throw new Error('Not implemented');
}
}
NativeScript discarding uncaught JS exception!

To Reproduce
Just update your code to Angular13

Expected behavior
Error is not issued and app runs.

Is tabItem missing?

I just tried to build a simple app with NatvieScript 8 Angular 12 similar to:

https://github.com/NativeScript/login-tab-navigation-ng/tree/master/src/app/tabs

Now I'm getting this error:

NG0303: Can't bind to 'tabItem' since it isn't a known property of 'GridLayout'.

After that I took into NativeScriptCommonModule and saw that compared to Nativescript Angular 10 (and I guess 11) there is no import for tab-view.

Please let me know if you need more information.

Feature Request: Pull based virtualized list

Is your feature request related to a problem? Please describe.
I am looking to create a infinitely scrolling list that pulls data from an API.
It would like to be able to start a request to pull data for what is currently displayed.

Describe the solution you'd like
Much like how RxJS is used for pushing data, I would like to use Iterables either with IxJS or a similar data structure so that when an item needs to be displayed .next() is called.
For my use cases the .next() call would need to be async, so AsyncIterator might be a good data structure to start with.
However it may be nice to provide some pattern that allows batching.

Describe alternatives you've considered
I believe the @angular/cdk has a somewhat similar pattern with their DataSource class used for their virtualized scroller and data table. I am not sure that it would need all the requirements to build out the interaction I am looking for, but it would be a good start to getting towards that.

Additional context

Issue with APP_INITIALIZER and NativeScript Theme: Core V2

Environment

Node.js: v16
Android SDK: 30
JDK 11
Xcode: 13.3.1
CocoaPods 1.11.2
CLI: latest [email protected]
Cross-platform modules: @nativescript/[email protected]
Android Runtime: @nativescript/[email protected]
iOS Runtime: @nativescript/[email protected] (JSC!)
Angular: @angular/[email protected]
Plugin(s):
├── @nativescript/[email protected]

Describe the bug
The Theme.setMode() from the NativeScript Theme plugin stops working when an async APP_INITIALIZER is used.

To Reproduce
Steps to reproduce:

Clone the sample project
run npm run android or npm run ios (the home component will show some theme/system appearance details)
tap "Change app theme" and choose the opposite theme to your current device setting, the theme changes correctly for now, but
Problem 1: as you can see Application.systemAppearance() now shows a wrong value (e.g. "dark", even if the device is in light mode)
Close the app (not only put it to background)
Restart the app ...
Problem 2: The app theme is back to auto, although it is set to a specific mode in the AppComponent

But if you disable the APP_INITIALIZER by removing the APP_INITIALIZER from the providers array in app.module.ts everything is working just fine.

Expected behavior
Theme.setMode() is working despite the use of APP_INITIALIZER.

Sample project
https://github.com/jessorlisa/demo-issues-nativescript-ng/tree/issue/set-theme

Additional context
My first suspicion was that something was amiss with the theme but then I could narrow it down to the APP_INITIALIZER.

Any thoughts? Help?

On Android @angular/router breaks with androidXFragment >= 1.3.0

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

CLI: <=8.1.2
Cross-platform modules: <=8.1.2
Android Runtime: <=8.1.1
iOS Runtime: n/a
Plugin(s): n/a
NativeScript-Angular: 12.7.0
Angular: 12.2.5

Describe the bug
If the androidXFragment flag is set to a version number >= 1.3.0, the @angular/router links are unresponsive when clicked. There are no error messages logged or exceptions thrown.

To Reproduce
We created a simple demo app reproducing the bug here: https://github.com/bentovsky/nativescript-angular-sample. Just set androidXFragment=1.3.0 in apps/nativescript-demo-ng/App_Resources/Android/gradle.properties and run it on a simulator. The link "Got to Child2" on the start page is not working anymore.

Expected behavior
We can upgrade androidXFragment to a version higher than 1.3.0. We need this to include other Android plugins that have a dependency on androidXFragment >= 1.3.0.

Sample project
https://github.com/bentovsky/nativescript-angular-sample

Additional context
n/a

Reactive Forms/FormControl Have Incorrect Values When Using iOS QuickPath/Slide to Type

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

CLI: 8.2.3
Cross-platform modules: 8.1.1
Android Runtime: 8.1.1
iOS Runtime: 8.2.1
Plugin(s): iqkeyboardmanager (2.0.0)
NativeScript-Angular: 12.2.0
Angular: 12.2.13

Describe the bug
When using swipe to type/QuickPath on an iOS keyboard in a reactive form, the word input with QuickPath temporarily replaces the value of the control with just that word instead of appending to the control's previous value. Another input into the keyboard subsequently returns the value back to the full expected value.

To Reproduce

Have a TextField bound to a FormControl with the formControl attribute.
Subscribe to the control's valueChanged event and output the value each time the value changes.
Start inputting a word into the text field, then add a space, for example, "Test ".
Now use QuickPath/slide to type to input another word, like "test" again.
The last output you see will be "test" instead of "Test test".
Input a space, the output will return to the full value of the control.

Expected behavior
When using slide to type/QuickPath, form controls should retain the full value of those controls and emit those values as usual to valueChanged.

zone-js package still as copy in repo

Hello,

Loving how the team got rid of the custom zone-js. Good Job!

Was following with NativeScript/nativescript-angular#2278 (comment) to implement the rejection handler via Zone-JS API which works like a charm.

So fine so good.

But what im still wondering is.. Why is the zone-js still as a copy in repo here: https://github.com/NativeScript/angular/tree/main/packages/zone-js/dist

Shouldnt it be enough (and much cleaner) to reference the needed package just via package.json?

Im feering someone will in future start patching the zone-js again.

Also it would be awesome to get the source code attached to this NPM repo https://www.npmjs.com/package/@nativescript/zone-js (even though its only for angular 11?)

NS8.1, Angular 13 - ns-router: No outlet found relative to activated route on navigating back

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

CLI: 8.1.5
Cross-platform modules: 8.1.5
Android Runtime: 8.1.1
iOS Runtime: 8.1.0
Plugin(s): @nativescript-community/ui-material-bottomnavigationbar 6.2.5
NativeScript-Angular:13.0.1
Angular:13.1.3

Describe the bug
I get an error: "ns-router: No outlet found relative to activated route" when navigating back in nested route (one with a named outlet) .
I debug it until this function: findTopActivatedRouteNodeForOutlet in
https://github.com/NativeScript/angular/blob/main/packages/angular/src/lib/legacy/router/page-router-outlet-utils.ts

It appears that latest changes to this function affect this functionality.

export function findTopActivatedRouteNodeForOutlet(activatedRoute: ActivatedRouteSnapshot): ActivatedRouteSnapshot {
  // TODO: test this and figure it out if it's really no longer needed
  return activatedRoute;
  // let outletActivatedRoute = activatedRoute;

  // while (outletActivatedRoute.parent && outletActivatedRoute.parent.routeConfig && !outletActivatedRoute.parent.routeConfig.component) {
  //   outletActivatedRoute = outletActivatedRoute.parent;
  // }

  // return outletActivatedRoute;
}

When reverting this change back (uncomment) it is working, but reloading the whole frame.

SCSS files aren't applied to components after upgrading to NS 8

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

CLI: 8.0.2
Cross-platform modules: 8.0.7
Android Runtime: 8.0.0
iOS Runtime: 8.0.0
NativeScript-Angular: 12.0.0
Angular: 12.0.0

Describe the bug

I upgraded my app to NS 8 and NG 12 and now my components styles aren't loading/applied. However changes from my app.scss files are working. Components styles were working in my NS 7 Project.

Additional context
Here is my package.json

{
  "dependencies": {
    "@angular/animations": "~12.0.0",
    "@angular/common": "~12.0.0",
    "@angular/compiler": "~12.0.0",
    "@angular/core": "~12.0.0",
    "@angular/forms": "~12.0.0",
    "@angular/platform-browser": "~12.0.0",
    "@angular/platform-browser-dynamic": "~12.0.0",
    "@angular/router": "~12.0.0",
    "@nativescript-community/ui-pager": "^13.0.10",
    "@nativescript/angular": "~12.0.0",
    "@nativescript/core": "~8.0.0",
    "@nativescript/local-notifications": "^5.0.3",
    "@nativescript/theme": "^3.0.1",
    "@nstudio/nativescript-cardview": "^2.0.1",
    "@nstudio/nativescript-floatingactionbutton": "^3.0.4",
    "@pscoped/ngx-pub-sub": "^3.0.2",
    "moment": "^2.29.1",
    "nativescript-ngx-fonticon": "^7.0.0",
    "nativescript-permissions": "^1.3.11",
    "nativescript-ripple": "^4.0.1",
    "nativescript-sqlite": "^2.6.6",
    "nativescript-ui-sidedrawer": "^9.0.3",
    "reflect-metadata": "~0.1.12",
    "rxjs": "^6.6.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~12.0.0",
    "@nativescript/android": "8.0.0",
    "@nativescript/ios": "8.0.0",
    "@nativescript/types": "8.0.0",
    "@nativescript/webpack": "beta",
    "@ngtools/webpack": "~12.0.0",
    "typescript": "~4.2.0"
  }
}

and here is my webpack.config.js file

const webpack = require("@nativescript/webpack");

module.exports = (env) => {
  webpack.init(env);

  webpack.Utils.addCopyRule('**/*.json');

  webpack.chainWebpack(config => {
    config.module
      .rule('scss')
      .use('sass-loader')
      .options({ sassOptions: { indentedSyntax: false } })
  });

  return webpack.resolveConfig();
};

My component

@Component({
    selector: 'page-vehicle-add',
    templateUrl: './vehicle-add.html',
    styleUrls: ['./vehicle-add.scss'],
    encapsulation: ViewEncapsulation.None
})
export class VehicleAddComponent implements OnInit {
...
}

The Template

<GridLayout rows="auto,auto,auto,auto,*" columns="*" class="page-vehicle-add custom-form">
...
</GridLayout>

The SCSS file code which isn't working/loading

.page-vehicle-add {
    padding: 20;
    border-width: 10;

    .categories {
        horizontal-align: center;
        border-width: 5;

        Button {
            width: 200;
            margin: 0;
            border-width: 1;
        }
    }
}

animation leave not work

Environment

NativeScript-Angular: 12.2.0
Angular: 12.2.0

Describe the bug
:leave or * => void not working

To Reproduce
`import {animate, style, transition, trigger} from '@angular/animations';

export const fadeInOutAnimation = trigger('fadeInOut', [
// OK
transition(':enter', [
style({opacity: 0}),
animate('3s linear', style({opacity: 1}))
]),
// KO
transition(':leave', [
style({opacity: 1}),
animate('3s linear', style({opacity: 0}))
])
]);`

Expected behavior

Await before removing element from DOM

Pollyfill problem after updating to angular 12

Environment
✔ Getting NativeScript components versions information...
✔ Component nativescript has 8.0.2 version and is up to date.
✔ Component @nativescript/core has 8.0.8 version and is up to date.
✔ Component @nativescript/ios has 8.0.0 version and is up to date.
✔ Component @nativescript/android has 8.0.0 version and is up to date.

Describe the bug
After updating our application to angular 12 by following the blog post under https://blog.nativescript.org/nativescript-angular-12/index.html, I have the following issues

WARNING in ./node_modules/inherits/inherits.js 2:13-28
Module not found: Error: Can't resolve 'util' in '/Users/xxx/node_modules/inherits'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "util": false }
@ ./node_modules/css/lib/stringify/compress.js 7:15-34
@ ./node_modules/css/lib/stringify/index.js 6:17-38
@ ./node_modules/css/index.js 2:0-46
@ ./node_modules/@nativescript/core/ui/styling/style-scope.js 2:0-46 201:32-40
@ ./node_modules/@nativescript/core/ui/core/view/view-common.js 12:0-55 77:24-34
@ ./node_modules/@nativescript/core/ui/frame/frame-common.js 8:0-68 521:32-56 600:4-11
@ ./node_modules/@nativescript/core/ui/frame/index.android.js 3:0-67 13:0-31 13:0-31 59:27-36 89:15-50 92:8-43 95:15-42 98:8-35 278:31-53 327:94-116 578:23-29 1062:49-65

1 warning has detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

ERROR in ./node_modules/css/lib/stringify/source-map-support.js 9:9-22
Module not found: Error: Can't resolve 'fs' in '/Users/xxx/node_modules/css/lib/stringify'
@ ./node_modules/css/lib/stringify/index.js 32:21-52
@ ./node_modules/css/index.js 2:0-46
@ ./node_modules/@nativescript/core/ui/styling/style-scope.js 2:0-46 201:32-40
@ ./node_modules/@nativescript/core/ui/core/view/view-common.js 12:0-55 77:24-34
@ ./node_modules/@nativescript/core/ui/frame/frame-common.js 8:0-68 521:32-56 600:4-11
@ ./node_modules/@nativescript/core/ui/frame/index.android.js 3:0-67 13:0-31 13:0-31 59:27-36 89:15-50 92:8-43 95:15-42 98:8-35 278:31-53 327:94-116 578:23-29 1062:49-65

ERROR in ./node_modules/css/lib/stringify/source-map-support.js 10:11-26
Module not found: Error: Can't resolve 'path' in '/Users/xxx/node_modules/css/lib/stringify'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
@ ./node_modules/css/lib/stringify/index.js 32:21-52
@ ./node_modules/css/index.js 2:0-46
@ ./node_modules/@nativescript/core/ui/styling/style-scope.js 2:0-46 201:32-40
@ ./node_modules/@nativescript/core/ui/core/view/view-common.js 12:0-55 77:24-34
@ ./node_modules/@nativescript/core/ui/frame/frame-common.js 8:0-68 521:32-56 600:4-11
@ ./node_modules/@nativescript/core/ui/frame/index.android.js 3:0-67 13:0-31 13:0-31 59:27-36 89:15-50 92:8-43 95:15-42 98:8-35 278:31-53 327:94-116 578:23-29 1062:49-65

ERROR in ./node_modules/source-map-resolve/index.js 3:14-29
Module not found: Error: Can't resolve 'path' in '/Users/xxx/node_modules/source-map-resolve'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

To Reproduce
I just followed the blog post under https://blog.nativescript.org/nativescript-angular-12/index.html

Expected behavior

Sample project

Additional context
Angular 12.0.4

Cannot read property 'call' of undefined

Hi, i opened the ticket in nativescript-angular but i assume it should be here because it happened after i upgraded from nativescript 6 to 8.1.5. Thank you.

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

There is my package.json

{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "repository": "<fill-your-repository-here>",
  "dependencies": {
    "@angular/animations": "^12.2.5",
    "@angular/common": "^12.2.5",
    "@angular/compiler": "^12.2.5",
    "@angular/core": "^12.2.5",
    "@angular/forms": "^12.2.5",
    "@angular/http": "8.0.0-beta.10",
    "@angular/platform-browser": "^12.2.5",
    "@angular/platform-browser-dynamic": "^12.2.5",
    "@angular/router": "^12.2.5",
    "@nativescript/angular": "^12.2.0",
    "@nativescript/background-http": "~5.0.0",
    "@nativescript/camera": "~5.0.0",
    "@nativescript/core": "~8.1.1",
    "@nativescript/datetimepicker": "^2.1.9",
    "@nativescript/firebase": "^11.1.3",
    "@nativescript/geolocation": "~8.0.0",
    "@nativescript/imagepicker": "~1.0.0",
    "@nativescript/theme": "^3.0.1",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@nstudio/nativescript-camera-plus": "^4.1.0",
    "@nstudio/nativescript-loading-indicator": "~4.0.0",
    "@nstudio/nativescript-pulltorefresh": "~3.0.0",
    "@nstudio/nativescript-snackbar": "~2.0.0",
    "nativescript-angular": "^10.0.0",
    "nativescript-imagecropper": "~4.0.0",
    "nativescript-nfc": "~5.0.0",
    "nativescript-permissions": "^1.3.8",
    "nativescript-sound-kak": "^1.2.0",
    "nativescript-theme-core": "~1.0.4",
    "nativescript-ui-chart": "~9.0.0",
    "nativescript-ui-sidedrawer": "~10.0.0",
    "nativescript-webview-interface": "^1.4.2",
    "reflect-metadata": "~0.1.10",
    "rxjs": "~7.3.0",
    "tns-platform-declarations": "^6.5.15",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^12.2.5",
    "@nativescript/android": "8.1.1",
    "@nativescript/schematics": "~0.5.0",
    "@nativescript/types": "~8.1.0",
    "@nativescript/webpack": "~5.0.0",
    "@ngtools/webpack": "^12.2.5",
    "@types/jasmine": "^3.5.11",
    "typescript": "~4.3.5"
  },
  "readme": "NativeScript Application",
  "main": "./src/main.ts"
}

Angular CLI: 13.1.2
Node: 16.13.1

Describe the bug
I upgraded from nativescript 6 to 8.1.5, and since then, every http call that i do give me the following error:

TypeError: Cannot read property 'call' of undefined

From what i found on the internet it may be related to webpack but i don't know. (references :
https://stackoverflow.com/questions/41549923/angular-cannot-read-property-call-of-undefined-when-bootstrapping
webpack/webpack#959 )

To Reproduce
Upgrade a project from nativescript 6 to 8.1.5 and make an http call.

Expected behavior
HTTP calls to work

Additional context
main.ts

// this import should be first in order to load some required settings (like globals and reflect-metadata)
import Theme from "@nativescript/theme";
import { runNativeScriptAngularApp, platformNativeScript } from '@nativescript/angular';

import { AppModule } from "./app/app.module";
import 'zone.js';
runNativeScriptAngularApp({
    appModuleBootstrap: () => platformNativeScript().bootstrapModule(AppModule),
  });

Theme.setMode(Theme.Light);

webpack.config.js

const webpack = require("@nativescript/webpack");

module.exports = (env) => {
	webpack.init(env);

	// Learn how to customize:
	// https://docs.nativescript.org/webpack

	return webpack.resolveConfig();
};

tnsconfig.tns.json

{
    "extends": "./tsconfig",
    "compilerOptions": {
        "module": "esNext",
        "moduleResolution": "node"
    }
}

app.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule, NativeScriptHttpClientModule, NativeScriptFormsModule, ModalDialogService, NativeScriptRouterModule, NativeScriptCommonModule } from "@nativescript/angular";
import { HttpClient, HttpHeaders } from "@angular/common/http";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { NfcService } from "./services/nfc/nfc.service";
import { Auth0Service } from "./services/auth0/auth0.service";
import { LoginComponent } from './login/login.component';

import { ForgotPasswordComponent } from './forgot-password/forgot-password.component';
import { HomeComponent } from './home/home.component';
import { ScanComponent } from './scan/scan.component';
import { ParentsViewComponent } from './parents-view/parents-view.component';
import { SupportComponent } from './support/support.component';
import { ConvertService } from "./services/convert/convert.service";
import { DisableOnTapDirective } from "./disableOnTap-directive/disable-on-tap.directive";
import { PictureService } from "./services/picture/picture.service";


import { SettingsComponent } from './settings/settings.component';
import { SettingsIconComponent } from './settings-icon/settings-icon.component';
import { ScanQuestionsService } from "./services/ScanQuestionsService/ScanQuestions.service";
import { NativeScriptUISideDrawerModule } from "nativescript-ui-sidedrawer/angular";
import { EnterExitHistoryComponent } from "./enter-exit-history/enter-exit-history.component";
import { NativeScriptDateTimePickerModule  } from "@nativescript/datetimepicker/angular";
import { SchoolService } from "./services/school/school.service";
import { CreateEditAccessComponent } from "./create-edit-access/create-edit-access.component";
import { StatisticsComponent } from "./statistics/statistics.component";
import { NativeScriptUIChartModule } from "nativescript-ui-chart/angular";
import { StatisticsDetailsViewComponent } from "./statistics-details-view/statistics-details-view.component";
import { DocumentViewComponent } from "./document-view/document-view.component";
import { AddDocumentComponent } from "./add-document/add-document.component";
import { EnterExitPictureComponent } from "./enter-exit-picture/enter-exit-picture.component";
import { CustomCameraComponent } from "./custom-camera/custom-camera.component";
import { SearchProfilModalComponent } from "./search-profil-modal/search-profil-modal.component";
import { SearchIconComponent } from "./search-icon/search-icon.component";
import { VolumeComponent } from "./volume/volume.component";
import { SnackbarService } from "./services/snackbar/snackbar.service";


@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule,
        NativeScriptRouterModule,
        NativeScriptHttpClientModule,
        NativeScriptFormsModule,
        NativeScriptUISideDrawerModule,
        NativeScriptCommonModule,
        NativeScriptDateTimePickerModule,
        NativeScriptUIChartModule
    ],
    declarations: [
        AppComponent,
        LoginComponent,
        ForgotPasswordComponent,
        HomeComponent,
        ScanComponent,
        ParentsViewComponent,
        SupportComponent,
        DisableOnTapDirective,
        SettingsComponent,
        SettingsIconComponent,
        EnterExitHistoryComponent,
        CreateEditAccessComponent,
        StatisticsComponent,
        StatisticsDetailsViewComponent,
        DocumentViewComponent,
        AddDocumentComponent,
        EnterExitPictureComponent,
        CustomCameraComponent,
        SearchProfilModalComponent,
        SearchIconComponent,
        VolumeComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ],
    providers: [
        NfcService,
        Auth0Service,
        ConvertService,
        PictureService,
        ModalDialogService,
        ScanQuestionsService,
        SchoolService,
        SnackbarService
    ],
    entryComponents: [ParentsViewComponent,StatisticsDetailsViewComponent,EnterExitPictureComponent,CustomCameraComponent,SearchProfilModalComponent]
})
export class AppModule { }

regression: nsTemplateKey not being able to be used by other plugins

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

CLI: 8.0.0
Cross-platform modules: 8.0.8
Android Runtime: 8.0.0
iOS Runtime: 8.0.0
Plugin(s):
NativeScript-Angular: 12.0
Angular: 12.1

Describe the bug
Seems with the rewrite to NG 12 the standardized classes for Templated Items Components were removed. This basically prevents plugins from using the nsTemplateKey directive to specify their own item templates. Plugins now need to define unique directive keys for each plugin, this basically makes it difficult for developers to remember what key they should use with what component/plugin.

Any idea why the code was removed @NathanWalker & @edusperoni ? Here is the PR with which I have added the standardization in the old NS angular plugin and this was working fine pre-12:
NativeScript/nativescript-angular#1520

If there are problems with the old standardization way and how it was used, can we think of some other way so that other plugins can re-use the nsTemplateKey directive and not create their own ones?

To Reproduce

Expected behavior

Sample project

Additional context

NullInjectorError for ModalDialogParams when opening a modal with ActionBar

Environment

CLI: 8.3.3
Android Runtime: 8.3.1
iOS Runtime: 8.3.3
NativeScript-Angular: 14.0.4
Angular: 14.1.3

Describe the bug
Using modal dialogs is not described in the current documentation for Nativescript 8.x, but in the oder documentation for Nativescript 7.x here: https://v7.docs.nativescript.org/angular/ui/ng-components/modal-view-ng#modal-view-actionbar. When opening a modal with an actionbar the page gets blank and a NullInjectorError for ModalDialogParams is shown in the log:

  ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(HomeModule)[ModalDialogParams -> ModalDialogParams -> ModalDialogParams -> ModalDialogParams]:
  NullInjectorError: No provider for ModalDialogParams!
  NullInjectorError: R3InjectorError(HomeModule)[ModalDialogParams -> ModalDialogParams -> ModalDialogParams -> ModalDialogParams]:
  NullInjectorError: No provider for ModalDialogParams!
  at NullInjector.get (file: src/webpack:/modal-example/node_modules/@angular/core/fesm2015/core.mjs:6349:0)
  at R3Injector.get (file: src/webpack:/modal-example/node_modules/@angular/core/fesm2015/core.mjs:6776:0)
  at R3Injector.get (file: src/webpack:/modal-example/node_modules/@angular/core/fesm2015/core.mjs:6776:0)
  at R3Injector.get (file: src/webpack:/modal-example/node_modules/@angular/core/fesm2015/core.mjs:6776:0)
  at R3Injector.get (file: src/webpack:/modal-example/node_modules/@angular/core/fesm2015/core.mjs:6776:0)
  at ChainedInjector.get (file: src/webpack:/modal-example/node_modules/@angular/core/fesm2015/core.mjs:13855:0)
  at lookupTokenUsingModuleInjector (file: src/webpack:/modal-example/node_modules/@angular/core/fesm2015/core.mjs:3279:0)
  at getOrCreateInjectable (file: src/webpack:/modal-example/node_modules/@angular/core/fesm2015/core.mjs:3324:0)
  at Module.ɵɵdirectiveInject (file: src/webpack:/modal-example/node_modules/@angular/core/fesm2015/core.mjs:10868:0)
  at NodeInjectorFactory.ModalViewActionBarC<…>

This happens on android and on ios.
The latest version of Angular 13 and @nativescript/angular 13 is working fine.

To Reproduce

checkout the repository
run the app with ns debug ios or ns debug android

Expected behavior

when clicking on the button SHOW MODAL should show the modal dialog with an action bar

Sample project
https://github.com/alexander-mai/nativescript-angular14-actionbar-modal-error-example

Additional context
package-angular13.json contains a working version of the package.json with angular 13 for the project

[QUESTION] main.tns.ts is missing from the TypeScript compilation Nativescript / Angular + Nativescript/webpack Shared project.

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

CLI: 8.0.2
Cross-platform modules:
Android Runtime:
iOS Runtime:
Plugin(s):
NativeScript-Angular: "@nativescript/angular": "~12.0.0",
Angular: "@angular/core": "~12.1.4",

Describe the bug
How do we move forward with a tsconfig.app.json file for web (angular.json) and a tsconfig.tns.json file for Nativescript?

in a @nativescript/schematics project we had a tsconfig.json and a tsconfig.tns.json file. Inside the webpack.config.js file we had several lines where they mapped the tsconfig file based on the one in the angular.json file to the tns.json file to the env.json file and it would use the most detailed one by default.

in Nativescript/Webpack 5 beta we can see it points us to use TsconfigPathsPlugin

So I still have the tsconfig json file for angular web. This includes main.ts, polyfills.ts, etc. However, when I run the app vis ns debug - it uses the tsconfig.json file from angular.json. Okay, so I figured I needed to update the new webpack.config file to tell it what one to use. I see it tells me to add 'TsconfigPathsPlugin' based on the docs. However, I added the code below to my config file and it's still using the other tsConfig.app.js file

const webpack = require('@nativescript/webpack');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = env => {
webpack.init(env)
webpack.useConfig('angular');

webpack.chainWebpack(config => {
config.resolve.plugin('TsconfigPathsPlugin').use(
new TsconfigPathsPlugin({
configFile: './tsconfig.tns.json',
logLevel: "info",
})
)
});

return webpack.resolveConfig();
}

Feature Request: Allow backnavigation over multipe pages

Is your feature request related to a problem? Please describe.
I am currently trying to move back in the navigation history by skipping multiple pages. For this I would need to be able to search a relevant page in the navigation history ( by its route) and then go back to this page by removing all pages on top of it in the navigation stack.
Seems like this is currently not possible.

Describe the solution you'd like
Would be great to have:
1: On API to be able to search for a page in the navigation stack, based on its route.
2: push all pages on top of the found page from the stack, hence navigate back by skipping multiple pages.

Describe alternatives you've considered
Currently I am storing the state of each page. If I need to move back more than one page I clear the navigation history and recreate the page. However, this is slow and visually appearing as the transition time is slower than it would need to. I am also using the nativescript/uicharts plugin which needs a longer initial loading time of the chart when a page is created.

Tabview (Materialtabs) not working in IOS 15

Hello together,
I like to crosslink the issue here, as I suspect it could be related to Angular. iosOverflowSafeArea + Vertical Page Transitions. See description in linked report. I am only seeing the issue with the material tabs plugin. However, not sure if it is really the source of the error.

nativescript-community/ui-material-components#339

Nativescript 8 and Angular 12 not running when using @Component{styleUrls}.

Environment
% ns info
✔ Getting NativeScript components versions information...
✔ Component nativescript has 8.0.2 version and is up to date.
✔ Component @nativescript/core has 8.0.8 version and is up to date.
✔ Component @nativescript/ios has 8.0.0 version and is up to date.

Angular / Nativescript Angular: 12.0.5

Describe the bug
When having styleUrls: ['./side-drawer.scss'], on AppComponent, Angular does not start, i.e. it hangs just before it should prompt the following log (but it doesn't).

CONSOLE LOG: Angular is running in development mode. Call enableProdMode() to enable production mode.

To Reproduce

$ ns --version
8.0.2
$ ns create test --ng
$ cd test
$ git am - << EOF
From 7743326ef312e0be2446d9f335b1bcb12cdd2962 Mon Sep 17 00:00:00 2001
From: Matthieu Boutier <[email protected]>
Date: Wed, 21 Jul 2021 09:37:59 +0200
Subject: [PATCH] pok

---
 package.json             | 1 +
 src/app/app.component.ts | 3 ++-
 src/app/side-drawer.scss | 4 ++++
 yarn.lock                | 5 +++++
 4 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 src/app/side-drawer.scss

diff --git a/package.json b/package.json
index 2d30384..ba48751 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
   },
   "devDependencies": {
     "@angular/compiler-cli": "~12.0.0",
+    "@nativescript/ios": "8.0.0",
     "@nativescript/types": "~8.0.0",
     "@nativescript/webpack": "beta",
     "@ngtools/webpack": "~12.0.0",
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 5920b7a..19c9a4e 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,7 +1,8 @@
-import { Component } from '@angular/core'
+import { Component } from '@angular/core';

 @Component({
   selector: 'ns-app',
   templateUrl: './app.component.html',
+  styleUrls: ['./side-drawer.scss'],
 })
 export class AppComponent {}
diff --git a/src/app/side-drawer.scss b/src/app/side-drawer.scss
new file mode 100644
index 0000000..4dc2dab
--- /dev/null
+++ b/src/app/side-drawer.scss
@@ -0,0 +1,4 @@
+.compact-row Label {
+  padding: 5, 0, 5, 0;
+  margin: 0, 0, 0, 0;
+}
diff --git a/yarn.lock b/yarn.lock
index 66021e8..1a60c36 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -308,6 +308,11 @@
     glob "^7.1.0"
     mkdirp "^1.0.4"

+"@nativescript/[email protected]":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@nativescript/ios/-/ios-8.0.0.tgz#7942ded15d0ea113607e23393cf67fd9458ec9a5"
+  integrity sha512-gmAl+Jy022tH8XaOURzEd3WuhA8kkppK0MjNqDu6eidc1llILQ+/s6JyTK6Q2l63F5rXFlGtm/Wxkot+SIzV9g==
+
 "@nativescript/theme@~3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@nativescript/theme/-/theme-3.0.1.tgz#fabc676638c22a63932e300ba23acc51f228e9ad"
--
2.30.1 (Apple Git-130)
EOF
$ ns run ios

Expected behavior
App should start!

Related issues
Might be related to #6
Certainly duplicate of NativeScript/nativescript-angular#2352 (it seems people keep posting issues in the wrong place — maybe could you put a message somewhere to redirect them; in the issue template?)

ModalDialogParams getting NullInjectorError for components inside page-router-outlet inside modals

We recently upgraded our app to Angular 14 (from Angular 13), and now all the components inside our modals are unable to get the ModalDialogParams. (When @optional(), the value is null, otherwise it throws a NullInjectorError)

We use components that contain page-router-outlets to allow for routing inside modals. The container component is receiving the ModalDialogParams fine, but the components being routed to in the page-router-outlet do not.

We tracked it down to the change to the page-router-outlet.ts in feature #72 that added support for Angular 14. Specifically, line 347 which changed the scope of the parent injector. If we change this line back to parent: this.location.injector,, we can inject the ModalDialogParams just fine.

Is this expected behavior? We've always been able to inject the ModalDialogParams this way before, but now the parent injector is different than in previous releases.

Cannot capture keydown event in a modal

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

CLI: 14
Cross-platform modules:
Android Runtime: 8.2
iOS Runtime:
Plugin(s):
NativeScript-Angular: 13
Angular: 13.2

Describe the bug
I am unable to capture the keydown event in a modal dialog.

The key press is coming from a hardware keyboard, not the onscreen one.

I can accomplish this in any other component using:

application.on('KEYCODE_DPAD_DOWN', (() => {
	console.log('Keyboard Down Arrow Pressed');
}));

And it works fine.

This is after extending activity.android.ts, and adding:

public dispatchKeyEvent(event) {
    let keyCode = event.getKeyCode();

    switch (keyCode) {
        case android.view.KeyEvent.KEYCODE_DPAD_LEFT:
        case android.view.KeyEvent.KEYCODE_DPAD_UP:
            application.notify({
                eventName: 'KEYCODE_DPAD_UP',
            })
            return true;
        case android.view.KeyEvent.KEYCODE_DPAD_RIGHT:
        case android.view.KeyEvent.KEYCODE_DPAD_DOWN:
            application.notify({
                eventName: 'KEYCODE_DPAD_DOWN',
            })
            return true;
        default:
            return super.dispatchKeyEvent(event);
    }
}

I have tried every manner of capturing the keypress in a modal that I could, none work.

To Reproduce
Extend android activity to capture a keypress, try to capture a keypress in a non-fullscreen modal.

Expected behavior
Should be able to capture the keypress and console log it, similar to how it is in a component.

Sample project

Please let me know if additional info is required.

R3InjectorError(AppModule)[Page -> Page -> Page] - NullInjectorError: No provider for Page!

Error
JS: NullInjectorError: R3InjectorError(AppModule)[Page -> Page -> Page]: JS: NullInjectorError: No provider for Page! JS: at NullInjector.get (file: src\webpack:\rpstrackersng\node_modules\@angular\core\__ivy_ngcc__\fesm2015\core.js:11120:0) JS: at R3Injector.get (file: src\webpack:\rpstrackersng\node_modules\@angular\core\__ivy_ngcc__\fesm2015\core.js:11287:0) JS: at R3Injector.get (file: src\webpack:\rpstrackersng\node_modules\@angular\core\__ivy_ngcc__\fesm2015\core.js:11287:0) JS: at R3Injector.get (file: src\webpack:\rpstrackersng\node_modules\@angular\core\__ivy_ngcc__\fesm2015\core.js:11287:0) JS: at NgModuleRef$1.get (file: src\webpack:\rpstrackersng\node_modules\@angular\core\__ivy_ngcc__\fesm2015\core.js:25352:0) JS: at Object.get (file: src\webpack:\rpstrackersng\node_modules\@angular\core\__ivy_ngcc__\fesm2015\core.js:25066:0) JS: at lookupTokenUsingModuleInjector (file: src\webpack:\rpstrackersng\node_modules\@angular\core\__ivy_ngcc__\fesm2015\core.js:3354:0) JS: at getOrCreateInjectable (file:///data...

app.component.html
<ActionBar title="My App"></ActionBar> <Label [text]= "myAppText"> </Label>

app.component.ts
`
import { Component } from '@angular/core'
import {Page} from '@nativescript/core/ui/page'

@component({
selector: 'ns-app',
templateUrl: './app.component.html',
})
export class AppComponent {

public myAppText = "Hello"

constructor(private page: Page) {
page.actionBarHidden = false;
page.backgroundSpanUnderStatusBar = true;

}

}
`

app-routing.module.ts
`
import { NgModule } from '@angular/core'
import { Routes } from '@angular/router'
import { NativeScriptRouterModule } from '@nativescript/angular'

const routes: Routes = [
{ path: '', redirectTo: '/', pathMatch: 'full' },
]

@NgModule({
imports: [NativeScriptRouterModule.forRoot(routes)],
exports: [NativeScriptRouterModule],
})
export class AppRoutingModule {}
`

Angular 12 migration leads to huge amounts of Change Detection cycles

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

CLI: 8.0.2
"@nativescript/core": "~8.0.0"
"@nativescript/android": "8.0.0",
"@nativescript/ios": "JSC",
"@angular/*": "~12.1.2",
"@nativescript/angular": "~12.0.6"
Describe the bug
After migration to the Angular 12 I am observing huge amounts of Change Detection cycles. About 50 cycles when navigating to an empty page, and about 300 cycles when navigating to a page with content.

Cycles where measured via calls to ngAfterViewChecked().

Note: For everyone observing the same issue. A workaround exists my setting up Angular as follows. I am not sure yet. if this breaks other things:

appModuleBootstrap: (reason: string) =>
platformNativeScript().bootstrapModule(AppModule, { ngZoneEventCoalescing: true })

Using ListView's itemLoading and itemTemplateSelector cause binding errors

Environment

CLI: 8.0.2
Cross-platform modules: 8.0.8
Android Runtime: 8.0.0
iOS Runtime: 8.0.0
Plugin(s): -
NativeScript-Angular: ~12.0.0
Angular: ~12.0.0

Describe the bug

As shown below, using itemTemplateSelector and itemLoading properties simultaneously, the bindings in the ng-template for the listview component does not work properly.

items.component.html

  <ListView [items]="items" [itemTemplateSelector]="templateSelector" (itemLoading)="onItemLoading($event)">
    <ng-template let-item="item" nsTemplateKey="main">
      <StackLayout>
        <Label [text]="item.name"></Label>
      </StackLayout>
    </ng-template>
  </ListView>

items.component.ts


  templateSelector() {
    return "main";
  }

  onItemLoading(args: ItemsLoading) {
    console.log("args", args.index);
  }

This shows following errors:

JS: [HMR][242d1734253494e72b27] success | Successfully applied update.
JS: args 0
JS: ERROR TypeError: Cannot read property 'name' of undefined
JS: args 1
JS: ERROR TypeError: Cannot read property 'name' of undefined
JS: args 2
JS: ERROR TypeError: Cannot read property 'name' of undefined
JS: args 3
JS: ERROR TypeError: Cannot read property 'name' of undefined
... and so on.

If you get rid of 'itemLoading' property, this sample works as expected.

Sample project to reproduce

https://github.com/s-ovation/nslistviewbug

Angular Reactive Forms are broken

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

CLI: 8.0.2
"@nativescript/angular": "~12.0.0",
"@nativescript/core": "~8.0.0",
"@nativescript/ios": "8.0.0",

Describe the bug
When using reactive forms with angular the css styles are not applied correctly to the input TextField. It seems like the CSS classes are always applied onn character input too late.

i.e. first validation result does not provide an update of attached css classes of the view (ng-dirty, ng-valid)
after input of second character, validation result css classes of first result are shown,
and so on...

To Reproduce
Please see attached demo project

Expected behavior
Please try in first textfield of demo:

input character 'a'
Expectation: css classes should be set to: ng-dirty, ng-valid (but this does not happen)
add second character
Expectation: css classes should be set to: ng-dirty, ng-valid ( now we see expected behavior, however this is from
result one.

To prove this, use second textfield which validates integers:

add a first number '1' : expected ng-dirty, ng-valid (is not appearing)
add as a second character a letter i.e. 'a'
Expected behavior: ng-dirty, ng-invalid.
However, now we are now seeing ng-dirty, ng-valid from previous validation result. Please play around with it. It is obvious, that the validation result is always set one character to late.

Sample project

reactive-forms.zip

ModalDialogService causes navigation issue

Overview
ModalDialogService cause navigation issue. Sample code is provided in https://github.com/banchasf/nativescript-modal.git

Environment

CLI: 8.3.0
package.json as in the repository

Describe the bug
When we open Nativescript modal, then close it and it returns a result to the caller component, we found that the modal is not completely closed or destroyed and it causes unexpected navigation. I modified sample master detail app to demonstrate the issue in the repository below
https://github.com/banchasf/nativescript-modal.git

With the code in the repository, we expect the navigation flow to be master -> modal -> detail. In actual result, we get master -> modal -> detail -> master. We can have workaround by using setTimeout to wait until the modal is completely closed. However when the app is in the situation that the host mobile device has low available memory, it needs more delay time to close the modal completely.

To Reproduce

Run the app with the command npx ns run ios --env.aot
Tap a car in the list
Tap to proceed to detail

Expected behavior
When we tap to proceed to the detail, the app should navigate to detail page but it navigate to detail page then redirect back to master page.

Sample project
Code is in https://github.com/banchasf/nativescript-modal.git

Additional context
For the quick fix, I provided a solution in the branch 'navigation' of the repository to have an option to skip navigation history adjustment.

Problems with 'translate' angular animations in Angular 14

There are a number of issues that arise in Angular animations that contain 'translate' styles, but only on Angular 14.

I've created a demo app to demonstrate this:

https://stackblitz.com/edit/nativescript-stackblitz-templates-guamwx

If you switch out the package.json with package-13.json, these problems basically go away.

First of all, the translate animations don't seem to work at all on Android.

You will notice if you run in Android, the translation animations don't run when using angular 14, but they do work on angular 13.

Next, the done even does not run when the animation completes.

Running on iOS, you'll see that the translate animations run, but the done event does not get triggered until the start of the next animation. (You can see this in the console, where the start and end events are logged.). Again, if you switch to use angular 13, these problems go away.

(@animationTransition.done)="animationTriggerEnd()"

In the demo project, animationTriggerEnd() is not run until the next animation begins. However, if you remove the translate animations, the events fire normally:

`        transition(
          (fromState, toState) => fromState < toState,
          [
            style({ opacity: 0 }),
            animate('400ms ease-out', style({ opacity: 1 }))
          ]
        ),`

Lastly, some translate animations just don't work.

If on iOS you switch the translate animations to go from 0 to +/- 100%, the animation doesn't happen: the box just jumps.

`        transition(
          (fromState, toState) => fromState < toState,
          [
            style({ opacity: 0, transform: "translateX(0)" }),
            animate('400ms ease-out', style({ opacity: 1, transform: "translateX(100%)" }))
          ]
        ),`

But if you do this same animation on Angular 13, the animation runs normally.

I'm not sure what's causing all of these issues, but they seemed to appear when Angular 14 came out. I've been trying to work around them, but I haven't been able to find a way yet.

What is causing these issues, and can they be corrected?

Outlets freeze when navigate to a nested route from another tab, only on Android

Issue Description

Outlets freeze when we navigate to a nested route from another TabView only on Android. We have 5 tabs and 2 of them has nested routes. We use page-router-outlet and native/core TabView component.

Steps to reproduce:
Go to Tab 5 -> drill down 3 levels to the nested route -> click the button to navigate to Tab 2, which takes you to Tab 2 w/o any issues-> Go back to Tab 5, you are on the last screen (nested route) but it freezes. You can't go back or can't do anything on the screen. However on iOS, instead of freezing, it goes all the way back to the main outlet.
So apparently the iOS behavior is the intentional behavior of tabView, because tabView keeps only 1 view alive and it's the main outlets in our case?

Our tabView has the androidTabsPosition="bottom" option and we realized that this sets androidOffscreenTabLimit to 1 automatically, so it means only the current tab is alive. I tried adding the androidOffscreenTabLimit="3" option to the tabView (because we have max 3 level nested navigation on Tab 5) , the tabs are not frozen anymore, BUT now the interface jumps back to the main outlet (just like iOS). Any idea how to solve this ?

Also a side note, this started happening after NativeScript 8 upgrade. We were using bottomnavigationbar with NS7 but we had to change to tabView with NS8. We didn't have any freezing or jumping back to the main outlet issues before the update.

Any insight will be appreciated, thanks so much!

Reproduction

No response

Relevant log output (if applicable)

No response

Environment

node: 14.15.0
npm: 7.6.1
nativescript: 8.1.2

### Dependencies

```json
"dependencies": {
  "@angular/animations": "~13.1.1",
  "@angular/common": "~13.1.1",
  "@angular/compiler": "~13.1.1",
  "@angular/core": "~13.1.1",
  "@angular/forms": "~13.1.1",
  "@angular/platform-browser": "~13.1.1",
  "@angular/platform-browser-dynamic": "~13.1.1",
  "@angular/router": "~13.1.1",
  "@nativescript-community/ui-material-bottomnavigationbar": "^6.2.5",
  "@nativescript/angular": "^13.0.0",
  "@nativescript/core": "~8.1.1",
  "@nativescript/email": "^2.0.5",
  "@nativescript/geolocation": "^8.0.2",
  "@nativescript/theme": "~3.0.1",
  "@nstudio/nativescript-cardview": "^2.0.1",
  "@nstudio/nativescript-floatingactionbutton": "^3.0.4",
  "moment": "^2.29.1",
  "nativescript-mapbox-sdk": "file:../well-finder-smartphone-app-.nativescript-mapbox-sdk/src",
  "nativescript-ripple": "^4.0.1",
  "nativescript-ui-sidedrawer": "^10.0.2",
  "nativescript-windowed-modal": "^7.0.0",
  "rxjs": "~7.4.0",
  "zone.js": "~0.11.4"
},
"devDependencies": {
  "@angular-devkit/build-angular": "~13.1.1",
  "@angular/compiler-cli": "~13.1.1",
  "@nativescript/android": "8.1.1",
  "@nativescript/debug-ios": "^1.0.0",
  "@nativescript/ios": "8.1.0",
  "@nativescript/types": "~8.1.1",
  "@nativescript/webpack": "~5.0.0",
  "@ngtools/webpack": "~13.1.1",
  "@types/geojson": "^7946.0.8",
  "node-sass": "^7.0.1",
  "typescript": "~4.4.4"
}

Please accept these terms

I have searched the existing issues as well as StackOverflow and this has not been posted before
This is a bug report
I agree to follow this project's Code of Conduct

TypeError: reader.readAsText is not a function after nativescript-angular 12

Please have a look at this issue here -> https://github.com/NativeScript/nativescript-angular/issues/2365

NgOnDestroy no longer being called when navigating to another route

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

CLI: 8.2.3
Cross-platform modules: 8.2.1
Android Runtime: 8.2.2
iOS Runtime: 8.2.2
Plugin(s):
NativeScript-Angular: 13.0.3
Angular: 13.2.4

Describe the bug

JS: Angular is running in development mode. Call enableProdMode() to enable production mode.
JS: Error: Could not find font file for Font Awesome 5 Pro
JS: light
JS: ns-light
JS: ns-route-reuse-strategy: shouldReuseRoute result: true
JS: ns-router: NSLocationStrategy.replaceState pushing new state: [object Object], title: , url: /scan, queryParams:
JS: ns-router: NSLocationStrategy.prepareExternalUrl() internal: /scan
JS: ns-router: PageRouterOutlet.activateWith() - Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:'')
JS: ns-router: Activated route marked as page: Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:'')
JS: ns-router: PageRouterOutlet.activate() forward navigation - create detached loader in the loader container
JS: ngOnInit
JS: ns-router: NSLocationStrategy._beginPageNavigation()
JS: ns-router: NSLocationStrategy._setNavigationOptions({"clearHistory":false,"animated":true,"transition":{"name":"fade"}})
JS: ns-route-reuse-strategy: shouldReuseRoute result: true
JS: ns-route-reuse-strategy: shouldReuseRoute result: false
JS: ns-router: NSLocationStrategy.path(): /scan
JS: ns-router: NSLocationStrategy.pushState state: [object Object], title: , url: /device-logs, queryParams:
JS: ns-router: NSLocationStrategy.prepareExternalUrl() internal: /device-logs
JS: ns-route-reuse-strategy: shouldDetach isBack: false key: Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:'') result: true
JS: ns-router: PageRouterOutlet.detach() - Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:'')
JS: ns-route-reuse-strategy: store key: Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:''), state: [object Object]
JS: ns-router: Currently not in page back navigation - component should be detached instead of deactivated.
JS: ns-router: Currently not in page back navigation - component should be detached instead of deactivated.
JS: ns-router: PageRouterOutlet.activateWith() - Route(url:'', path:'')->Route(url:'device-logs', path:'device-logs')->Route(url:'', path:'')
JS: ns-router: Activated route marked as page: Route(url:'', path:'')->Route(url:'device-logs', path:'device-logs')->Route(url:'', path:'')
JS: ns-router: PageRouterOutlet.activate() forward navigation - create detached loader in the loader container
JS: ns-router: NSLocationStrategy._beginPageNavigation()
JS: ns-router: nsRouterLink.tapped: /scan clear: false transition: "fade" duration: undefined
JS: ns-router: NSLocationStrategy._setNavigationOptions({"clearHistory":false,"animated":true,"transition":{"name":"fade"}})
JS: ns-route-reuse-strategy: shouldReuseRoute result: true
JS: ns-route-reuse-strategy: shouldReuseRoute result: false
JS: ns-route-reuse-strategy: shouldAttach isBack: false key: Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'') result: false
JS: ns-route-reuse-strategy: shouldAttach isBack: false key: Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:'') result: false
JS: ns-router: NSLocationStrategy.path(): /device-logs
JS: ns-router: NSLocationStrategy.pushState state: [object Object], title: , url: /scan, queryParams:
JS: ns-router: NSLocationStrategy.prepareExternalUrl() internal: /scan
JS: ns-route-reuse-strategy: shouldDetach isBack: false key: Route(url:'', path:'')->Route(url:'device-logs', path:'device-logs')->Route(url:'', path:'') result: true
JS: ns-router: PageRouterOutlet.detach() - Route(url:'', path:'')->Route(url:'device-logs', path:'device-logs')->Route(url:'', path:'')
JS: ns-route-reuse-strategy: store key: Route(url:'', path:'')->Route(url:'device-logs', path:'device-logs')->Route(url:'', path:''), state: [object Object]
JS: ns-router: Currently not in page back navigation - component should be detached instead of deactivated.
JS: ns-route-reuse-strategy: shouldAttach isBack: false key: Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:'') result: false
JS: ns-router: PageRouterOutlet.activateWith() - Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:'')
JS: ns-router: Activated route marked as page: Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:'')
JS: ns-router: PageRouterOutlet.activate() forward navigation - create detached loader in the loader container
JS: ngOnInit
JS: ns-router: NSLocationStrategy._beginPageNavigation()
JS: ns-router: nsRouterLink.tapped: /settings clear: true transition: "fade" duration: undefined
JS: ns-router: NSLocationStrategy._setNavigationOptions({"clearHistory":true,"animated":true,"transition":{"name":"fade"}})
JS: ns-route-reuse-strategy: shouldReuseRoute result: true
JS: ns-route-reuse-strategy: shouldReuseRoute result: false
JS: ns-router: NSLocationStrategy.path(): /scan
JS: ns-router: NSLocationStrategy.pushState state: [object Object], title: , url: /settings, queryParams:
JS: ns-router: NSLocationStrategy.prepareExternalUrl() internal: /settings
JS: ns-route-reuse-strategy: shouldDetach isBack: false key: Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:'') result: true
JS: ns-router: PageRouterOutlet.detach() - Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:'')
JS: ns-route-reuse-strategy: store key: Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:''), state: [object Object]
JS: ns-router: Currently not in page back navigation - component should be detached instead of deactivated.
JS: ns-router: Currently not in page back navigation - component should be detached instead of deactivated.
JS: ns-router: PageRouterOutlet.activateWith() - Route(url:'', path:'')->Route(url:'settings', path:'settings')->Route(url:'', path:'')->Route(url:'', path:'')
JS: ns-router: Activated route marked as page: Route(url:'', path:'')->Route(url:'settings', path:'settings')->Route(url:'', path:'')->Route(url:'', path:'')
JS: ns-router: PageRouterOutlet.activate() forward navigation - create detached loader in the loader container
JS: ns-router: NSLocationStrategy._beginPageNavigation()
JS: ns-router: NSLocationStrategy._beginPageNavigation clearing states history
JS: Avoid using ListView or ScrollView with no explicit height set inside StackLayout. Doing so might results in poor user interface performance and a poor user experience.
JS: Avoid using ListView or ScrollView with no explicit height set inside StackLayout. Doing so might results in poor user interface performance and a poor user experience.
JS: ns-router: nsRouterLink.tapped: /scan clear: false transition: "fade" duration: undefined
JS: ns-router: NSLocationStrategy._setNavigationOptions({"clearHistory":false,"animated":true,"transition":{"name":"fade"}})
JS: ns-route-reuse-strategy: shouldReuseRoute result: true
JS: ns-route-reuse-strategy: shouldReuseRoute result: false
JS: ns-route-reuse-strategy: shouldAttach isBack: false key: Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'') result: false
JS: ns-route-reuse-strategy: shouldAttach isBack: false key: Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:'') result: false
JS: ns-router: NSLocationStrategy.path(): /settings
JS: ns-router: NSLocationStrategy.pushState state: [object Object], title: , url: /scan, queryParams:
JS: ns-router: NSLocationStrategy.prepareExternalUrl() internal: /scan
JS: ns-route-reuse-strategy: shouldDetach isBack: false key: Route(url:'', path:'')->Route(url:'settings', path:'settings')->Route(url:'', path:'')->Route(url:'', path:'') result: true
JS: ns-router: PageRouterOutlet.detach() - Route(url:'', path:'')->Route(url:'settings', path:'settings')->Route(url:'', path:'')->Route(url:'', path:'')
JS: ns-route-reuse-strategy: store key: Route(url:'', path:'')->Route(url:'settings', path:'settings')->Route(url:'', path:'')->Route(url:'', path:''), state: [object Object]
JS: ns-router: Currently not in page back navigation - component should be detached instead of deactivated.
JS: ns-router: Currently not in page back navigation - component should be detached instead of deactivated.
JS: ns-route-reuse-strategy: shouldAttach isBack: false key: Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:'') result: false
JS: ns-router: PageRouterOutlet.activateWith() - Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:'')
JS: ns-router: Activated route marked as page: Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:'')
JS: ns-router: PageRouterOutlet.activate() forward navigation - create detached loader in the loader container
JS: ngOnInit
JS: ns-router: NSLocationStrategy._beginPageNavigation()
JS: ns-router: NSLocationStrategy._setNavigationOptions({"clearHistory":false,"animated":true,"transition":{"name":"fade"}})
JS: ns-route-reuse-strategy: shouldReuseRoute result: true
JS: ns-route-reuse-strategy: shouldReuseRoute result: false
JS: ns-route-reuse-strategy: shouldAttach isBack: false key: Route(url:'', path:'')->Route(url:'device-logs', path:'device-logs')->Route(url:'', path:'') result: false
JS: ns-router: NSLocationStrategy.path(): /scan
JS: ns-router: NSLocationStrategy.pushState state: [object Object], title: , url: /device-logs, queryParams:
JS: ns-router: NSLocationStrategy.prepareExternalUrl() internal: /device-logs
JS: ns-route-reuse-strategy: shouldDetach isBack: false key: Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:'') result: true
JS: ns-router: PageRouterOutlet.detach() - Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:'')
JS: ns-route-reuse-strategy: store key: Route(url:'', path:'')->Route(url:'scan', path:'scan')->Route(url:'', path:'')->Route(url:'', path:''), state: [object Object]
JS: ns-router: Currently not in page back navigation - component should be detached instead of deactivated.
JS: ns-router: Currently not in page back navigation - component should be detached instead of deactivated.
JS: ns-route-reuse-strategy: shouldAttach isBack: false key: Route(url:'', path:'')->Route(url:'device-logs', path:'device-logs')->Route(url:'', path:'') result: false
JS: ns-router: PageRouterOutlet.activateWith() - Route(url:'', path:'')->Route(url:'device-logs', path:'device-logs')->Route(url:'', path:'')
JS: ns-router: Activated route marked as page: Route(url:'', path:'')->Route(url:'device-logs', path:'device-logs')->Route(url:'', path:'')
JS: ns-router: PageRouterOutlet.activate() forward navigation - create detached loader in the loader container
JS: ns-router: NSLocationStrategy._beginPageNavigation()

To Reproduce

Expected behavior
If ngOnInit is being called, why wouldn't ngOnDestroy be called? I am using nsRouterLink to navigate to complete different routes.

Navigation and nested page-router-outlet with lazy loaded children

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

CLI: 8.1.5
Cross-platform modules: 8.1.5
Android Runtime: 8.1.0
iOS Runtime: 8.1.1
Plugin(s): "@nativescript-community/ui-material-bottom-navigation": "~6.2.13"
NativeScript-Angular: 13.0.2
Angular: 13.1.1

Describe the bug

Navigation for a page-router-outlet is not working anymore after navigating back from details view.

I have a navigation setup with nested page-router-outlets, much like this example, except the children (player details and team details) are also lazy loaded modules with their own routes.

After starting the app, and the tabs are loaded with their lazy loaded module, I can navigate to the details view and back. However, when I try to navigate to the details view again, there's no response. I have enabled tracing on the router, and there are no events fired when navigating back. Also no events are fired on new navigation attempts.

If I navigate to another tab, I can repeat the process. Then that will be "stuck" as well.

To Reproduce
Use the example from the link above and lazy load the details components.

Expected behavior
Navigation should keep working regardless of lazy loaded children.

Sample project

Additional context

This was working in @nativescript/angular 13.0.1, but then with issues like #49 and #53

*ngIf appends Span element in the end

Environment

CLI: 8.2.2
Cross-platform modules: 8.2.4-alpha.2
Android Runtime: 8.2.2
iOS Runtime: 8.2.4-alpha.1
Plugin(s):
NativeScript-Angular: 13.0.4-alpha.1
Angular: 14.0.0-next.13

Describe the bug
*ngIf appends an element to the end and ignores its actual location in the node tree.

To Reproduce

<Label textWrap="true">
  <Span *ngIf="true" text="1"></Span>
  <Span text="2"></Span>
</Label>

Expected behavior
Renders as:

<Label textWrap="true">
  <Span text="1"></Span>
  <Span text="2"></Span>
</Label>

Actual behavior
Currently rendering to:

<Label textWrap="true">
  <Span text="2"></Span>
  <Span text="1"></Span>
</Label>

iOS - Angular animations now cause app to crash

Upgrading to Angular 14 now causes animations (that used to work) to crash this app with error:

NativeScript encountered a fatal error: Uncaught Error: No known animation properties specified

I think I tracked this down to where it's happening. In packages/angular/src/lib/animations/utils.ts, the getDeclarations function receives the styles param as type KeyFrame, which is defined at the top of that file as a Map type. However, in the body of the getDeclarations function, it's calling Object.keys on the styles Map, which won't give the desired results. I modded this file in my app's node_modules to get the keys from the Map correctly, and the animations work without crashing.

I think this may have just been an oversight when updating for use with Angular 14 in commit af32ad7.

nativescript / angular Goto Github PK

angular's Introduction

@nativescript/angular

Build packages:

Run demo:

Clean/Reset demo dependencies

Unit tests for iOS and Android:

angular's People

Contributors

Stargazers

Watchers

Forkers

angular's Issues

Issue Description

Reproduction

Relevant log output (if applicable)

Environment

Please accept these terms

Issue Description

Reproduction

Relevant log output (if applicable)

Environment

Please accept these terms

Recommend Projects

Recommend Topics

Recommend Org