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
Related
when I reload the page when I'm on lazy loaded module the app breaks as it tries to import js files from the wrong path. you can see my routing configuration:
app routing module:
{
path: 'accommodations',
canActivate: [AuthGuard],
loadChildren: () => import('./accommodation/accommodation.module').then(m => m.AccommodationModule)
}
accommodation routing module:
const routes: Routes = [
{
path: ':id',
component: AccommodationDetailsComponent
}
];
when I'm on route http://localhost:4200/accommodations/1 for example and I reload the page, browser tries to import js files from http://localhost:4200/accommodations and shows 404 error.
for example, it tries to import runtime js from http://localhost:4200/accommodations/runtime.js
I didnt' find the problem itself, but i found that if I use useHash:true the error goes away
My front end project is using Vue framework with vue-router to control page route.
In router.js file I declare a new Router variable as:
const router = new Router({
routes: [
{
path:'/',
name:'loginComponent',
component:loginComponent,
},
{
path: '/home',
name: 'home',
component: home,
},
]
});
However, When app runs at route part (this.$router.push('/home');), it sucks forever...
Chrome console shows that a file called WebSocket is always pending, which is the main cause I think.
How can I solve this problem, thanks in advance.
I am developing an application in Angular 4. When I am trying to write routes for a feature module, I am getting an error as Error: Cannot match any routes.
Here's the routes code I have used:
const COURSE_ROUTES: Routes = [
{path: '', redirectTo: '/', pathMatch: 'full'},
{path: ':name', component: CourseComponent},
{path: '**', component: ErrorComponent}
];
Routing is working fine and going to the CourseComponent when the route is something like course/angular or course/some-course-name but when I try to inject some XSS script into the same route, such as
course/<script>alert('0wn3d')</script>,
its throwing an error as
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ''0wn3d'' Error: Cannot match any routes. URL Segment: ''0wn3d'
though I have written a wild card entry for error routes. I have tested that the
{path: '**', component: ErrorComponent}
is showing the 404 error page, by removing the
{path: ':name', component: CourseComponent}
and running the app with some random url like course/some-course
Please help me resolve this. Thanks in advance.
It is not possible to have / as the root URL.
{path: 'some-name:name',pathMatch: 'full',component:CourseComponent}
Documented here
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"
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.