I have doubt in routing in angular2.
I have a login screen. After login dashboard and other pages had header and footer which will not be in login.
const routes: Routes = [
{
path:'',
redirectTo: '/login',
pathMatch: 'full'
},
{
path:'login',
loadChildren: './auth/auth.module#AuthModule',
},
{
path: 'dash',
loadChildren: './dash/dash.module#DashModule',
canActivate:[AuthGuard],
data: {
preload: true
}
},
{
path: 'project',
loadChildren: './project/project.module#projectModule',
canActivate: [AuthGuard],
data: {
preload: true
}
}
];
So its loading to the router-outlet in the app.component.html.
Currently I have to use the header component in all module html, like in dash.component.html
<ks-header></ks-header>
<router-outlet></router-outlet>
This router-outlet is a child outlet on which other dash related load.
Same like for other modules.
Is there any other effective way to show common header/sidebar?
I tried it in app.component.html like
<ks-header [userInfo] ="userInfo" [hidden]="isLogin"></ks-header>
<ks-sidebar [hidden]="isLogin"></ks-sidebar>
the islogin will determine logined or not. But I don't think it's a good idea.
You should use nested routes.
One for the base, as routeing between the template page and the login page.
The second and the nested one must be accomplished routeing between templated pages like
HOME, ABOUT, CONTACT ...
You can learn more about nested routes from here. So simple explanation.
And there is another question similar to yours. Namek's answer seems useful.
Related
I have a JS object like so
[
{
name: 'About',
path: '/about'
},
{
name: 'Profile',
path: '/profile'
},
{
name: 'Users',
path: '/users'
}
]
Is there any way for me to link the paths in this object to the pages I have in my pages folder
I tried using the Link component and passing it as prop. This handles the navigation but when the page is refreshed it redirects to the 404 page
Go into your next.config.js file and add this:
module.exports = {
trailingSlash: true,
}
That should fix this issue of 404 when refreshing. As for passing a prop to Link component, that's fine as it is.
Here's a next.js explanation as reference.
I understand there are a lot of discussions about lazy loading on site already. I am asking this question because I didn't find any applicable solution.
I am using routing with lazy loading in Angular 6.
This is what I am trying. In the parent module
{
path: 'holiday',
loadChildren: './holiday/holiday.module#HolidayModule'
}
In child module.
const routes: Routes = [
{path: '',component: HolidayBookingComponent},
{path: ':id', component: HolidayBookingComponent}
];
while navigating "localhost:4200/holiday", it redirects to HolidayBookingComponent correctly
but when I navigate to "localhost:4200/holiday/3" I get
GET http://localhost:4200/holiday/runtime.js net::ERR_ABORTED 404 (Not Found)
Try with
const routes: Routes = [
{path: '',
children :[
{path: '',component: HolidayBookingComponent,
{path: ':id', component: HolidayBookingComponent}
]
},
];
Hope that will help!
working here https://stackblitz.com/edit/angular-yuirrk
Background
I'm writing an enterprise application in Angular 5. One of the large screens I'm working on has many tabs and child components. A majority of clients will get the same version of the screen, but a client or two want custom changes under a couple of tabs.
Question
How do I dynamically load custom components for those couple of tabs where the client wants changes? I know I could use async lazy module loading to load a whole new screen specific for that client, but it seems it would be more efficient to only swap out the child components that have changes rather than the whole screen.
Async loading appears to be the way to go as you can use canLoad to not load unnecessary code for each client. At the child level, if you have multiple components at the same child level to swap, you could try to use named router outlets with async modules for the child components. However, I ran into a bug with async loading and the named router outlets.
Anyone have any other ideas?
Code
Here is the code for the routes I tried when exploring the above idea. The core screen is the parent level screen, async loaded.
export const routes: Routes = [
{
path: '',
component: CoreScreenComponent,
children: [
{
path: 'x-core',
loadChildren: "app/components/core-component-x/core-component-x.module#CoreComponentXComponent",
outlet: 'x'
},
{
path: 'x-client',
loadChildren: "app/components/client-component-x/client-component-x.module#ClientComponentXComponent",
outlet: 'x'
},
{
path: 'y-core',
loadChildren: "app/components/core-component-y/core-component-y.module#CoreComponentYComponent",
outlet: 'y'
},
{
path: 'y-client',
loadChildren: "app/components/client-component-y/client-component-y.module#ClientComponentyComponent",
outlet: 'y'
},
]
}];
With Angular 2, I could make a child route render "over" its parent by defining an empty path and creating an essentially empty base component. I am trying to accomplish something similar with the new Angular router (version 4.3.1), but have hit a roadblock.
To reproduce my problem, here's a Plunker. The routes are defined as:
[{
path: '',
redirectTo: "/master",
pathMatch: "full"
}, {
path: 'master',
component: MasterComponent,
children: [{
path: 'detail/:value',
component: DetailComponent,
children: [{
path: 'subdetail',
component: SubDetailComponent
}]
}]
}]
When I navigate to a detail page, the master page is still visible because I have added a <router-outlet></router-outlet> to MasterComponent. What I need is to replace the master view with the detail. I can accomplish this by making detail/:value a sibling of master rather than a child, but this isn't logically correct in my application and breaks my breadcrumbs.
Is there any proper way to handle this kind of pattern, or will I have to pick a workaround, such as showing and hiding the intended route or manually specifying a dedicated "main" outlet for every link?
The only existing solution that comes close is to define a dummy parent component, but this only works one-level down. If my detail page has another sub-detail page that should also replace master, it gets very messy.
Is there any route-level flag I can set or design pattern to implement to elegantly accomplish this? I am an Angular 2 beginner, but I feel as though something like this should be simple.
First, there is no "new" router in 4.3.1. It's the same router from 2.x.
Second, there were a few changes I needed to make to your plunker to make it work appropriately. The key change was this in the master.component.ts:
<a [routerLink]="['/detail', 5]">
I added a slash. Without the slash it was looking for a route named master/detail/5
The route definition is now flat, so everything will appear "under" your main header.
export const routes: Routes = [
{
path: '',
redirectTo: 'master',
pathMatch: 'full'
},
{
path: 'master',
component: MasterComponent
},
{
path: 'detail/:value',
component: DetailComponent
}
];
The updated plunker is here: https://plnkr.co/edit/EHehUR6qSi248vQPDntt?p=preview
I have a child route path in my #NgModule defined as:
RouterModule.forRoot([
{
path: '',
redirectTo: 'orders',
pathMatch: 'full'
},
{
path: 'orders',
component: ListComponent,
children: [
{
path: 'view/:id',
component: ViewOrderComponent
},
]
}
]),
The problem i have is that when i load in the browser the page /orders loads fine, when i navigate to /orders/view/100 still works, but if i refresh the browser(with the url /orders/view/100) it loads but goes to /orders, it doesnt load /orders/view/100 as expected, i now is loading the page /orders/view/100 because i can see in the Chrome dev tools, but after loading it goes to /orders.
How can i make that after loading the route orders it also loads the route orders/view?
Okay try this. On your second path definition make it an absolute path, "/orders"