延迟加载页面随机错误：错误错误：未捕获（承诺）：无效链接：

我偶尔遇到以下错误。延迟加载页面随机错误：错误错误：未捕获（承诺）：无效链接：

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"使用。

已经有一个离子论坛post但我已经遵循了建议的接受的解决方案，该解决方案是关于给IonicPage注释命名的。

来源

2017-05-06 Amr ElAdawy

根据你的错误，它看起来像你试图使用类名称MenuPage作为深层链接。 this.navCtrl.push('MenuPage');

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

在你的情况，你声明的深层链接的“菜单”。所以，你应该使用：

this.navCtrl.push('menu');

或者，如果你想要的，继续使用类，但不包括引号：this.navCtrl.push(MenuPage);

来源

2017-05-16 16:17:05

这是我想到的第一件事。我搜索了整个代码的文字'MenuPage'，但它从未用于导航到页面。 –

生命拯救我的男人，整天都在寻找这个。 –

我没有看到你提到有关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文件。

来源

2017-05-17 11:19:05 SolveSoul

感谢您的努力。我已经有了暴露页面的模块。我没有添加它来减少问题的大小。 –

我看到了，以及我有同样的问题，但我的问题是模块文件的文件名设置不正确，因为我手动而不是通过CLI创建文件。所以我建议仔细检查你的文件名。此外，您的离子的当前版本是什么？ – SolveSoul

真正有用的解释！谢谢@SolveSoul！ – YLM

同样的事情发生在我身上。同样，我无法确定错误来自哪里，因为它很少发生。看起来像应用程序脚本的错误，因为停止和启动“离子服务”似乎解决了这个问题。

来源

2017-05-19 15:23:06 Chris

这通常是我最近遇到的大多数问题的解决方案。工程4 5次 – hanzo2001

为我工作！谢谢。 – Subgeo

谢谢你的工作:) –

-3

从文件

import { IonicPage } from 'ionic-angular';

@IonicPage()

它为我删除下面的代码。

来源

2017-06-27 12:59:03

我，当我做这样的事情

@ViewChild(Nav) nav: Nav; 
... 
openPage(page:string) { 
    this.nav.setRoot(page); 
}

我结束了跟踪下来到文字传递的其实是无效的了这个错误。我不想在名称中使用更多的拼写错误或大写字母而不是小写字母，因此集中这些东西。

因此，我定义了一个页面的枚举并随处使用它。

export enum Page { 
    HOME = <any>'HomePage', 
    LOGIN = <any>'LoginPage' 
}

然后使用类似：

openPage(Page.LOGIN);

我在 “离子 - 角” 跟踪它经由视图-controller.js： “3.6.0”

来源

2017-08-16 19:07:15 JGFMK

我有同样的问题，我可以解决这个创建存档module.ts为mi页在这种情况下是标签

import { TabsPage } from './tabs'; 
import { NgModule } from '@angular/core'; 
import { IonicPageModule } from 'ionic-angular'; 

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

只有在这种情况下，app.module.ts文件中的导入，声明和entryComponents被删除。所有这个过程对我来说都很好。

来源

2017-09-22 17:37:38

重新启动您的服务器，你会没事的。

来源

2017-10-03 06:51:16

我也在研究Ionic 3中的惰性负载。今天我遇到了问题。这段视频解释了如何使用它Ionic 3 - Lazy Loading Modules/Routes

我不需要使用@IonicPage（{name：'我的网页名称'}），只需按照视频中的步骤操作即可。

希望这对你也有帮助。

来源

2017-10-04 14:57:40

在MenuPage.ts： 添加此跨类MenuPage：

@IonicPage(
{ 
    name: 'tabs-page' 
})

在app.components.ts

rootPage: string = 'tabs-page';

请试试吧！

来源

2017-12-07 02:37:32

我有类似的问题。通过将devDependencies下的“@ ionic/app-scripts”更改为版本“2.1.3”来解决它。

"devDependencies": { 
"@angular/tsc-wrapped": "^4.4.6", 
"@ionic/app-scripts": "2.1.3", 
"typescript": "2.4.0" }

来源

2018-01-05 10:17:06

-1

如果你没有重新加入新的页面（在这种情况下MenuPage）停止并重新启动离子服务后您的服务器。错误将被解决。

来源

2018-03-10 03:33:24

这并没有提供一个问题的答案。一旦你有足够的[声誉]（https://stackoverflow.com/help/whats-reputation），你将可以[对任何帖子发表评论]（https://stackoverflow.com/help/privileges/comment）;相反，[提供不需要提问者澄清的答案]（https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can- I-DO-代替）。 - [来自评论]（/ review/low-quality-posts/19063869） – Danielson

延迟加载页面随机错误：错误错误：未捕获（承诺）：无效链接：

回答

相关问题