Error: Cannot match any routes. URL Segment: 'null' in Ionic Angular App

问题

I am developing an application using Ionic 4 with Angular and I am getting following error:

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)

My TS File Contains:

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);
}

My HTML File is like this:

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

Routing Module:

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 {}

Any idea what am I doing wrong here???? Any helps is appreciated. Thanks.

回答1:

I solved this by calling my function on ngOnInit like this:

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

and then in my html I have set the ngif as below:

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

回答2:

From the Ionic Lifecycle Events, ionViewDidLoad() runs after the page is loaded, so you are calling your function after the view is loaded.

Instead call your method in ionViewWillEnter() method.

来源：https://stackoverflow.com/questions/58442320/error-cannot-match-any-routes-url-segment-null-in-ionic-angular-app

标签

angular

ionic-framework

iframe

ionic4