I upgraded to the newest NativeScript version (8.4) with Angular 13. tns doctor says everything is OK.
I have an outlet.
The root route is a page with a mapbox map.
When I navigate forward from the root route in the same outlet, everything happens as expected, I get the new page perfectly.
But when I navigate back I can see the previous Page for one second, then a blank screen, then the same page re-starts.
I can see in the console ngOninit() runs again when it shouldn't do anything just show the previous page again.
I figured out the map gets duplicated and it causes crashes.
if (this._routerExtensions.canGoBack) {
this._routerExtensions.back({ relativeTo: this.route });
}
{
path: 'map',
component: NSEmptyOutletComponent,
loadChildren: () =>
import('../../../libs/xplat/nativescript/features/src/lib/pages/map').then(m => m.MapModule),
outlet: 'map',
canActivate: [AuthGuard]
},
{
path: 'nearby/:id',
//component: NSEmptyOutletComponent, // navigating back doesn't work when this is active
loadChildren: () =>
import('../../../libs/xplat/nativescript/features/src/lib/pages/nearby').then(m => m.NearbyModule),
outlet: 'map',
canActivate: [AuthGuard]
},
Everything worked perfectly with 8.2, I had to upgrade because 8.2 couldn't handle the downloaded files after Android 11.
I suggest updating to latest angular (and #nativescript/angular) as a lot of fixes regarding navigation were done since angular 13.
Related
I serve my site over this url.
Here is the code that I have in my next.config.js file for the cache policy:
module.exports = {
...
async headers() {
return [
{
source: '/:all*(svg|jpg|png|gif)',
locale: false,
headers: [
{
key: 'Cache-Control',
value: 'public, max-age=5184000, must-revalidate',
},
],
},
]
},
}
If you access the website with Chrome, there is no issue. But with Firefox, here is what you get:
Basically, the images are not being loaded correctly, and I don't understand the error... The other elements are being loaded correctly.
Another weird thing is that:
If I do "Ctrl+Shift+R", none of the images will load.
If I do "Ctrl+R", some will succeed to load.
It's as if the server needed some time before being able to load the images. I don't know NextJS enough to debug that, though...
I finally nailed it!
Basically, custom protocol handlers like: window.open(myprotocol://open${params}, '_self') are immediately stopping the page from loading on Firefox. I'm not sure if this is expected, though.
I just had to wait for the page to load:
React.useEffect(() => {
const onLoad = () => window.open(`myprotocol://open${params}`, '_self')
window.addEventListener('load', onLoad)
return () => window.removeEventListener('load', onLoad)
}, [])
I wrote some code to capture the back button event on android when I was using nativescript 5 and it was working fine, but after upgrading to nativescript 6 weird behaviors appeared like:
1- if clear history is set to true, the app navigate to the page then close.
2- if clear history is set to false it navigates to the page then navigate back to the previous page.
An example for this behavior:
Let's say I want the app to navigate to page A when back button pressed,
and I am in page B so the two weird behaviors are:
clearHistory: true the app navigate to page A and close.
clearHistory: false the app navigate to A and return to B.
Here is the code:
if (application.android) {
application.android.on(application
.AndroidApplication
.activityBackPressedEvent, backEvent);
}
function backEvent(){
console.log('pressed')
const navigationEntry = {
moduleName: 'views/mainPage/main-page',
animated: true,
clearHistory: false,
transition: {
name: "slideLeft",
duration: 380,
curve: "linear"
}
}
frame.topmost().navigate(navigationEntry)
}
Is there something that I miss in nativescript 6?
Project github repo here
If you like to navigate upon back button, you must cancel the back navigation first by setting the cancel flag to true.
function backEvent(args) {
args.cancel = true;
console.log('pressed')
const navigationEntry = {
moduleName: 'views/mainPage/main-page',
animated: true,
clearHistory: false,
transition: {
name: "slideLeft",
duration: 380,
curve: "linear"
}
}
frame.topmost().navigate(navigationEntry)
}
Edit
I'm using https://github.com/hypery2k/nativescript-urlhandler to open a deep link within my app - using NativeScript vue, and vuex. It seems that in order to get at the methods needed to do routing [$navigateTo etc] this plugin needs to be set up slightly differently from the examples given in docs.
import Vue from "nativescript-vue";
import Vuex from "vuex";
Vue.use(Vuex);
import { handleOpenURL } from 'nativescript-urlhandler';
new Vue({
mounted() {
handleOpenURL( (appURL) => {
console.log(appURL)
// Settings is the variable that equals the component - in this case settings.
this.$navigateTo(Settings);
});
},
render: h => h("frame", [h(Home)]),
store: ccStore
}).$start();
handleOpenURL needs to be called within Mounted - then you can parse out the appURL and reference the page (component) that you wish to navigate to. I have been advised against calling handleOpenURL from within router - but I'm not sure why, and it works without error - and I have access to the methods for routing... so if anyone knows if this is a bad idea - please let me know :) Thanks!
All the stuff below that I wrote before has probably confused things - I'm referencing components within my vuex store to make them easily available from the router.
This is based on a solution by https://github.com/Spacarar - it can be found here: https://github.com/geodav-tech/vue-nativescript-router-example. It's a great solution because you don't have to include every single component within each component to use in navigation - it gives an almost vue router like experience.
I'm using https://github.com/hypery2k/nativescript-urlhandler to open a deep link within my app - however, I'm having problems opening the link.
In my app.js file, I have the following:
import Vue from "nativescript-vue";
import Vuex from "vuex";
Vue.use(Vuex);
....
import { handleOpenURL } from 'nativescript-urlhandler';
import ccStore from './store/store';
handleOpenURL(function(appURL) {
// I have hardwired 'Settings' in for testing purposes - but this would be the appURL
ccStore.dispatch('openAppURL', 'Settings');
});
....
new Vue({
render: h => h("frame", [h(Home)]),
store: ccStore
}).$start();
I'm storing the route state within vuex, and have various methods which work (clicking on a link loads the component). However, handleOpenURL exists outside of vue... so I've had to access vuex directly from within the handleOpenURL method. I've created an action specifically for this case - openAppURL.. it does exactly the same thing as my other methods (although I've consolidated it).
When clicking on an app link, I am NOT taken to the page within the app. I have put a console log within openAppURL and can see it is being called, and the correct route object is returned... it just doesn't open the page. The SetTimeOut is used because nextTick isn't available from within vuex.
I am at a loss on how to get the page to appear...
const ccStore = new Vuex.Store({
state: {
user: {
authToken: null,
refreshToken: null,
},
routes: [
{
name: "Home",
component: Home
},
{
name: "Log In",
component: Login
},
...
],
currentRoute: {
//INITIALIZE THIS WITH YOUR HOME PAGE
name: "Home",
component: Home //COMPONENT
},
history: [],
},
mutations: {
navigateTo(state, newRoute, options) {
state.history.push({
route: newRoute,
options
});
},
},
actions: {
openAppURL({state, commit}, routeName ) {
const URL = state.routes[state.routes.map( (route) => {
return route.name;
}).indexOf(routeName)];
return setTimeout(() => {
commit('navigateTo', URL, { animated: false, clearHistory: true });
}, 10000);
},
....
}
etc....
I have been advised to post my findings as the answer and mark it as correct. In order to use nativescript-urlhandler with vue, you must initialise the handler from within vue's mounted life cycle hook. Please see above for greater detail.
import Vue from "nativescript-vue";
import Vuex from "vuex";
Vue.use(Vuex);
import Settings from "~/components/Settings";
import { handleOpenURL } from 'nativescript-urlhandler';
new Vue({
mounted() {
handleOpenURL( (appURL) => {
console.log(appURL) // here you can get your appURL path etc and map it to a component... eg path === 'Settings. In this example I've just hardwired it in.
this.$navigateTo(Settings);
});
},
render: h => h("frame", [h(Home)]),
store: ccStore
}).$start();
I'm using Laravel framework and I'm very new to it.
Right now I'm trying to put in the Fullcalendar plugin, which I've done it before in other frameworks (Codeigniter, Play framework) and it worked amazingly.
However in Laravel, it doesn't seem to work like how it suppose to. The calendar doesn't show correctly, the prev and next buttons not show up, and the events not showing.
Please help
Here is my code. I'm using mockup events on the frontend.
$('#schedule').fullCalendar({
header: {
right: '',
center: '',
left: 'prev,next title weekNumber'
},
titleFormat: "D MMMM YYYY [(สัปดาห์ที่ 1 ของ 12)]",
defaultView: 'agendaWeek',
aspectRatio: 1,
events: events,
eventRender: function(event, element) {
var content = '<div class="fc-title">'+event.title+'</div>';
content += '<div class="fc-desc">'+event.description+'</div>'
element.find('.fc-content').html(content);
},
eventMouseover: function(event, jsEvent, view) {
$(this).append('<div class="event-hover"><div class="hover-pointer"></div><div>'+event.hoverContent+'</div></div>')
},
eventMouseout: function( event, jsEvent, view ) {
$('.event-hover').remove();
}
});
I've now found an answer to this.
It's not because of laravel.
I've added the fullcalendar.print.css into it that's why the css was messed up. So I've now removed it and it works perfect.
Thanks anyway for all the help
So I have this Backbone App where I use Codeigniter for the Backend. For some reason, pushState:true does not work.
So, my main.js of my backbone app has this:
Backbone.history.start({ pushState: true, root: App.ROOT });
My app.js has this:
var App = {
ROOT: '/projects/mdk/'
};
and my navigation module, which renders the menulinks, each item has this:
this.insertView(new ItemView({
model: new Navigation.ItemModel({
href: App.ROOT + 'home',
class: 'home',
triggers: 'home',
route: this.route
})
}));
and the model for it:
Navigation.ItemModel = Backbone.Model.extend({
defaults: {
href: '',
text: '',
triggers: [],
route: ''
}
});
All I get from this is "Page not found"...
Add: When I in the view change it to href:'#news' - it works, but it dont really makes sense...
Anyone who knows the issue here?
From the documentation (http://backbonejs.org/#History):
Note that using real URLs requires your web server to be able to
correctly render those pages, so back-end changes are required as
well. For example, if you have a route of /documents/100, your web
server must be able to serve that page, if the browser visits that URL
directly.
The problem is that your server isn't responding to whatever URL your app is on. For every URL that your Backbone app can reach, your server MUST return a valid HTML page (contianing your Backbone app).
ok I found a solution by myself:
I made this hack:
$(document).on('click', 'a:not([data-bypass])', function (evt) {
var href = $(this).attr('href');
if (href && href.indexOf('#') === 0) {
evt.preventDefault();
Backbone.history.navigate(href, true);
}
});
and then I made:
href: '#home',
That solved the problem, now evereythings runs fluently..