My Ionic app works fine when I started it with my PC at work on my android device. Now I am at home and I pulled everything from github to my private windows PC and then I ran "npm install" and "cordova platform add android" and "ionic run android --device". Now the app does not work like before. I have a page where I load images from a backend server.
<ion-content padding>
Test
{{test}}
<ion-card *ngFor="let image of images" (click)="goToProfilePage(image.hash);">
<img src="{{image.url}}"/>
<div class="card-title">{{image.name}}</div>
<div class="card-subtitle">{{image.address}}, {{image.zip}} {{image.city}}</div>
</ion-card>
</ion-content>
TS:
images: any;
test: any;
constructor(public navCtrl: NavController, public navParams: NavParams, public uiHelper: UiHelper, public api: ApiService, public zone: NgZone) {
this.test = "Test2";
this.loadImages();
}
loadImages() {
this.test = "Test3";
this.uiHelper.showLoading();
this.test = "Test4";
this.api.getImagesForScreen().then(
response => {
this.test = "Test5";
if (response['status'] == constants.API_ON_SUCCESS) {
this.test = "Test6";
console.log("Loaded");
this.zone.run(() => {
this.test = "Test7";
this.images = response['data'];
this.shuffle(this.images);
this.uiHelper.dismissLoading();
});
}
else {
this.uiHelper.dismissLoadingAndPrintApiErrorWithMessage(response['messages']);
}
},
err => {
this.uiHelper.dismissLoadingAndPrintApiError();
}
);
}
The view output is "Test Test4". So it seems like the view is not updating anymore within the promise which is returned from api.getImagesForScreen(). The code should work fine, because if I open chrome://inspect and open the console there is "Loaded" logged. So he definitely should show me "Test6" or "Test7" on the view. The promise on api.getImagesForScreen is created like this:
import {Promise} from 'es6-promise';
...
new Promise((resolve, reject) => {
this.http.get(url).map(res => res.json()).subscribe(
data => {
resolve(data);
},
err => {
reject(err);
}
);
});
Someone can help me with it?
EDIT:
One more weird thing: The problem occurs when I open the site from an other site. If I set this page as the start page everything is working. But when I switch the page and then go back to that page again, it is not working anymore. So it seems the first time where something is loaded from the backend it is working but on the second time it is not working anymore (only the view, because the console still logs the "loaded success"). And there are no errors in console...
Related
After the app receives a deep link and navigates to it, the route (screen) that was specified as a deep link becomes the home screen! After receiving the deep link, each time the app is updated (and automatically re-loaded on the Android emulator), the app navigates to that deep link route (screen). How can I remove this route from the navigation state?
Demonstration of the Scenario:
adb shell am start -W -a android.intent.action.VIEW -d "casualjob://InvitedEmployee" com.casualjob
App is triggered by the command above and navigates to the route InvitedEmployee
User clicks on the Home screen link and navigates to it
I update the app's code
The app is automatically re-loaded to reflect the new code change
The app starts in InvitedEmployee, rather than the Home screen. I expect it to navigate to the Home screen!?
Deep Linking Configuration:
const config = {
screens: {
SingleStack: {
initialRouteName: "InitialScreen",
screens: {
EmployerActionVacancyScreen: "EmployerVacancyAction/:itemID/:opType/:itemStatus?",
ListShiftEmployeeInviteScreen: "InvitedEmployee",
InitialScreen: "*",
},
},
}
};
Stack Definition:
const SingleStack = () => {
const MyStack = createNativeStackNavigator();
return (
<MyStack.Navigator screenOptions={defaultScreenOptions}>
<MyStack.Screen name="InitialScreen" component={InitialScreen} options={{ title: "Home" }}/>
<MyStack.Screen name="ListShiftEmployeeInviteScreen" component={ListShiftEmployeeInviteScreen} options={{ title: "Shifts List", }}/>
</MyStack.Navigator>
);
};
I tried executing different pieces of code that I added to a useEffect hook in the route (screen) that the deep link leads to (InvitedEmployee in the example above). None of them seems to work!?
Solution 1 - throws an error:
The action 'RESET' with payload {"index":0,"routes":[{"name":"initialScreen"}]} was not handled by any navigator. This is a development-only warning and won't be shown in production.
const isFocused = useIsFocused();
useEffect( () => {
async function _fetchData() {
props.navigation.reset({
index: 0,
routes: [{ name: "initialScreen" }], // this is the home screen
});
}
if (isFocused) {
_fetchData();
}
}, [isFocused, ]);
solution 2: this does NOT seem to have any effect. As soon as the App is re-laoded after the code update, the deep-link's route appears back in the navigation state.
const isFocused = useIsFocused();
useEffect( () => {
async function _fetchData() {
props.navigation.dispatch(state => {
if (!state?.routes || state?.routes < 2) {
return;
}
const routes = state.routes.filter( (item, index) => {
if (item.name === "ListShiftEmployeeInviteScreen") { // This is the route (screen) that the deep link leads to
return false;
}
return true;
});
if (routes?.length > 0) {
return CommonActions.reset({
...state,
routes,
index: routes.length - 1,
});
}
return;
});
}
if (isFocused) {
_fetchData();
}
}, [isFocused, ]);
I'm currently adding a browser extension through a folder like so:
module.exports = (on, config) => {
on('before:browser:launch', (browser, launchOptions) => {
const extensionFolder = 'some/local/path';
if (browser.family === 'chromium'){
launchOptions.args.push(`--load-extension=${extensionFolder}`)
return launchOptions
}
})
}
which works fine, the extension is loaded onto the browser.
Is there a way to have it automatically running as well from the start, not just loaded on?
If that makes sense ...
msTeams.authentication.getAuthToken is returning failure Callback with Error message- Auth Library Error. It is working fine for Android and Desktop. The issue only occurs on iOS.
Following is the code snippet for the reference,
getClientToken() {
return new Observable<any>(subscriber => {
this.teamsService.authentication.getAuthToken({
resources: ['https://graph.microsoft.com/openid',
'https://graph.microsoft.com/user.read.all',
'https://graph.microsoft.com/group.read.all',
'https://graph.microsoft.com/groupmember.read.all'],
successCallback: clientToken => {
subscriber.next({ clientToken, type: this.authType });
subscriber.complete();
},
failureCallback: reason => {
subscriber.error(reason);
}
});
});
}
enter image description here
New to cypress, but did a couple projects in Protractor and TestCafe.
I'm aware of the controversy using PO's in cypress, but due to the complexity / nature of our app, we're going with it.
Refactoring the test to remove PO's and include the app ID's works. With the page objects, we get the 'requires a DOM element' error.
// myPo.js
class LoginPage {
loginPageCon() {
return cy.get('#page-login');
}
forgotPasswordLnk() {
return cy.get('#forgotPassword');
}
emailTxt() {
return cy.get('#email');
}
forgotPasswordCon() {
return cy.get('#page-forgot-password');
}
}
export default LoginPage;
// myTest.spec.js
import loginPage from '../pageObjects/myPo.js';
const loginPage = new LoginPage();
describe('Authorization', () => {
it('can direct to the azure instance', () => {
cy.visitHome();
cy.get(loginPage.loginPageCon);
});
describe('Forgot Password', () => {
it('clicking forgot password sends you to the correct screen', () => {
cy.get(loginPage.forgotPasswordLnk).click();
cy.get(loginPage.forgotPasswordCon);
});
});
});
You are returning a function reference to cy.get() when you call cy.get(loginPage.forgotPasswordLink).
Change It to:
loginPage.forgotPasswordLink().click()
Your page object is already returning a chainable of cy.get()
Im using video in my project ,but video is playing in background ,When i move to another component.This problem occurs only in ios ,not in android
Html
<VideoPlayer
src="{{videoUrl}}"
height="300"></VideoPlayer>
angular
index:any
videoUrl :any
ngOnInit() {
this.router.paramMap.subscribe(
(response) =>{
this.index = response.get('id')
this.videoUrl=this.galleryService.getVideoById(this.index)
console.log(response)
}
)
}
This is my code .
Listen to navigatingFrom event on your current Page and call pause() method on the VideoPlayer.
HTML
<VideoPlayer #player
src="{{videoUrl}}"
height="300"></VideoPlayer>
TS
#ViewChild("player") player: ElementRef;
constructor(private page: Page) { }
ngOnInit() {
this.router.paramMap.subscribe(
(response) => {
this.index = response.get('id')
this.videoUrl=this.galleryService.getVideoById(this.index)
console.log(response)
});
this.page.on(Page.navigatingFromEvent, () => {
this.player.nativeElement.pause();
});
}
ngOnDestroy() {
this.page.off(Page.navigatingFromEvent);
}
You may also use Router Events on Angular, but you might have to filter the appropriate route.