I'm trying to display first a landing, then a tabs page, but I'm not sure how to specify the TabsPage in landing.ts.
landing.ts:
startApp() {
//window.localStorage.setItem('username', 'admin');
this.navCtrl.setRoot('TabsPage', {}, {
animate: true,
direction: 'forward'
});
}
Error:
Uncaught (in promise): invalid link: TabsPage
You're trying to deeplink to your TabsPage (.setRoot('TabsPage'))
startApp() {
//window.localStorage.setItem('username', 'admin');
this.navCtrl.setRoot('TabsPage', {}, {
animate: true,
direction: 'forward'
});
}
Instead, try
import { TabsPage } from 'wherever/it/is'
startApp() {
// no quotes around TabsPage
this.navCtrl.setRoot(TabsPage);
}
Related
For example, the url to my "getting started" story is:
http://localhost:6006/?path=/story/angular-component-library-getting-started--page
How would I access this page via routerLink in a template of a storybook story? Right now I have:
const navbarMenuItems = [
{
displayText: 'Home',
routerLink: '/story/angular-component-library-getting-started--page',
},
{
displayText: 'About',
routerLink: '/story/angular-component-library-getting-started--page',
},
{
displayText: 'Google',
href: 'https://google.com',
},
];
And I get the error: Error: Cannot match any routes. URL Segment: 'story/angular-component-library-getting-started--page'
I have tried playing around with adding slashes, removing them, removing the --page suffix, I tried using the page title, nothing works.
Here are my imports and export, for reference:
import { moduleMetadata, Meta, Story } from '#storybook/angular';
import { APP_BASE_HREF, CommonModule } from '#angular/common';
import { RouterModule } from '#angular/router';
import { SandboxNavbarComponent } from '../../app/sandbox/navbar/navbar.component';
export default {
title: 'Angular Component Library/Navbar',
component: SandboxNavbarComponent,
decorators: [
moduleMetadata({
declarations: [TqlIconComponent],
imports: [
CommonModule,
RouterModule.forRoot([
{
path: 'iframe.html',
component: SandboxNavbarComponent,
pathMatch: 'full',
},
]),
],
providers: [
{
provide: APP_BASE_HREF,
useValue: '/',
},
],
}),
],
} as Meta;
I have an app that is working great, but I want to move it behind a login page. The various modules are lazy-loaded and have been working great. However, when I change the app to always go to the login page first (where I will check login status and redirect to the app if logged in), I get an error about routes.
app-routing.module.ts
import { NgModule } from '#angular/core';
import { PreloadAllModules, RouterModule, Routes } from '#angular/router';
const routes: Routes = [
{ path: '', loadChildren: './login/login.module#LoginPageModule' }
// this next line was how the app routed before I tried adding the login page
// { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' }
];
#NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}
login.router.module.ts
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { LoginPage } from './login.page';
const routes: Routes = [
{ path: '', component: LoginPage },
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class LoginRoutingModule { }
login.page.ts
import { ChangeDetectionStrategy, Component } from '#angular/core';
import { Router } from '#angular/router';
import { Store } from '#ngrx/store';
import { AppState } from '../_store/store/app.store';
import { filter } from 'rxjs/operators';
#Component({
selector: 'app-login',
templateUrl: 'login.page.html',
styleUrls: ['login.page.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LoginPage {
constructor(private router: Router, private store: Store<AppState>) {
this.userSubscription = this.store.select(state => state.users.user).pipe(
filter(user => !!user)
).subscribe(user => {
if (user) {
// THIS IS WHERE THE ERROR HAPPENS
this.router.navigate(['/tabs']);
}
});
}
}
this.router.navigate(['/tabs']); is where the error happens:
ERROR Error: Uncaught (in promise): Error: Cannot match any routes.
URL Segment: 'tabs/behaviors' Error: Cannot match any routes. URL
Segment: 'tabs/behaviors'
I'm sure I'm missing something really obvious here. First attempt at lazy loading all the modules. I'm pretty certain I need to reference the tabs module in the login.page file somehow, or in the login.router.module. Any help would be greatly appreciated. The state check for user status works great, I've verified that all of that is working, it is just where it attempts to navigate if user is found.
Try to change to
const routes: Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{ path: 'login', loadChildren: './login/login.module#LoginPageModule' }
{ path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' }
];
With this code this.router.navigate(['/tabs']); you are routing to tabs, but you don't have it declare it. This is for the app.routing.ts file. Don't understand why you have the login.router.ts file.
So after following a suggestion above, and that giving me the same error, and finding no help in the docs for either angular or ionic, I went on a multi-hour change every combination of routings I could and finally something worked.
These are the routes in the app-routing.module.ts
{ path: 'login', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' },
{ path: '', redirectTo: 'login', pathMatch: 'full' },
This is the tabs.router.module.ts before the change that made it work:
{ path: 'tabs', component: TabsPage, children: [ .... ] },
{ path: '', redirectTo: 'tabs/behaviors', pathMatch: 'full' }
This is it now:
{ path: '', component: TabsPage, children: [ ... ] },
That's it. Finally figured it out when accidentally typing in the browser .com:8100/tabs/tabs/behaviors worked. Removing the path: 'tabs' in the tabs routing module fixed it. /tabs goes to the tabs routing, and then /behaviors is the child. My code had added a 2nd layer of /tabs in between the 1st and the /behavior.
I use:
nativescript 4.2
angular 6.0.0
page-router-outlet
navigation from page to page by 'lazyloading' (lateral navigation):
export const routes = [
{
path: "",
loadChildren: "~/pages/start-page/start-page.module#StartPageModule"
},
{
path: "login",
loadChildren: "~/pages/login/login.module#LoginModule"
}, ...
navigate with RouterExtensions with 'clearHistory = true'
When i navigate from page 'Home' to another page and return to 'Home' i see in memory two component 'HomeComponent'. When I repeat the operation their becomes three, four, five, .....
chrome debug window
Try to this for lazy loading routing.
app-routing.module.ts :-
import { NgModule } from "#angular/core";
import { Routes } from "#angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";
const routes: Routes = [
{ path: "", redirectTo: "/login", pathMatch: "full" },
{ path: "startpage", loadChildren: "~/pages/start-page/start-page.module#StartPageModule" },
{ path: "login", loadChildren: "~/pages/login/login.module#LoginModule" }
]
#NgModule({
imports: [NativeScriptRouterModule.forRoot(routes)],
exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }
Redirection Code:-
import { NgZone } from "#angular/core";
import { isIOS } from "tns-core-modules/platform";
import { RouterExtensions } from "nativescript-angular/router";
constructor(private zone: NgZone,
private _routerExtensions: RouterExtensions){ }
gotoStartPage() {
setTimeout(() => {
this.zone.run(() => {
this._routerExtensions.navigate(["startpage"], {
clearHistory: (isIOS) ? true : false,
});
});
}, 500);
}
How to go to a specific page when clicking on a notification?
I use Firebase console to push the notification
I used like this. but it didn't work
fcm.onNotification().subscribe(data=>{
if(data.wasTapped){
this.navcntrl.push(MessagePage);
};
})
How i can do it correctly?
My full code: app.component.ts
export class MyApp {
#ViewChild(Nav) nav: Nav;
rootPage: any = HomePage;
pages: Array<{title: string, component: any}>;
constructor(public platform: Platform,private fcm: FCM, public statusBar: StatusBar, public splashScreen: SplashScreen) {
fcm.onNotification().subscribe(data=>{
this.nav.push(ListPage)
})
this.initializeApp();
this.pages = [
{ title: 'Home', component: HomePage },
{ title: 'List', component: ListPage }
];
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
openPage(page) {
this.nav.setRoot(page.component);
}
}
Thanks in advance
I solve this issue.
You have to add the property “click_ action”: “FCM_PLUGIN_ACTIVITY” to the “notification” object in order to properly use the background method.
Example:
{
"to" : "tokenHere",
"notification" : {
"title": "title",
"body" : "message",
"sound": "default",
"click_action":"FCM_PLUGIN_ACTIVITY"
},
"data": {
"content": "whatever",
},
"priority":"high"
}
and use FCM API. Don’t use firebase console.
I made a button related to login with facebook.
when I click the button, it doesn't work at all.
I added the codes.
what should I do?
please, help me!
I have done that and it's working fine on the real device.If you have any question, please comment below.
Play with Git Repo.
Cloud Plugin for more info.
Note: Fork above git repo and play with it.
app.module.ts
import { CloudSettings, CloudModule } from '#ionic/cloud-angular';
const cloudSettings: CloudSettings = {
'core': {
'app_id': 'd32c02d2'
},
'auth': {
'facebook': {
'scope': ['public_profile', 'email']
}
}
};
#NgModule({
declarations: [
],
imports: [
CloudModule.forRoot(cloudSettings)
],
bootstrap: [IonicApp],
entryComponents: [
],
providers: [
]
})
export class AppModule { }
home.html
<button ion-button block type="button" (click)="fbLogin()">Fb Login</button>
home.ts
import { Component } from '#angular/core';
import { FacebookAuth, User } from '#ionic/cloud-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public facebookAuth: FacebookAuth, public user: User) {
}
fbLogin() {
this.facebookAuth.login();
}
}