For usage with NativeScript for Angular projects.
Clean and setup workspace:
npm run clean.all
npm run build
npm run demo.ios
// or...
npm run demo.android
npm run demo.clean
npm run test.android
npm run test.ios
NativeScript for Angular
Home Page: https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-angular
For usage with NativeScript for Angular projects.
Clean and setup workspace:
npm run clean.all
npm run build
npm run demo.ios
// or...
npm run demo.android
npm run demo.clean
npm run test.android
npm run test.ios
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):
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.
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.
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
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.
Overview
ModalDialogService cause navigation issue. Sample code is provided in https://github.com/banchasf/nativescript-modal.git
Environment
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
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.
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.
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 }
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
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):
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();
}
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):
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
Environment
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.
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!
To Reproduce
Just update your code to Angular13
Expected behavior
Error is not issued and app runs.
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):
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:
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
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
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):
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:
To prove this, use second textfield which validates integers:
Sample project
Environment
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
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.
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
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):
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
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.
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 ()
Environment
[email protected]
@nativescript/[email protected]
@nativescript/[email protected]
@nativescript/[email protected]
(JSC!)@angular/[email protected]
├── @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:
npm run android
or npm run ios
(the home component will show some theme/system appearance details)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?
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
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?)
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):
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
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 })
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):
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.
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"
}
No response
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...
No response
Please have a look at this issue here -> https://github.com/NativeScript/nativescript-angular/issues/2365
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):
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.
I just tried to build a simple app with NatvieScript 8 Angular 12 similar to:
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.
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):
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.
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):
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
TextField
bound to a FormControl
with the formControl
attribute.valueChanged
event and output the value each time the value changes.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
.
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 {}
`
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.
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.
Environment
├── [email protected]
@nativescript/[email protected]
├── @nativescript/[email protected]
├── @nativescript/[email protected]
(JSC)├── @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
ns run android
(or ns run ios
)Expected behavior
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!
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.
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.
<ContentView [visibility]="_activeTab !== 0 ? 'hidden' : 'visible' "
*ngIf="_config?.tabConfigs?.length > 0">
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.
Environment
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
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
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.
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):
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;
}
}
}
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!
No response
No response
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"
}
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?)
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):
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
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.
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):
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
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.
Environment
├── [email protected]
├── @nativescript/[email protected]
├── @nativescript/[email protected]
├── @nativescript/[email protected] (JSC)
├── @nativescript/[email protected]
├── @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
Environment
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>
Environment
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
ns debug ios
or ns debug android
Expected behavior
SHOW MODAL
should show the modal dialog with an action barSample 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
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
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 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
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.
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 { }
Environment
HMR does not work as it should. Only with the --no-hmr flag the application is restarted.
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.