动态添加从http api到app-routing.module.ts angular 10的路由

Question

我遇到了一个问题，尽管我在旧版本的angular中发现了很多可能性，但它在angular 10版本中仍然不适用。我觉得我是一个很有棱角的新手。。。。

我正在尝试通过另一个应用程序的https调用创建一个带有角度客户端api的网站，我想通过添加我收到的路由来更新app-routing.module.ts中的路由。

但是，当我使用resetConfig函数更新我的appRoute数组时它失败了，我从控制台收到了这个答案：

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'mentions'
Error: Cannot match any routes. URL Segment: 'mentions'
at ApplyRedirects.noMatchError (router.js:2316)
at CatchSubscriber.selector (router.js:2300)
at CatchSubscriber.error (catchError.js:27)
at MapSubscriber._error (Subscriber.js:75)
at MapSubscriber.error (Subscriber.js:55)
at MapSubscriber._error (Subscriber.js:75)
at MapSubscriber.error (Subscriber.js:55)
at MapSubscriber._error (Subscriber.js:75)
at MapSubscriber.error (Subscriber.js:55)
at ThrowIfEmptySubscriber._error (Subscriber.js:75)
at resolvePromise (zone-evergreen.js:798)
at resolvePromise (zone-evergreen.js:750)
at zone-evergreen.js:860
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at Object.onInvokeTask (core.js:27418)
at ZoneDelegate.invokeTask (zone-evergreen.js:398)
at Zone.runTask (zone-evergreen.js:167)
at drainMicroTaskQueue (zone-evergreen.js:569)
at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:484)
at invokeTask (zone-evergreen.js:1621)

这是的文件和方法

//app-routing.module.ts
import {NgModule, OnInit,APP_INITIALIZER} from '@angular/core';
import {Router, RouterModule, Routes} from '@angular/router';
import {CarouselNavigationComponent} from './carousel-navigation/carousel-navigation.component';
import {AppComponent} from './app.component';
import {BookComponent} from './book/book.component';
import {EventComponent} from './event/event.component';
import {EventDetailComponent} from './event/event-detail/event-detail.component';
import {FourOhFourComponent} from './four-oh-four/four-oh-four.component';
import {MaintenanceComponent} from './maintenance/maintenance.component';
import {PageService} from './services/page.service';
import {PageComponent} from './page/page.component';

const appRoute: Routes = [
{path: '' , component: CarouselNavigationComponent},
{path: 'fr' , component: AppComponent},
{path: 'gallery' , component: BookComponent},
{path: ':lang/gallery' , component: BookComponent},
{path: ':lang/events' , component: EventComponent},
{path: ':lang/event/:id' , component: EventDetailComponent},
{path: ':lang/golden-book' , component: AppComponent},
{path: ':lang/contact' , component: AppComponent},
{path: 'test/:id' , component: AppComponent},
{path: 'fr/:id' , component: AppComponent},
{path: 'not-found' , component: FourOhFourComponent},
{path: 'events' , component: EventComponent},
{path: 'event/:id' , component: EventDetailComponent},
{path: 'maintenance' , component: MaintenanceComponent}
];

export function configurationInit(pageService: PageService) {
return (): Promise<any> => {
return pageService.init();
};
}

@NgModule({
declarations: [],
imports: [
RouterModule.forRoot(appRoute)
],
exports: [RouterModule],
providers: [
PageService,
{
provide: APP_INITIALIZER,
useFactory: configurationInit,
deps: [PageService],
multi: true
}
]
})

export class AppRoutingModule {
constructor() {}

}

//page.service.ts

import {Injectable, OnInit} from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {Observable, Subject, Subscription} from 'rxjs';
import { environment } from '../../environments/environment';
import {Router} from '@angular/router';
import {PageComponent} from '../page/page.component';
const httpOptions = {
headers: new HttpHeaders({
'Content-Type':  'application/json; charset=utf-8',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type, accept'
})
};
@Injectable()
export class PageService {
constructor(private httpClient: HttpClient, private router: Router){}
pages: any[] = [];

init() {
return new Promise<void>((resolve, reject) => {
const url = environment.apiWeb + '/page';
const arr = this.router.config;
this.httpClient.get<any[]>(url, httpOptions)
.subscribe((response) => {
/*from the application the callback function I receive these datas
[ {
active: "1"
alias: "mentions"
author: "1"
content: "Lorem ipsum"
date_add: "2020-05-19 19:25:00"
id_lang: "1"
id_page: "1"
id_page_lang: "1"
last_update: "2020-05-19 20:00:00"
title: "Mentions légales"},
{
active: "1"
alias: "biography"
author: "1"
content: "Je suis un poulet. que dire d'autre"
date_add: "2020-05-22 07:00:00"
id_lang: "1"
id_page: "2"
id_page_lang: "2"
last_update: "2020-05-19 00:00:31"
title: "biographie"}]
*/
response.forEach(
(res) => {
arr.push({
path: res.alias,
component: PageComponent
});
}
);
this.pages = response;
},
(errors) => {
console.log(errors);
}
);
console.log(arr);
this.router.resetConfig(arr);
resolve();
});
}
}

当我尝试添加一个带有http的路由时，使用一个简单的对象可以工作，但使用httpClient失败了。

以下是我在page.service.ts 中进行控制台登录时的数据

控制台消息响应

抱歉我英语不好如果你有想法或问题，我会试试看。向致以最良好的问候

Answer 1

我没有看到路由器"提及"；在列表中定义路由器。这就是您所面临的错误代码的原因。请再次检查类定义路由器