I'm using Angular 6.0.3. I have a sub-module called "Admin" with three components. Admin's root component ("AdminComponent") route works fine (path: ""
), but I can't seem to trigger any of the others. Why can't Angular find my routes?
routes.ts
import { Routes } from "@angular/router";
import { SplashComponent } from "./splash/splash.component";
import { LoginComponent } from "./login/login.component";
import { WatchComponent } from "./watch/watch.component";
import { AdminComponent } from "./admin/admin/admin.component";
import { HomeComponent as AdminHomeComponent } from "./admin/home/home.component";
import { AddSongComponent } from "./admin/add-song/add-song.component";
import { AdminGuard } from "./auth/admin.guard";
export const appRoutes: Routes = [
{
path: "",
children: [
{ path: "", component: SplashComponent, pathMatch: "full" },
{ path: "login", component: LoginComponent, pathMatch: "full" },
{ path: "watch", component: WatchComponent, pathMatch: "full" },
{
path: "admin",
component: AdminComponent,
pathMatch: "full",
canActivate: [AdminGuard],
children: [
{
path: "",
component: AdminHomeComponent,
pathMatch: "full",
outlet: "admin"
},
{
path: "add-song",
component: AddSongComponent,
pathMatch: "full",
outlet: "admin"
}
]
}
]
}
];
admin/admin/admin.component.html
<router-outlet name='admin'></router-outlet>
admin/home/home.component.html
<div>
<a mat-raised-button [routerLink]="['add-song']">Add new song</a>
</div>
note: I've also tried [routerLink]="[{ outlets: { admin: ['add-song'] } }]
, still route not found.
from Sub-Module child routes not working ("Error: Cannot match any routes.")
No comments:
Post a Comment