I have the following route:
path: ':id', component: ViewBookPageComponent },
And when added it produces the error:
Error: Cannot read property 'id' of null
I'm not performing a null check in the component since the property will be available when the component is navigated to and in this case the auth guard is also keeping rerouting to login prior to any of the book routes being shown.
This is a stacblitz demo:
https://stackblitz.com/edit/angular-ngrx-slice-demo-fork-with-id-route?file=src%2Fapp%2Fbooks%2Findex.ts
If I comment out the route, the error no longer appears, so it seems Angular is instantiating the component prior to it being routed to.
Is the following fix your problem?
const routes: Routes = [
{
path: 'find',
component: FindBookPageComponent,
},
children:[
{
path: 'result',
component: SearchResultComponent,
},
children:[
{
path: 'book/:id',
component: ViewBookPageComponent ,
}
]
]
]
The AuthGuard is not protecting the route. It needs to be declared within the Book module itself. See this question for more details.
Related
I am working on an application that uses lazy-loaded modules for each main part of the app. I have one that I two router outlets in a primary one and one called details.
const routes: Routes = [
{ path: '', component: BooksComponent, resolve: {books: BooksResolver},
{ path: ':id', component: BookDetailsComponent, resolve: { book: BookResolver},outlet: "details"},
];
with the HTML like below
<router-outlet></router-outlet>
<router-outlet namme="details"></router-outlet>
Then each book item I have a router link like below
[routerLink]="['/', { outlets: { details: [book.id] } }]"
When I click on an item in I get the following error: ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: '53'. Currently I have the details displaying in the primary router outlet but I can not get the details to show when a user clicks on the book item. I am not sure why this is not working I looked in the documentation and This seems to be the correct way of doing it haveing all routes at the same level. ANy help would be appreciated.
I think you have a problem with multiple exits, so LET me give you a little example that I hope makes sense to you
{
path: 'a', component: AComponent, children: [
{path: 'd', component: DComponent},
{path: 'c', component: CComponent,outlet:'right'},
// a/(d//right:c)
]
},
In the component AComponent
<a [routerLink]="['./',{outlets:{primary:['d'],right:['c']}}]">d/c</a>
<router-outlet></router-outlet>
<router-outlet name="right"></router-outlet>
Multiple egress can be regarded as child routes
I am trying to set up router in my Vue app. Everything seemed to work fine until i started to try implementing children routes. Now when i try to access child route i get an error message along with some warnings:
What happens when i click on child router-link
My router setup:
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', redirect: '/welcome' },
{
name: 'welcome',
path: '/welcome',
component: WelcomePage
},
{
name:'noteLists',
path: '/noteLists',
component: NoteListLinks,
children: [
{
name:'noteListSheets',
path: ':id',
components: FullNoteSheet
}
]
}
],
linkActiveClass: 'active'
});
All other route links work fine.
The components template where child links are used and rendered looks like that:
<template>
<router-link
:to="setNoteListLink(entry.id)"
:key=entry.id
v-for="entry in notesListEntry"
>
{{entry.name}}
</router-link>
<router-view></router-view>
Function setNoteListLink just creates a links like '/noteList/1'.
The error says that it "Cannot read property 'writeDebug' of undefined" and writeDebug is a method on a component that it tries to load when i click on the route (FullNoteSheet), so i assume there is something wrong with the component and not the router. But component works just fine if i try to load it separately, by jst putting it in App component template.
If you have dealt with such issues and know the solution please let me know.
You have a typo in the noteListSheets route; It should be component: FullNoteSheet not components: FullNoteSheet
When using vue-router the standard set up is
main.js requires the routes.js file, which will look something like this
//routes.js
import Register from './components/Register'
import Login from './components/Login'
module.exports = [{
path: `/`,
component: Login,
}, {
path: `/register`,
component: Register,
}]
My question is why can I just do
//routes.js
module.exports = [{
path: `/`,
component: require('./components/Login'),
}, {
path: `/register`,
component: require('./components/Register'),
}]
When I try it, I get this console error
Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Anonymous>
<App> at src/App.vue
<Root>
**import and require work differently see the link bellow there are good documentation about the topic. **
es6 features
and require how Actually Works
**see the document how node js work under the hood how module.export work what is the nodejs design pattern (how node js wrap our code within Immediately invoked function expression and pass code into v8 engine)
you can simply midify your routes.js file
component:() => import('./components/Register.vue') or
component: require('./components/Login.vue').default
both will work
[{ path: '/', component:() => import('./components/Register.vue') },
{ path: '/register', component: require('./components/Login.vue').default }];
I have a feature module that I load in the AppModule, the AppRoutingModule looks like
const appRoutes: Routes = [
...
{
path: 'move-request/:id',
loadChildren: 'app/modules/move_requests/move_requests.module#MoveRequestModule'
},
...
];
And the configuration of routing for the feature module looks like
const moveRequestRoutes: Routes = [
{
path: '',
component: MoveRequestFormComponent,
data: {title: 'Move Request'}
},
{
path: 'move-request-success',
component: RequestSuccessComponent,
data: {title: 'Move request success'}
},
];
I would like to navigate to MoveRequestFormComponent as the default component when move-request/:id is routed to, this works fine, but when I call
this.router.navigate(['/move-request-success', {}]);
In MoveRequestFormComponent after some response from the server, I get
zone.js:665 Unhandled Promise rejection: Cannot match any routes. URL Segment: 'move-request-success' ; Zone: <root> ;
This configuration was working before I switched to Angular 6, Is it because of the change in the AppModule, where I have excluded this feature module as an import?
Any assistance on what I am missing would be much appreciated. As I have also tried with having a third component which will be the default component and uses the router-outlet to render the children and have a children property on this route to have as children
{
path: '',
component: MoveRequestFormComponent,
data: {title: 'Move Request'}
},
{
path: 'move-request-success',
component: RequestSuccessComponent,
data: {title: 'Move request success'}
},
But that also did not work, it stayed on the MoveRequestFormComponent, when 'move-request-success' was navigated to.Or maybe I should change the approach?
You don't have to import the feature module in AppModule as it is lazily-loaded. When you navigate to move-request/:id/move-request-success, the path matches the default route with path:'', and then it will look for and children of that route. You should add pathMatch:'full' to the first route, which is the default in this case. Since the mentioned route matches the first route and is unable to find and match any children, it is showing the error.
this.router.navigate(['/move-request-success', {}]);. If you add a / to a route this means you use absolute path from root. Have you tried without / ?
EDIT:
I think I see your problem. You navigate to a module with multiple components, which means after lazy loading the router configuration from the loaded module is used. This means
move-request/:id
Is the root of your module and every subroute needs to include the modules root in the url:
Your route should be move-request/:id/move-request-success
Urls in lazy loaded modules are:
module root (in your case move-request/:id) + configured route of the specific component (in your case move-request-success)
I am trying to implement lazy loading for a module. This module has a bunch of child routes with a unique outlet name. This doesn't seem to work when I try to visit the routes.
This can be seems from this example that I saved: https://plnkr.co/edit/NNXAoZItM00RIIxzemts?p=preview
You can see that I have the child route set to
{ path: 'list', component: HeroListComponent, outlet: 'abc' },
in hero-routing.module.ts
and router outlet to:
<router-outlet name="abc"></router-outlet>
in hero.component.ts
I should be able to visit localhost:3000/heroes/(abc:list) when I am running it locally, but it doesn't seem to work.
Note: You can run the plunker example locally by download the zip file and running npm install then npm start.
The child routes do not seem to work with default unamed routes.
Change the lazy loaded module routes to include a redirect from default unamed route to a named route.
const routes: Routes = [
{ path: '', redirectTo: 'start', pathMatch: 'full' },
{ path: 'start', component: HeroComponent,
children: [
{ path: 'list', component: HeroListComponent, outlet: 'abc' },
{ path: ':id', component: HeroDetailComponent }
]
}
];
Finally change the navigation link for 'heroes' lazy loaded module to include the named outlet information. Be sure to specify the complete url as '/heroes/start', do not leave it to the default '/heroes'.
<a [routerLink]="['/heroes/start',{outlets: {abc:['list']}}]"
routerLinkActive="active">Heroes</a>