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!!
Related
when I run the program, only the first path is running, ie the first component. When I move, the first path is working again. What do I have to do to make it all work? As the picture shows, Navbar shows the component on the home page, but not the other components. I would be glad if you help.enter image description here
App.Module.ts
#NgModule({
declarations: [
AppComponent,
NavComponent,
LoginComponent,
RegisterComponent,
NavbarComponent,
SidebarComponent,
FooterComponent,
RoleComponent,
RoleAddComponent,
RoleUpdateComponent,
RoleAuthorizationComponent,
RoleMenuComponent,
RoleMenuUpdateComponent,
HomeComponent,
],
imports: [
BrowserModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
AppRoutingModule,
],
providers: [AlertifyService],
bootstrap: [AppComponent],
})
export class AppModule {}
**app-routing.module**
const routes: Routes = [
{
path: '',
redirectTo: '/login',
pathMatch: 'full',
},
{
path: 'login',
component: LoginComponent,
},
{
path: 'register',
component: RegisterComponent,
},
{
path: 'home',
component: HomeComponent,
canActivate: [AuthGuard],
children: [
{
path: '',
component: NavbarComponent,
pathMatch: 'full',
},
{
path: '',
component: SidebarComponent,
pathMatch: 'full',
},
{
path: '',
component: FooterComponent,
pathMatch: 'full',
},
],
},
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
[1]: https://i.stack.imgur.com/D0RMR.png
[enter image description here][1]enter code here
[1]: https://i.stack.imgur.com/lwxUY.png
Why it is not working?
Basically, in this case, it works fine. Position of angular routes matters.
So u have something like this, you are clicking the home button and your URL change to something like this (localhost.com/home), then the first route is match and you are redirected to NavbarCompoent, work is done so no more redirection to other components.
Read more https://angular.io/guide/router
Solution:
This is one of the many solutions:
1.
Create one more component with or without module for those 3 (Navbar, Sidebar, and Footer Components), style them as you want (use selectors in HTML).
Route for a home component should look like this:
{
path: 'home',
component: HomeComponent,
canActivate: [AuthGuard],
children: [
{
path: '',
component: **NEWCOMPOENNT**,
},
],
},
Other solutions require using nested router outlets.
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 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 } });
I created child router in my router configuration and configured my child router in way that it redirects to parent router component. But the configuration doesn't work as expected. Instead it redirects to error page as it didn't find the configured path.
My app.route.ts file
import { ModuleWithProviders } from '#angular/core';
import { CanActivate, Routes, RouterModule } from '#angular/router';
// Component
import { HomeRouterComponent } from '../../modules/home/homerouter.component';
import { ChannelComponent } from '../../modules/channels/channel.component';
import { ErrorComponent } from '../../modules/errorPage/error.component';
const appRoutes: Routes = [
{
path: 'home',
component: HomeRouterComponent,
canActivate: [LoginCheck]
},
{
path: '',
redirectTo: 'home',
pathMatch: 'full',
},
{
path: 'channel',
component: ChannelComponent,
children: [
{
path: '',
redirectTo: 'channel',
pathMatch: 'full',
}
]
},
{
path: '**',
component: ErrorComponent
}
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
May I ask why you have a child route without a path? But since it's not an actual path, you wouldn't need to redirect anywhere, since there is no change in url. I had a similar setup where I did not want to show a child initially upon navigation. Leaving it empty worked fine for me, so try:
{
path: 'channel',
component: ChannelComponent,
children: [
{
path: '',
}
]
}
I'm having some issues working with react-router and webpack-dev-server to achieve nested url routing.
webpack.config.js
output: {
path: path.resolve(__dirname, 'build'),
publicPath: "/", <-- this enabled routing to /register/step2
filename: "js/bundle.js",
},
routes.js
const routes = {
childRoutes: [
{ path: '/', component: Home },
{ path: '/login', component: Login },
{ path: '/register', component: Register },
{ path: '/register/step2', component: SecondStep },
]
};
export default (<Router routes={routes} history={createBrowserHistory()} />);
When clicking around in the appliation, I can get to /register/step2 but once I hit refresh in the browser, my common.js and bundle.js is missing: 404, since it's trying to load everything from /register/ directory.
Can anyone help? Thanks.
I figured it out. 2 things that is needed to enable this.
webpack.config.js
devServer: {
historyApiFallback: true <-- this needs to be set to true
}
routes.js
const routes = {
childRoutes: [
{ path: '/', component: Home },
{ path: '/login', component: Login },
{ path: '/register', component: Register, childRoutes: [
{ path: 'step2', component: SecondStep },
] },
]
};
Make sure your webpack configuration file contains following code:
output: {
publicPath: '/'
},
devServer: {
historyApiFallback: true
}
See more in this article
If you use hashHistory instead of createBrowserHistory() it will keep the server from requesting to your current url on your server.
export default (<Router routes={routes} history={hashHistory} />);