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

【问题标题】：Lazy load pages random error:ERROR Error: Uncaught (in promise): invalid link:延迟加载页面随机错误：错误错误：未捕获（承诺）：无效链接：
【发布时间】：2020-10-19 02:28:59
【问题描述】：

我不时遇到以下错误。

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 注释命名。

【问题讨论】：

标签： ionic3

【解决方案1】：

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

【讨论】：

这通常是我最近大多数问题的首选解决方案。 5 次中有 4 次有效
为我工作！谢谢。
我每天有很多次。唯一可行的方法是重新启动应用程序。

【解决方案2】：

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

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

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

this.navCtrl.push('menu');

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

【讨论】：

这是我首先想到的。我在整个代码中搜索了文字 MenuPage，但它从未用于导航到页面。

【解决方案3】：

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

【讨论】：

【解决方案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 文件。

【讨论】：

感谢您的努力。我已经有了暴露页面的模块。我没有添加它以减少问题的大小。
我明白了，我遇到了同样的问题，但我的问题是模块文件的文件名设置不正确，因为我手动而不是通过 CLI 创建文件。所以我建议仔细检查你的文件名。另外，您的 Ionic 的当前版本是什么？
真正有用的解释！！谢谢@SolveSoul !!

【解决方案5】：

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

【讨论】：

这并没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review
大声笑，对我也有用，但@Danielson 是对的，虽然有时它可能会起作用，但这并不是最好的答案。

【解决方案6】：

我在做类似的事情时遇到了这个错误

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

我最终追踪到传入的文字无效这一事实。我希望名称中不再有拼写错误或大写而不是小写，从而集中这些内容。

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

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

然后使用类似的东西：

openPage(Page.LOGIN);

我通过 view-controller.js 在 "ionic-angular": "3.6.0" 中追踪到它

【讨论】：

【解决方案7】：

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

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

在 app.components.ts

rootPage: string = 'tabs-page';

请试一试！

【讨论】：

改正！！太好了！

【解决方案8】：

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

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

【讨论】：

【解决方案9】：

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

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 才会删除它。所有这些过程对我来说都很好。

【讨论】：

【解决方案10】：

我也在研究 Ionic 3 中的延迟加载。今天我遇到了一个问题。这个视频解释了如何使用它Ionic 3 - Lazy Loading Modules/Routes

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

希望这对你也有帮助。

【讨论】：

【解决方案11】：

如果你想延迟加载组件：

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

例子：

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

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

确保您没有在 app.module.ts 文件中添加相同的页面，无论是在声明数组还是导入数组中。

【讨论】：

【解决方案12】：

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

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

【讨论】：