Ответ 1
То же самое происходит со мной иногда. Точно так же я не мог определить, откуда исходит ошибка, поскольку это происходит редко. Похож на ошибку со сценариями приложения, поскольку остановка и запуск "ионной подачи", похоже, решают проблему.
Я время от времени сталкиваюсь со следующей ошибкой.
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
,
То же самое происходит со мной иногда. Точно так же я не мог определить, откуда исходит ошибка, поскольку это происходит редко. Похож на ошибку со сценариями приложения, поскольку остановка и запуск "ионной подачи", похоже, решают проблему.
В соответствии с вашей ошибкой, похоже, вы пытаетесь использовать имя класса MenuPage
как глубокую ссылку. this.navCtrl.push('MenuPage');
ERROR Error: Uncaught (in promise): invalid link:MenuPage
В вашем случае вы указали глубокую ссылку как "меню". Поэтому вы должны использовать:
this.navCtrl.push('menu');
Или, если хотите, продолжайте использовать класс, но без кавычек: this.navCtrl.push(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
.
У меня была эта ошибка, когда я делал что-то вроде
@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"
У меня была та же проблема, и я могу решить, что создание архива 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 удаляют это. Весь этот процесс отлично работает для меня.
Я изучаю Lazy load в Ionic 3 тоже. Сегодня у меня была проблема с этим. Это видео объясняет, как использовать его Ionic 3 - Lazy Loading Modules/Routes
Мне не нужно использовать @IonicPage ({name: 'name-of-my-page'}), просто следуйте инструкциям в видео и отлично работайте со мной.
Надеюсь, это тоже поможет.
В MenuPage.ts: добавьте это над классом MenuPage:
@IonicPage(
{
name: 'tabs-page'
})
В app.components.ts
rootPage: string = 'tabs-page';
Попробуйте!
У меня была аналогичная проблема. Решил его, изменив "@ionic/app-scripts" на версию "2.1.3" в devDependencies.
"devDependencies": {
"@angular/tsc-wrapped": "^4.4.6",
"@ionic/app-scripts": "2.1.3",
"typescript": "2.4.0" }
Извлеките из вашего файла следующий код
import { IonicPage } from 'ionic-angular';
@IonicPage()
Это работает для меня.