IonicPage not working
I am using instructions in the IonicPage Documentation
But I am getting the following error:
Error: /app/src/pages/subscribe-channel/subscribe-channel.ts has a @IonicPage decorator, but it doesn't have a corresponding "NgModule" in / app / src / pages / subscribe -channel / subscribe-channel.module.ts
To be specific, I made the following changes prescribed in the docs:
-
added
IonicPageModule.forChild(SubscribeChannelPage)
-
added
@IonicPage()
on ie componentSubscribeChannelPage
I cannot share the sample code as it is part of a larger application.
A similar error is reported: The page has the @IonicPage decorator, but it doesn't have a corresponding "NgModule"
IonicPage is commented out in the answer suggested there to get rid of this error. However, I am trying to use IonicPage and would like to know how to get it to work.
Here subscribe-channel.ts
import { Component, OnInit } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { IonicPage } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-subscribe-channel',
templateUrl: 'subscribe-channel.html'
})
export class SubscribeChannelPage implements OnInit {
constructor() {
}
ngOnInit() {
}
}
and here app.modules.ts
import { NgModule, ErrorHandler, APP_INITIALIZER } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HttpModule } from '@angular/http';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { IonicPageModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { SubscribeChannelPage } from '../pages/subscribe-channel/subscribe-channel';
@NgModule({
declarations: [
MyApp,
SubscribeChannelPage
],
imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp),
IonicPageModule.forChild(SubscribeChannelPage)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
SubscribeChannelPage
],
providers: [
StatusBar,
SplashScreen,
{ provide: ErrorHandler, useClass: IonicErrorHandler }
]
})
export class AppModule { }
@gerdi, suggestions in response helped to avoid compilation errors. However, deep link still doesn't work, it takes to the default page.
FYI, deep linking worked before with the following code in app.module.ts
. However, I am trying to suggest IonicPage is the best option for the future.
IonicModule.forRoot(MyApp, {}, {
links: [
{ component: SubscribeChannelPage, name: 'subscribe', segment: 'subscribe/:channelId' },
]
}),
source to share
To use @IonicPage()
, the "component page" where you add the decorator must have a plug-in.
The error you are getting basically says.
You added the @IonicPage () decorator, but there is no corresponding module for this component. You need to include a subscribe-channel.module.ts file that declares this component in its module scope.
So you need to add subscribe-channel.module.ts
which is a module declaration.
To understand this better, you can go into your terminal and generate a new template and see the files it adds.
>_ ionic generate page foobar
In the foobar folder you will see 4 files, one of which foobar.module.ts
is a module declaration.
FYI: you need to change
import { IonicModule } from 'ionic-angular';
to
import { IonicPageModule } from 'ionic-angular';
in the generated template. There seem to be several issues around this shiny new material.
However, deep linking still doesn't work, it goes to the default page. FYI, deep linking worked previously with the following code in app.module.ts. However, I am trying to suggest IonicPage is the best option for the future.
For deeplinking, you must now set it to the IonicPage()
decorator of your required ion page .
Delete
links: [
{ component: SubscribeChannelPage, name: 'subscribe', segment: 'subscribe/:channelId' },
]
as it was before IonicPage was introduced in ionic 3.x
Try:
@IonicPage({
name: 'SubscribeChannelPage',
segment: 'subscribe/:channelId'
})
in subscribe-channel.ts . Example URL:
http://localhost:8101/#/subscribe/:channelId
source to share