Ошибка: не удается сопоставить ни один маршрут. Сегмент URL: «нулевой» в приложении Ionic Angular

Question

Я разрабатываю приложение, используя Ionic 4 с Angular, и получаю следующую ошибку:

VM1190 vendor.js:51847 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'null'
Error: Cannot match any routes. URL Segment: 'null'
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:2469)
    at CatchSubscriber.selector (router.js:2450)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:34)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:79)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:59)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:79)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:59)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:79)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:59)
    at ThrowIfEmptySubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:79)
    at resolvePromise (zone.js:831)
    at resolvePromise (zone.js:788)
    at zone.js:892
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)

Мой файл TS содержит:

ionViewDidLoad() {
    this.callCloudFunction();
}

async callCloudFunction() {
    .....
    var memberUrl = 'https://www.example.com/WebRes/Club/XYZ/LoginWithToken/' + memberToken;
      console.log("Login URL: " + memberUrl);
      this.url =  this.sanitizer.bypassSecurityTrustResourceUrl(memberUrl);
}

Мой HTML-файл выглядит так:

<ion-content>
  <div style="overflow:auto;-webkit-overflow-scrolling:touch">
      <iframe [src]="url" style="width: 100%; height: 100vh;" frameborder="0"></iframe>
    </div>
</ion-content>

Модуль маршрутизации:

import { NgModule } from "@angular/core";
import { PreloadAllModules, RouterModule, Routes } from "@angular/router";

import { AuthGuard } from "./guard/auth.guard";
import { NoAuthGuard } from "./guard/no-auth.guard";

const routes: Routes = [
  { path: "", redirectTo: "login", pathMatch: "full" },
........
  { path: "my-page", loadChildren: "./my-page/my-page.module#MyPagePageModule",canActivate: [AuthGuard] }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Любая идеячто я тут не так делаю ???? Любая помощь приветствуется. Спасибо.

Answer 1

Я решил это, вызвав свою функцию в ngOnInit следующим образом:

ngOnInit() {
      this.callCloudFunction().then( data => {
        this.urlSafe= this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
        this.canRender = true;
     });
    }

, а затем в своем HTML-коде я установил ngif, как показано ниже:

<div style="overflow:auto;-webkit-overflow-scrolling:touch" *ngIf="canRender">
      <iframe [src]="urlSafe" style="width: 100%; height: 100vh;" frameborder="0"></iframe>
    </div>

Answer 2

Из Ionic События жизненного цикла , ionViewDidLoad() запускается после загрузки страницы, поэтому вы вызываете свою функцию после загрузки представления.

Вместо этого вызовите свой методв ionViewWillEnter() метод.