Как использовать сгенерированную Ionic страницу в качестве корневой страницы приложения

Я просто пытаюсь намочить ноги с помощью Ionic и Angular. Я создал приложение Ionic с ionic start tabs-app tabs --ts. Затем я создал страницу с ionic g page event-home.

Затем я хотел установить эту сгенерированную страницу в качестве своей домашней страницы, поэтому, ничего не меняя, я обновил app.component.ts на

...
import { EventHomePage } from '../pages/event-home/event-home';
...
export Class MyApp {
    rootPage:any = EventHomePage;
}

Теперь, если я попытаюсь ionic serve: Error: Uncaught (in promise): Error: No component factory found for EventHomePage. Did you add it to @NgModule.entryComponents?

Итак, я пытаюсь добавить его в entryComponents в app.module.ts:

...
import { EventHomePage } from '../pages/event-home/event-home';
...
@NgModule({
  ...
  entryComponents: [
    EventHomePage,
    ...
  ]
})
export class AppModule{}

Теперь я получаю Component EventHomePage is not part of any NgModule or the module has not been imported into your module.

Таким образом, попытка сделать то, что кажется простой задачей, оказывается довольно сложной задачей.

Как изменить домашнюю страницу приложения, сгенерированного ionic, на страницу, созданную ionic?


angular ionic2
person Chris Rockwell    schedule 21.11.2017    source источник
comment
Самый простой способ сделать это — запустить ionic g testproject blank. Пустой проект делает именно то, что вы хотите, со страницей под названием home. Затем запустите ionic g page EventHomePage и просто найдите HomePage в проекте и замените текст. Я предполагаю, что вы были сбиты с толку, потому что вы использовали первоначальный проект вкладок.   -  person Philip Brack    schedule 21.11.2017

Ответы (3)


arrow_upward
1
arrow_downward

Если вы создали свою страницу с помощью последней версии ionic-cli, страница будет создана с помощью декоратора @IonicPage. Если это так, у вас также должен быть файл event-home.module.ts в той же папке, что и файл event-home.ts.

С этой нотацией вам не нужно импортировать компонент страницы в app.component.ts, но вы вызываете страницу как строку:

rootPage:any = 'EventHomePage';

См. http://blog.ionicframework.com/ionic-and-lazy-loading-pt-1/ и http://blog.ionicframework.com/ionic-and-lazy-loading-pt-2/

person Sébastien    schedule 21.11.2017
comment
Файл event-home.ts содержит декоратор, и был сгенерирован файл event-home.module.ts; однако это не работает, если просто добавить `rootPage:any = 'EventHomePage'; - person Chris Rockwell; 21.11.2017
comment
Я только что создал новый проект, точно такой же, как ваш, и сгенерировал страницу таким же образом, и это работает для меня. Однако это портит навигацию, потому что вы используете вкладки. Вы собираетесь перейти к EventHomePage на определенной вкладке? - person Sébastien; 21.11.2017

arrow_upward
3
arrow_downward

Вам также нужно будет импортировать модуль, в котором определен EventHomePage, или вам нужно будет добавить EventHomePage в объявлениях app.module.ts.

person Abhishek Singh    schedule 21.11.2017

arrow_upward
0
arrow_downward 

@NgModule({   
 declarations:[
    EventHomePage
    ],
entryComponents:[
    EventHomePage
]})

добавьте в декларацию, и она должна работать.

person NiravAdatiya    schedule 21.11.2017