Случайная ошибка случайных страниц: ошибка ERROR: нечистота (в обещании): неверная ссылка:

Я время от времени сталкиваюсь со следующей ошибкой.

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 name "menu".

Уже существует ионный форум post, но я уже следую предлагаемому принятому решению, которое заключается в том, чтобы дать имя аннотации IonicPage,

Ответ 1

То же самое происходит со мной иногда. Точно так же я не мог определить, откуда исходит ошибка, поскольку это происходит редко. Похож на ошибку со сценариями приложения, поскольку остановка и запуск "ионной подачи", похоже, решают проблему.

Ответ 2

В соответствии с вашей ошибкой, похоже, вы пытаетесь использовать имя класса MenuPage как глубокую ссылку. this.navCtrl.push('MenuPage');

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

В вашем случае вы указали глубокую ссылку как "меню". Поэтому вы должны использовать:

this.navCtrl.push('menu');

Или, если хотите, продолжайте использовать класс, но без кавычек: this.navCtrl.push(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.

Ответ 5

У меня была эта ошибка, когда я делал что-то вроде

@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"

Ответ 6

У меня была та же проблема, и я могу решить, что создание архива 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 { }

только в том случае, если это было добавлено, import, declarations и entryComponents в файле app.module.ts удаляют это. Весь этот процесс отлично работает для меня.

Ответ 7

Я изучаю Lazy load в Ionic 3 тоже. Сегодня у меня была проблема с этим. Это видео объясняет, как использовать его Ionic 3 - Lazy Loading Modules/Routes

Мне не нужно использовать @IonicPage ({name: 'name-of-my-page'}), просто следуйте инструкциям в видео и отлично работайте со мной.

Надеюсь, это тоже поможет.

Ответ 8

В MenuPage.ts: добавьте это над классом MenuPage:

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

В app.components.ts

rootPage: string = 'tabs-page';

Попробуйте!

Ответ 9

У меня была аналогичная проблема. Решил его, изменив "@ionic/app-scripts" на версию "2.1.3" в devDependencies.

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

Ответ 10

Извлеките из вашего файла следующий код

import { IonicPage } from 'ionic-angular';

@IonicPage()

Это работает для меня.