Angular 错误:无法匹配任何路由。URL段:';空';在离子角应用程序中
我正在开发一个使用Ionic 4和Angular的应用程序,我得到以下错误:Angular 错误:无法匹配任何路由。URL段:';空';在离子角应用程序中,angular,ionic-framework,iframe,ionic4,Angular,Ionic Framework,Iframe,Ionic4,我正在开发一个使用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/@angul
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)
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);
}
<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 {}
ngOnInit() {
this.callCloudFunction().then( data => {
this.urlSafe= this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
this.canRender = true;
});
}
<div style="overflow:auto;-webkit-overflow-scrolling:touch" *ngIf="canRender">
<iframe [src]="urlSafe" style="width: 100%; height: 100vh;" frameborder="0"></iframe>
</div>
我的TS文件包含:
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)
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);
}
<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 {}
ngOnInit() {
this.callCloudFunction().then( data => {
this.urlSafe= this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
this.canRender = true;
});
}
<div style="overflow:auto;-webkit-overflow-scrolling:touch" *ngIf="canRender">
<iframe [src]="urlSafe" style="width: 100%; height: 100vh;" frameborder="0"></iframe>
</div>
我的HTML文件如下所示:
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)
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);
}
<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 {}
ngOnInit() {
this.callCloudFunction().then( data => {
this.urlSafe= this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
this.canRender = true;
});
}
<div style="overflow:auto;-webkit-overflow-scrolling:touch" *ngIf="canRender">
<iframe [src]="urlSafe" style="width: 100%; height: 100vh;" frameborder="0"></iframe>
</div>
知道我做错了什么吗????任何帮助都将不胜感激。谢谢。从Ionic中,IoninViewDidLoad()
在加载页面后运行,因此您在加载视图后调用函数。而是在
ionViewWillEnter()
方法中调用您的方法。我通过在ngOnInit上调用我的函数解决了这个问题,如下所示:
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)
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);
}
<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 {}
ngOnInit() {
this.callCloudFunction().then( data => {
this.urlSafe= this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
this.canRender = true;
});
}
<div style="overflow:auto;-webkit-overflow-scrolling:touch" *ngIf="canRender">
<iframe [src]="urlSafe" style="width: 100%; height: 100vh;" frameborder="0"></iframe>
</div>
然后在我的html中,我将ngif设置如下:
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)
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);
}
<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 {}
ngOnInit() {
this.callCloudFunction().then( data => {
this.urlSafe= this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
this.canRender = true;
});
}
<div style="overflow:auto;-webkit-overflow-scrolling:touch" *ngIf="canRender">
<iframe [src]="urlSafe" style="width: 100%; height: 100vh;" frameborder="0"></iframe>
</div>
您可以显示路线吗module@ORBIT我已经在上面添加了路由模块。这不是一个好的做法,因为如果在将页面放入堆栈后返回页面,ngOnInit()将不会被触发。正如我在回答中提到的那样,使用ionViewWillEnter()。你是一个救生员!!3天后,我终于找到了解决问题的方法