Develop Reference

Angular named router outlet no matched routes

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

VueJS 3 Router behaves differently in Dev and Production

I'm pretty new to VueJS and have a problem I can't grasp right now.
I coded a little App which works absolutely fine under vue serve, but when I build it and upload the dist folder to my webserver I'm experiencing a weird problem.
I have the following Routes:
/home
/overview
/listing
/detail
I start at home, click on a button go to overview, from there to listing and from there to detail. Every template has a a "Go Back" Link which works with
#click="$router.back()"
When testing locally with Vue Serve it behaves as expected.
When I built it and upload the dist folder I get the weird error that when I'm on "Detail" and go back, it goes to "Overview" instead of "listing". I notice that the address in the browser is always one level "off". For example if I go back from overview to home, it shows the home-template but the addressbar shows /listing.
Does anyone have an idea what I'm doing wrong? Thanks a lot!
I already tried $router.go(-1), which results in the same error..
My router file looks pretty standard I'd say:
{
path: '/home',
name: 'Home',
component: Home
},
{
path: '/overview',
name: 'Overview',
component: Overview
},
{
path: '/listing',
name: 'Listing',
component: Listing
},
{
path: '/detail',
name: 'Detail',
component: Detail
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
It works great in vue serve mode, but just not when using the dist folder online..

Angular feature routing module - Child component not loaded

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)

Angular 4 lazy load module doesn't work with named child outlet

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>

Cannot read property 'visitExpression' of undefined after copying module

I am currently working on an Angular2 project with custom modules to keep the code clean. Everything was fine until I copied this module into another project.
Ever since I've copied the module into another project, I get the following error: Uncaught TypeError: Cannot read property 'visitExpression' of undefined.
After hours of googling I found out a couple of possible reasons, which I have all tested (and did not work):
Double comma's (,,) in the routing
Empty selectors in components
Here are some other things I tried:
Look up every import in the module and make sure it is correct.
Build the typescript files with Gulp (build succeeded without warnings/errors)
I am kind of clue less as to what to try next, any suggestions?

Any misplaced commas in Routes array can cause this
const authRoutes: Routes = [, //<--- This was my issue when I faced it
{path: 'signup', component: SignupComponent},
{path: 'signin', component: SigninComponent},
]

This error occurs when there may be a extra comma or different expression in imports.

I got it because of misplacing comma
const routes: Routes = [
{ path: 'dashboard', component: DashboardComponent},
{ path: 'login', component: LoginComponent }
];