I want to pass data to another page.
My app-routing.module is like this :
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', loadChildren: './home/home.module#HomePageModule' },
{ path: 'web-page/:url', loadChildren: './web-page/web-page.module#WebPagePageModule' },
{ path: 'qrscan', loadChildren: './qrscan/qrscan.module#QrscanPageModule' },
];
With HTML i can successfully pass data :
<ion-button expand="full" [routerLink]="['/web-page/', urlBooking]" routerDirection="forward">BOOKING</ion-button>
But i am struggling to do in typescript :
this.router.navigate(['web-page'], { queryParams: { 'url': "https://apple.stackexchange.com/questions/180387/xcode-failed-to-download-use-the-purchases-page-to-try-again" } });
You dont say anything about what's not working, but you might want to url encode your query param. This should work just fine. And use decodeURIComponent where you use that param.
const url = encodeURIComponent("https://apple.stackexchange.com/questions/180387/xcode-failed-to-download-use-the-purchases-page-to-try-again");
this.router.navigate(['web-page'], { queryParams: { url } });
Related
I use Magento2 for a PWA with react as CMS and Venia-ui as theme, and I'm totally new to this. I want to change the link of cart page with a local-intercept.js but when I go to the link, the page is not displayed.
The page not displayed
My package.json
"pwa-studio": {
"targets": {
"intercept": "./src/targets/local-intercept"
}
}
My local-intercept.js
function localIntercept(targets) {
targets.of('#magento/venia-ui').routes.tap(routes => [
...routes,
{
name: "Cart",
pattern: "/cart",
exact: true,
path: "../overrides/venia-ui/lib/code/CartPage"
},
{
name: "CreateAccountPage",
pattern: "/create-account",
exact: true,
path: "../overrides/venia-ui/lib/code/CreateAccountPage"
}
]);
}
module.exports = localIntercept;
I already tried to display the cart page and it works.
The path to access the cart page on my local-intercept is ok.
I want to fix the bug of the cart page before the "create account page". Maybe it will fix the bug for this two pages at the same time
#magento/pwa-buildpack: 7.0.0
#magento/venia-ui: 5.0.0
react: 16.9.0
Try like this and return routes,
module.exports = targets => {
targets.of('#magento/venia-ui').routes.tap(routes => {
routes.push({
name: 'Login',
pattern: '/customer/login',
path: require.resolve(
'../overrides/venia-ui/components/LogIn/LogIn.js'
)
}),
routes.push({
name: "Register",
pattern: '/customer/register',
path: require.resolve(
'../overrides/venia-ui/components/LogIn/Register/RegisterUser.js'
)
}),
routes.push({
name: "Forget Password",
pattern: '/customer/forgetpassword',
path: require.resolve(
'../overrides/venia-ui/components/ForgotPassword/forgotPassword.js'
)
}),
routes.push({
name: "Customer Profile",
pattern: '/account-profile',
path: require.resolve(
'../overrides/venia-ui/components/AccountProfilePage/accountProfilePage.js'
)
});
return routes;
});};
And no need to give like,
"intercept": "./src/targets/local-intercept"
You can give,
"intercept": "src/targets/local-intercept"
I'm working on an app that has the following use case which I'm not sure how to implement.
I'm on a page that display a list of Game/Match Results. When I click on that particular Game I want to be brought to a more detailed page for that Game, however this Detailed page is a tabs page (has 2 tabs on it).
Here's the code in my List of Games page:
<ion-card *ngFor="let match of matches; let i = index" tappable routerLink="/../match-details/match-details-info/{{match.id}}"
Once I click on that ion-card I want to be brought to a page that has tabs - I imagine the URL should look something like /match-details/match-details-info/XYZ1234345 but I'm not sure how to get there.
Here is my match-details-routing.module.ts:
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { MatchDetailsPage } from './match-details.page';
const routes: Routes = [
{
path: '',
component: MatchDetailsPage,
children: [
{
path: 'match-details-info/:id',
children: [
{
path: '',
loadChildren: '../match-details-info/match-details-info.module#MatchDetailsInfoPageModule'
}
]
},
{
path: 'match-details-lineup/:id',
children: [
{
path: '',
loadChildren: '../match-details-lineup/match-details-lineup.module#MatchDetailsLineupPageModule'
}
]
},
{
path: 'match-details-scorers/:id',
children: [
{
path: '',
loadChildren: '../match-details-scorers/match-details-scorers.module#MatchDetailsScorersPageModule'
}
]
},
{
path: '',
redirectTo: '/match-details/match-details-info',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/match-details/match-details-info',
pathMatch: 'full'
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class MatchDetailsPageRoutingModule {}
Here is the error I'm seeing
Error: Cannot match any routes. URL Segment: 'match-details/match-details-info/inhOKexG3AtcJNnj0xyW'
Error: Cannot match any routes. URL Segment: 'match-details/match-details-info/inhOKexG3AtcJNnj0xyW'
The url looks correct to me but for some reason it can not match the route.
Also including part of the app-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { AuthGuard } from './services/user/auth.guard';
const routes: Routes = [
{ path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
{ path: 'match-details/:id', loadChildren: './pages/match-details/match-details.module#MatchDetailsPageModule' },
{ path: 'player-details/:id', loadChildren: './pages/player-details/player-details.module#PlayerDetailsPageModule' },
{ path: 'login', loadChildren: './pages/login/login.module#LoginPageModule' },
//{ path: 'admin-home-tabs, loadChildren: './pages/admin-home-tabs/admin-home-tabs.module#AdminHomeTabsPageModule' },
{ path: 'reset-password', loadChildren: './pages/reset-password/reset-password.module#ResetPasswordPageModule' },
On your routes you can include the /:id in the path of the match-details-info page as below, this will indicate that the page accepts an id parameter
const routes: Routes = [
{
path: '',
component: MatchDetailsPage,
children: [
{
path: 'match-details-info/:id',
children: [
{
path: '',
loadChildren: '../match-details-info/match-details-info.module#MatchDetailsInfoPageModule'
}
]
},
{
path: 'match-details-lineup',
children: [
{
path: '',
loadChildren: '../match-details-lineup/match-details-lineup.module#MatchDetailsLineupPageModule'
}
]
},
{
path: 'match-details-scorers',
children: [
{
path: '',
loadChildren: '../match-details-scorers/match-details-scorers.module#MatchDetailsScorersPageModule'
}
]
},
{
path: '',
redirectTo: '/match-details/match-details-info',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/match-details/match-details-info',
pathMatch: 'full'
}
];
The routerLink on your ion-card should then include the match-details-info path to navigate directly to the tab, you should then also move the code to get the id from to the match-details-info page
<ion-card *ngFor="let match of matches; let i = index" tappable routerLink="/../match-details/match-details-info/{{match.id}}"
I'm developing very basic blog application that display blog posts from markdown files. When i click each post, it will open on the new route with dynamically create page with createPages functionality. The problem is When i pointing the templates/blogpost.js in the gatsby-node.js.
It is showing like this.
Your site's "gatsby-node.js" created a page with a component that doesn't exist.
Error :
The path to the missing component is "C:\Users\viper\Desktop\react\gatsby\portfolio\imlohith\src\templates\blog.js"
The page object passed to createPage:
{
"path": "/post-four",
"component": "C:\\Users\\viper\\Desktop\\react\\gatsby\\portfolio\\imlohith\\src\\templates\\blog.js"
}
const postTemplate = path.resolve(`src/templates/blog.js`)
return graphql(`
{
allMarkdownRemark {
edges {
node {
html
id
frontmatter {
path
title
date
author
}
}
}
}
}
`).then(res => {
if (res.errors) {
return Promise.reject(res.errors)
}
res.data.allMarkdownRemark.edges.forEach(({ node }) => {
createPage({
path: node.frontmatter.path,
component: postTemplate,
})
})
})
}
Gatsby-congig.js file
const config = require('./config');
module.exports = {
pathPrefix: config.pathPrefix,
siteMetadata: {
title: config.siteTitle,
description: "This is awesome site awesome awesome"
},
plugins: [
'gatsby-plugin-react-helmet',
'gatsby-plugin-catch-links',
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/pages`,
name: 'pages',
},
},
'gatsby-transformer-remark',
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: config.manifestName,
short_name: config.manifestShortName,
start_url: config.pathPrefix || config.manifestStartUrl,
background_color: config.manifestBackgroundColor,
theme_color: config.manifestThemeColor,
display: config.manifestDisplay,
icon: config.manifestIcon, // This path is relative to the root of the site.
},
},
'gatsby-plugin-sass',
'gatsby-plugin-offline',
],
};
here is my routerModule i want to redirect the blank (first page) should be the first child of the Maincompoenent. when is try it in browser it showing nothing but when i try /web it shows me that page.
export const rootRouterConfig: Routes = [
{ path: '', redirectTo: '/web', pathMatch: 'full' },
{
path : '',
component : MainComponent,
children: [
{
path : 'web',
loadChildren: './shop/shop.module#ShopModule'
},
{
path: 'pages',
loadChildren: './pages/pages.module#PagesModule'
},
{
path: 'blog',
loadChildren: './blog/blog.module#BlogModule'
}
]
},
{
path: '**',
redirectTo: 'web'
}
];
here is shop module , i want redirect to first route and use as a main page of site
const routes: Routes = [
{
path: '',
component: HomeFiveComponent,
},
{
path: 'left-sidebar/collection/:category',
component: CollectionLeftSidebarComponent
},
{
path: 'right-sidebar/collection/:category',
component: CollectionRightSidebarComponent
},
{
path: 'no-sidebar/collection/:category',
component: CollectionNoSidebarComponent
},
{
path: 'left-sidebar/product/:id',
component: ProductLeftSidebarComponent
},
{
path: 'right-sidebar/product/:id',
component: ProductRightSidebarComponent
},
{
path: 'no-sidebar/product/:id',
component: ProductNoSidebarComponent
},
{
path: 'col-left/product/:id',
component: ProductColLeftComponent
},
{
path: 'col-right/product/:id',
component: ProductColRightComponent
},
{
path: 'column/product/:id',
component: ProductColumnComponent
},
{
path: 'accordian/product/:id',
component: ProductAccordianComponent
},
{
path: 'left-image/product/:id',
component: ProductLeftImageComponent
},
{
path: 'right-image/product/:id',
component: ProductRightImageComponent
},
{
path: 'vertical/product/:id',
component: ProductVerticalTabComponent
},
{
path: 'search',
component: SearchComponent
},
{
path: 'wishlist',
component: WishlistComponent
},
{
path: 'compare',
component: ProductCompareComponent
},
{
path: 'cart',
component: CartComponent
},
{
path: 'checkout',
component: CheckoutComponent
},
{
path: 'checkout/success',
component: SuccessComponent
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ShopRoutingModule { }
this might be an old question but you have a '/' in your redirect url you should remove that and it would work.
{ path: '', redirectTo: 'web', pathMatch: 'full' },
for others that may stumble on this question like me always make sure that the redirect is on top.
I think this you need to specify where to redirect it in 'children'. Here you find the redirect snippets. This may help you.
I need to add culture before every route for application. I am still using RC4.
How can I modify my current routes to achieve the desired result?
export const routes: RouterConfig = [
...ItemRoutes,
...LibraryRoutes,
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent },
{ path: '**', redirectTo: 'dashboard' }
];
Now after authentication, my redirect link is
localhost/en
I have the application config with the current culture when App component is loaded, ultimately I would like to set the language there and have it as a prefix route.
With my current setup, I will get redirected to dashboard.
How can I add the culture parameter as the first parameter to all the routes?
Is there something I should know regarding the routing and culture/language settings? Whats the best way to set the language on the front end side?
Below solution is not exactly adding a prefix to all routes, but it may help,
export const routes: RouterConfig = [
...ItemRoutes,
...LibraryRoutes,
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent },
{ path: '**', redirectTo: 'dashboard' }
]
export const localeRoutes: RouterConfig = [
{ path: '', redirectTo: 'en' , pathMatch: 'full'},
{ path: 'en', children: routes },
{ path: 'fr', children: routes }
]
You have to make sure all your routes are configured from here only, If Routes are defined in the imported module, they will be treated separately. However this approach will work with Lazy loaded routes if configured here.
Hope this helps!!