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

已经有一个离子论坛post，但我已经按照提议的接受解决方案，即为IonicPage注释命名。

Answer 1

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

Answer 2

根据您的错误，您似乎尝试使用班级名称MenuPage作为深层链接。 this.navCtrl.push('MenuPage');

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

在您的情况下，您将深层链接声明为＆＃34; menu＆＃34;。所以你应该使用：

this.navCtrl.push('menu');

或者，如果您愿意，请继续使用该课程，但不要使用引号：this.navCtrl.push(MenuPage);

Answer 3

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

Answer 4

我没有看到你提到有关let subOrd l = let acc x = function | [] -> [[x]] | (((y::_) as ys) :: ls) -> if x <= y then ((x::ys)::ls) else [x]::ys::ls | _ -> failwith "Should never happen!" List.foldBack acc l []文件的任何内容。要配置延迟加载，每页/组件需要一个模块文件。

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

menu.module.ts

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

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

还需要在导入中添加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 { }。

最后，如果您为每个组件/页面创建了一个模块文件，那么您可以从IonicPageModule.forChild(MenuPage)文件中删除所有组件/页面导入。

您提到的其余部分已正确配置。每页仍然需要app.module.ts注释，因为您已将名称设置为“菜单”，因此您应该可以导航使用IonicPage()。

注意：请确保您的模块文件的文件名与页面文件名的名称相同，但附加了this.navCtrl.push('menu')。例如，.module页面文件应具有相应的menu.ts文件。

Answer 5

如果在添加新页面后没有重新启动服务器（在本例中为MenuPage），请停止并重新启动ionic serve。错误将被解决。

Answer 6

当我做

之类的事情时，我遇到了这个错误

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

我最终追踪到传入的文字无效的事实。我希望名字中没有拼写错误或大写字母而不是小写，集中了这些东西。

因此，我定义了一个页面枚举，并在任何地方使用它。

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

然后使用类似的东西：

openPage(Page.LOGIN);

我通过“ionic-angular”中的 view-controller.js 跟踪了它：“3.6.0”

Answer 7

在 MenuPage.ts： 在类MenuPage上添加这个：

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

在 app.components.ts

中

rootPage: string = 'tabs-page';

请试一试！

Answer 8

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

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

Answer 9

我有同样的问题，我可以解决这个问题，创建档案模块。在这种情况下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文件中的import，declarations和entryComponents时才删除它。所有这些过程对我来说都很好。

Answer 10

我正在研究Ionic 3中的Lazy负载。今天我遇到了问题。该视频介绍了如何使用它Ionic 3 - Lazy Loading Modules/Routes

我不需要使用@IonicPage（{name：'name-of-my-page'}），只需按照视频中的步骤操作即可。

希望这对你也有帮助。

Answer 11

如果要延迟加载组件：

只需在从“ ionic-angular”导入的@IonicPage()装饰器上方添加@Component装饰器，然后保存工作即可重新启动服务器

示例：

....
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
....

@IonicPage()
@Component({
templateUrl : '',
})
export class XYZ{
   ........
}

请确保未在声明数组和导入数组中都未在app.module.ts文件中添加同一页面。

Answer 12

另一种可能导致此问题的情况是将lazy-loaded页面加载为modal。如果要使用页面作为模式，则不应使其延迟加载！之后，您可以将该页面用作模式：

modalCtrl.create(this.somePage).present();

Answer 13

从文件中删除以下代码

import { IonicPage } from 'ionic-angular';

@IonicPage()

它对我有用。

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

13 个答案: