Im using angular and wanted to try lazy loading with multiples modules, and i getting this error Error: Cannot match any routes. URL Segment: 'home/users/profile'
So well i been like a few long hours trying to solve this problem but i foundno answer
APP MODULE
{
path: 'home',
component: HomeComponent,
loadChildren: () =>
import('./components/home/home.module').then((m) => m.HomeModule),
},
{
path: 'auth',
loadChildren: () =>
import('./components/auth/auth.module').then((m) => m.AuthModule),
},
{
path: '',
pathMatch: 'full',
redirectTo: 'home',
},
HOME ROUTING MODULE
{
path: 'users',
loadChildren: () =>
import('../users/users.module').then((m) => m.UsersModule),
},
USERS ROUTING MODULE
{
path: '',
outlet: 'child',
component: UsersComponent,
},
{
path: 'user/:id',
outlet: 'child',
component: UserComponent,
},
{
path: 'profile',
outlet: 'child',
component: ProfileComponent,
},
Here is the repo if you need to see something else https://github.com/ginebras/user-system
I don't see any need for using named outlets, you are complicating things for yourself. Let's keep it simple, So I removed 'child' from your <router-outlet> as well as removed outlet: child from your routes.
I updated your User's Routing in user-routing.module, It should look like this:
RouterModule.forChild([
{
path: '',
component: UsersComponent,
pathMatch: 'full',
},
{ path: 'profile', component: ProfileComponent },
{
path: 'user-detail/:id',
component: UserComponent,
},
]),
],
I also changed the user:/id path to user-detail:id for readability. You can change it back or you change from where you are opening user:/id to user-detail:id.
I update the stackblitz too, have a look: https://stackblitz.com/edit/angular-ivy-rmxi8g?
Welcome Alejø.
Most likely you need to remove this line
component: HomeComponent,
You need to use component or loadChildren but not both. You can put the HomeComponent as an empty path in the home routing module. Don't forget pathMatch: 'full' on all your empty paths.
Related
In this project I am trying to learn Angular and nesting components. For some reason I can't navigate to /home page. The page is not showing. Any help please. Thank you.
app-routing.module.ts
const routes: Routes = [
{ path: '', pathMatch: 'full', redirectTo: '/home' },
{ path: 'home', component: IndexComponent },
{ path: 'view/:id', component: ShowComponent },
{ path: 'new', component: NewComponent },
{ path: 'edit/:id', component: EditComponent },
{ path: '**', component: IndexComponent }
];
Just update your code to
[{
path: '',
pathMatch: 'full',
redirectTo: 'home' // you dont need /home
},
{
path: 'home',
component: IndexComponent
}
]
I need to reload the current route.
I read many posts and the solution below works for me when I am reloading routes that are not defined as the default route of the app-
this.router.navigateByUrl('/', {skipLocationChange: true}).then(() =>
this.router.navigate([XXXX])
);
But for the default route this does not work for some reason, any ideas why?
My app-routing.module (output is my default route, and it is by lazy loading).
const appRoutes: Routes = [
{
path: 'login',
component: LoginComponent
},
{
path: 'loginError',
component: LoginErrorComponent
},
{ path: 'settings',
loadChildren: './settings/settings.module#SettingsModule',
canActivate: [AuthGuard],
},
{ path: 'output',
loadChildren: './researcher-output-list-standalone/researcher-output-list-standalone.module#ResearcherOutputListStandaloneModule',
canActivate: [AuthGuard],
},
{ path: '',
redirectTo: 'output',
pathMatch: 'full',
canActivate: [AuthGuard],
},
{ path: '**',
redirectTo: 'output',
canActivate: [AuthGuard],
},
];
I have a problem with Angular routing. I have main app routing module and sub module with its own routing module and router-outlet but routes defined in this submodule are shown using root router outlet and not the child one.
My folder structure:
My code listings
app-routing.module.ts
const routes: Routes = [
{ path: '', component: HomeComponent, pathMatch: 'full' }
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.component.html
<router-outlet></router-outlet>
home-routing.module.ts
const routes: Routes = [
{ path: '', component: LandingPageComponent},
{ path: 'register', component: RegisterComponent },
{ path: 'login', component: LoginComponent }
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class HomeRoutingModule { }
home.component.html
...
<div class="inner cover">
<router-outlet></router-outlet>
</div>
...
That's what I get when I use empty path - it opens home component properly.
But when i enter /register i get plain html from login.component.html without template in home.component.html file
EDIT
I added name to child outlet
<router-outlet name="home"></router-outlet>
Changed route names to:
const routes: Routes = [
{ path: '', component: LandingPageComponent, outlet: 'home'},
{ path: 'register', component: RegisterComponent, outlet: 'home' },
{ path: 'login', component: LoginComponent, outlet: 'home' }
];
Now I got that error:
EDIT 2
I try to access those routes in 2 ways:
A link(which may be incorrect):
<a routerLink="/login">Log In</a></li>
Or typing manually:
localhost:4200/login
In Angular 2, router outlets can be named:
<router-outlet>
<router-outlet name="children"></router-outlet>
</router-outlet>
App:
const routes: Routes = [
{ path: '', component: HomeComponent, pathMatch: 'full' }
];
Home:
const routes: Routes = [
{ path: '', component: LandingPageComponent, outlet: 'children'},
{ path: 'register', component: RegisterComponent, outlet: 'children' },
{ path: 'login', component: LoginComponent, outlet: 'children' }
];
You can even define child routes:
const routes: Routes = [
{ path: '',
component: HomeComponent,
pathMatch: 'full', children: [
{ path: '', component: LandingPageComponent, outlet: 'children'},
{ path: 'register', component: RegisterComponent, outlet: 'children' },
{ path: 'login', component: LoginComponent, outlet: 'children' }
]
}
];
http://onehungrymind.com/named-router-outlets-in-angular-2/
If you want those 3 components to be rendered inside of the HomeComponent in a named outlet, then you need to define the following routes:
const routes: Routes = [
{ path: '',
component: HomeComponent,
pathMatch: 'full'
},
{ path: 'landing', component: LandingPageComponent, outlet: 'children'},
{ path: 'register', component: RegisterComponent, outlet: 'children' },
{ path: 'login', component: LoginComponent, outlet: 'children' }
];
And inside of app.component.html add the named router outlet
....//html template
<router-outlet name="children"></router-outlet>
....//html template
EDIT 1:
To navigate to the named outlets you need to use the following routed links:
//inside of home.component.html
<a [routerLink]="[{ outlets: { children: ['login'] } }]">Take me to login!</a>
The generated link will look like:
root/(children:login)
More info in the following link to the docs
EDIT 2:
I changed the original routes and the component template where the named outlet is added. Why?
it is not possible, as far as I know, to have a named outlet with an empty path (''). The empty path tells angular that the named outlet is empty (no component is currently rendered in it).
I believe your problem has to do with declarations. I can not know for certain since you didn't show the code in your app.module.ts and home.module.ts file and have not tested this fully myself.
A component needs to be declared inside the module connected to the template with the desired routing outlet. In your case the login component would need to be added to "declarations" in your home.module.ts file and removed from "declarations" in the app.module.ts file.
Angular does not seem allow you to reuse the same component in multiple routing-outlets unless they are in the same template, since it would cause an error stating "x component declared in multiple modules".
I have an Angular2 project built with this Angular 2 Webpack Starter but I cannot get the fallback route to work correctly. In my app.routes.ts I have:
import { Routes } from '#angular/router';
import { HomeComponent } from './home';
import { DataResolver } from './app.resolver';
export const ROUTES: Routes = [
{
path: '',
component: HomeComponent
},
{
path: 'getstarted', loadChildren: './getstarted#GetStartedModule'
},
...
{
path: 'notfound', loadChildren: './notfound#NotFoundModule'
},
{
path: '**', loadChildren: './notfound#NotFoundModule'
},
];
The not found path above works correctly but the fallback route (**) does not work correctly. Instead of showing the NotFoundModule it does not load a module at all and I get no errors. However, when I do this it redirects correctly:
...
{
path: 'notfound', loadChildren: './notfound#NotFoundModule'
},
{
path: '**', redirectTo:'/notfound', pathMatch: 'full'
},
];
I do not want to redirect though because I do not want to change the url to /notfound by redirecting. How can I make my top version work or what else can I do to make this work?
So, I just tried it and it seems that you cannot use lazy routes to set your fallback page. This should work :
export const ROUTES: Routes = [
{
path: '',
component: HomeComponent
},
{
path: 'getstarted', loadChildren: './getstarted#GetStartedModule'
},
...
{
path: 'notfound', loadChildren: './notfound#NotFoundModule'
},
{
path: '**', component : NotFoundComponent
},
];
I'm using Angular 2 routing for my application and it works pretty well but I have no idea how to define the "otherwise" route. So a route that will be displayed if none if the current URL does not correspond to any "supported" route.
Here is an example of my current configuration:
#RouteConfig([
{ path: '/', name: 'Home', component: StoryComponent, useAsDefault: true },
{ path: '/story', name: 'Story', component: StoryComponent },
{ path: '/subscription', name: 'Subscription', component: SubscriptionComponent}
])
This hasn't currently been implemented in angular 2. The best current solution is to use a solution like #Gary showed.
{ path: '**', component: PageNotFoundComponent }
as shown in the angular guide routing section(https://angular.io/docs/ts/latest/guide/router.html).
There is no 'otherwise' route in angular 2 yet. But the same functionality can be achieved using wildcard parameter, like so:
#RouteConfig([
{ path: '/', redirectTo: ['Home'] },
{ path: '/home', name: 'Home', component: HomeComponent },
// all other routes and finally at the last add
{path: '/*path', component: NotFound}
This will only load the 'NotFound' component and the url will be same as what you navigate to. In case you want all not matching routes to redirect to a '404' url, you can do something like:
//at the end of the route definitions
{ path: '/404', name: '404', component: PageNotFoundComponent },
{ path: '/*path', redirectTo:['404'] }`
Try this instead of otherwise. It works for me, not sure but seems like work in progress.
#RouteConfig([
{ path: '/**', redirectTo: ['MycmpnameCmp'] },
...
}
])
https://github.com/angular/angular/issues/4055
This worked for me:
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
// all other routes
{ path: '**', redirectTo: '/home' }
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Try this
RouterModule.forRoot([
{ path: 'login', component: LoginComponent },
{ path: 'edit-event', component: EventComponent },
{ path: 'participants', component: ParticipantsComponent },
{ path: 'notification', component: NotificationComponent },
{ path: '', component: WelcomeComponent }, //default
{ path: '**', component: WelcomeComponent } //page not found route
], { useHash: true })
useHash parameter is for using hash url style
https://angular.io/docs/ts/latest/guide/router.html#!#route-config