延迟加载页面随机错误:错误错误:未捕获(在承诺中):无效链接:

Question

我偶尔会遇到以下错误.

ERROR Error: Uncaught (in promise): invalid link:MenuPage
    at d (polyfills.js:3)
    at l (polyfills.js:3)
    at Object.reject (polyfills.js:3)
    at NavControllerBase._fireError (nav-controller-base.js:322)
    at NavControllerBase._failed (nav-controller-base.js:310)
    at nav-controller-base.js:365
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (core.es5.js:4125)
    at t.invoke (polyfills.js:3)
    at n.run (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (core.es5.js:4116)
    at t.invokeTask (polyfills.js:3)
    at n.runTask (polyfills.js:3)

我不知道有任何重现的步骤,这个错误根本没有引起任何问题该应用程序正常工作,菜单页面显示正确.

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Nav, Platform } from 'ionic-angular';

@IonicPage({
  name: "menu",
  segment: "app"
}
)
@Component({
  selector: 'page-menu',
  templateUrl: 'menu.html'
})
export class MenuPage {}

我检查了我的项目,菜单页面仅用于其IonicPage名称"menu".

已有一个离子论坛帖子,但我已经按照提议的接受解决方案,即给出IonicPage注释的名称.

Answer 1

有时我也会遇到同样的事情.同样,我无法确定错误的来源,因为它很少发生.看起来像应用程序脚本的错误,因为停止和启动"离子服务"似乎解决了这个问题.

Answer 2

根据您的错误,您似乎正在尝试使用类名MenuPage作为深层链接.this.navCtrl.push('MenuPage');

ERROR Error: Uncaught (in promise): invalid link:MenuPage

在您的情况下,您将深层链接声明为"菜单".所以你应该使用:

this.navCtrl.push('menu');

或者如果你想,继续使用该类,但没有引号: this.navCtrl.push(MenuPage);

Answer 3

重启你的服务器,你会没事的.

Answer 4

我没有看到你提到任何关于menu.module.ts文件的事情.要配置延迟加载,每页/组件需要一个模块文件.

此文件是必需的,因此Ionic可以了解在页面初始化时需要加载哪些组件.以下是页面模块文件的示例:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { MenuPage } from './menu.page';
import { SomeComponentModule } from '../../components/some/some.component.module';

@NgModule({
    declarations: [
        MenuPage
    ],
    imports: [
        IonicPageModule.forChild(MenuPage),
        HeaderComponentModule
    ],
    exports: [
        MenuPage
    ]
})
export class MenuPageModule { }

此文件中的组件只是一个示例.因此,如果您的项目中有一个名为SomeComponent的组件.然后,您应该在page.module中导入它,只有当您在页面中使用该组件时才会导入它.

SomeComponent还有一个模块文件,它将SomeComponent导出为SomeComponentModule,可以在page.module文件中导入.

IonicPageModule.forChild(MenuPage)还需要添加导入.

最后,如果您为每个组件/页面创建了一个模块文件,那么您可以从app.module.ts文件中删除所有组件/页面导入.

您提到的其余部分已正确配置.该IonicPage()注释仍然需要每个页面,你应该能够浏览使用this.navCtrl.push('menu'),因为你已经设置的名称为"菜单".

注意:请确保模块文件的文件名与页面文件名的名称相同,但.module附加了它.例如,menu.ts页面文件应该具有相应的menu.module.ts文件.