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

Question

我遇到了一个问题，虽然我发现旧版本的 Angular 有很多可能性，但在 Angular 10 版本上它仍然不适用于我。 我认为我是 Angular 的新手....

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

但是当我使用 resetConfig 函数来更新我的 appRoute 数组时，（通过尝试转到路由 localhost:4200/mentions 或 localhost:4200/biography 示例） 它失败了，我从我的控制台收到了这个答案：

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 中进行控制台登录时拥有的数据

console message response

对不起我的英语不好 如果您有想法或问题，我会尝试。 最好的问候

Answer 1

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