Я использую вложенную маршрутизацию в своем приложении. когда приложение загружает свой экран входа в систему после входа в систему, переадресовывает его на страницу администрирования, где существуют дополнительные дочерние маршруты, такие как user, product, api и т.д., когда я перехожу к администратору, он byddefault загружает пользовательский экран, но далее <routeLinks> не работает, и его показывает эту ошибку,
Error: Uncaught (in promise): Error: Cannot match any routes: 'product'
После щелчка продукта он показывает это
import { bootstrap } from '@angular/platform-browser-dynamic';
import { APP_ROUTER_PROVIDERS } from '../app/app.routes';
import { AppComponent } from '../app/app.component';
bootstrap(AppComponent, [APP_ROUTER_PROVIDERS]);
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
selector: 'demo-app',
template: `
<div class="outer-outlet">
<router-outlet></router-outlet>
</div>
`,
directives: [ROUTER_DIRECTIVES]
})
export class AppComponent { }
import { provideRouter, RouterConfig } from '@angular/router';
import { AboutComponent, AboutHomeComponent, AboutItemComponent } from '../app/about.component';
import { HomeComponent } from '../app/home.component';
export const routes: RouterConfig = [
{
path: '',
component: HomeComponent
},
{
path: 'admin',
component: AboutComponent,
children: [
{
path: '',
component: AboutHomeComponent
},
{
path: '/product',
component: AboutItemComponent
}
]
}
];
export const APP_ROUTER_PROVIDERS = [
provideRouter(routes)
];
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl:'../app/layouts/login.html'
})
export class HomeComponent { }
import { Component } from '@angular/core';
import { ActivatedRoute, ROUTER_DIRECTIVES } from '@angular/router';
@Component({
selector: 'about-home',
template: `<h3>user</h3>`
})
export class AboutHomeComponent { }
@Component({
selector: 'about-item',
template: `<h3>product</h3>`
})
export class AboutItemComponent { }
@Component({
selector: 'app-about',
templateUrl: '../app/layouts/admin.html',
directives: [ROUTER_DIRECTIVES]
})
export class AboutComponent { }
Я думаю, что ваша ошибка в том, что ваш маршрут должен быть product вместо /product.
Значит, что-то вроде
children: [
{
path: '',
component: AboutHomeComponent
},
{
path: 'product',
component: AboutItemComponent
}
Для меня это работало, как код ниже. Я сделал разницу между RouterModule.forRoot и RouterModule.forChild. Затем в потомке определите родительский путь, а в массиве children - childs.
родитель-routing.module.ts
RouterModule.forRoot([
{
path: 'parent', //parent path, define the component that you imported earlier..
component: ParentComponent,
}
]),
RouterModule.forChild([
{
path: 'parent', //parent path
children: [
{
path: '',
redirectTo: '/parent/childs', //full child path
pathMatch: 'full'
},
{
path: 'childs',
component: ParentChildsComponent,
},
]
}
])
Надеюсь, что это поможет.
Я использую angular 4 и сталкиваюсь с тем же вопросом, все возможные решения, но, наконец, это решает мою проблему
export class AppRoutingModule {
constructor(private router: Router) {
this.router.errorHandler = (error: any) => {
this.router.navigate(['404']); // or redirect to default route
}
}
}
Надеюсь, это поможет вам.
У меня возникла проблема, когда импорт для модуля маршрутизации должен идти после дочернего модуля, возможно, это не имеет прямого отношения к этому сообщению, но это помогло бы мне, если бы я прочитал это:
https://angular.io/guide/router#module-import-order-matters
imports: [
BrowserModule,
FormsModule,
ChildModule,
AppRoutingModule
],
Мне пришлось использовать шаблон подстановки в конце массива маршрутов.
{ path: '**', redirectTo: 'home' }
И ошибка была решена.
У меня была такая же ошибка, когда я делал приложение AngularJS. Я не видел никаких ошибок с моего терминала 
, но когда я отлаживаю инструмент разработчика Google, у меня есть эта ошибка 
.
После этой ошибки я сначала рассмотрел мой модуль маршрутизации, так как я ничего не видел при запросе локального хоста/входа.
Я узнал, что я ошибся с логином как lgin, и когда я его исправляю, он отлично работает. Я просто рассказываю об этом просто, чтобы обратить внимание на любую опечатку, с которой мы могли столкнуться, и поставив нас в отличное время!
Если вы передаете идентификатор, попробуйте использовать этот метод
const routes: Routes = [
{path:"", redirectTo:"/home", pathMatch:"full"},
{path:"home", component:HomeComponent},
{path:"add", component:AddComponent},
{path:"edit/:id", component:EditComponent},
{path:"show/:id", component:ShowComponent}
];
@NgModule({
imports: [
CommonModule,
RouterModule.forRoot(routes)
],
exports: [RouterModule],
declarations: []
})
export class AppRoutingModule { }
Если вы передаете id по URL-адресу, пожалуйста, используйте ниже
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot([
{ path: 'Employees', component: EmployeesComponent, pathMatch: 'full' },
{ path: 'Add', component: EmployeeAddComponent, pathMatch: 'full' },
**{ path: 'Edit/:id', component: EmployeeEditComponent },
{ path: 'Edit', component: EmployeeEditComponent },**
{ path: '', redirectTo: 'Employees', pathMatch: 'full' }
]),
],
i.e Если вы передаете любой идентификатор, нам нужно как изменить url с помощью id, так и изменить URL-адрес.
Что касается меня resetConfig работает только
this.router.resetConfig(newRoutes);
Или согласиться с предыдущим
this.router.resetConfig([...newRoutes, ...this.router.config]);
Но имейте в виду, что последним всегда должен быть маршрут с путём **
У меня тоже была такая же проблема. Пробовал все способы, и это не сработало, пока я не добавил следующее в app.module.ts
import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';
Добавьте в свой импорт в app.module.ts следующее:
Ng4LoadingSpinnerModule.forRoot()
Этот случай может быть редок, но я надеюсь, что это поможет кому-то
В моем случае iframe с ограничением src пытался получить host/null (когда значение связанной переменной было нулевым).
Добавление *ngIf к нему помогло.
Я изменил:
<iframe [src]="iframeSource"></iframe>
в
<iframe [src]="iframeSource" *ngIf="iframeSource"></iframe>
Это может быть полезно:
//I personally prefer dynamic import (angular 8)
{ path: 'pages', loadChildren: () => import('./pages/pages.module').then(mod => mod.PageModule) }
В дочерней маршрутизации это должно выглядеть так: { path: 'about', component: AboutComponent },
Обратите внимание, что в пути дочерней маршрутизации нет pages, а в routerLink или nsRouterLink он должен выглядеть как routerLink="/pages/about"
Я надеюсь, что это поможет кому-то там.
если это случается с кем-то, кто сейчас находится в angular 8, я удаляю ошибку, добавляя "/" перед маршрутом, и она работает как требуется.