CODEWITHSUNDEEP
ionic2ionic3
pradeep
pradeep

Reputation: 410

IonicPage is not working

I am using instructions at IonicPage Documentation

But I am getting the following error:

Error: /app/src/pages/subscribe-channel/subscribe-channel.ts has a @IonicPage decorator, but it does not have a corresponding "NgModule" at /app/src/pages/subscribe-channel/subscribe-channel.module.ts

To be specific, I made the following changes prescribed in the docs:

  1. added IonicPageModule.forChild(SubscribeChannelPage)

  2. added @IonicPage() on the component i.e. SubscribeChannelPage

I am unable to share code sample, since it is part of the larger application.

A similar error is reported here: Page has a @IonicPage decorator, but it does not have a corresponding "NgModule"

IonicPage is commented out in the answer suggested there to get rid of this error. However, I am trying to make use of IonicPage and would like to know how to make it work.

Here is 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 is 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 the answer helped in avoiding the compilation errors. However, the deep-link still does not work, it takes to default page.

FYI, the deep-link was working earlier with following code in app.module.ts . However, I am trying the IonicPage assuming it is a better option for future.

        IonicModule.forRoot(MyApp, {}, {
          links: [
            { component: SubscribeChannelPage, name: 'subscribe', segment: 'subscribe/:channelId' },
          ]
        }),

Upvotes: 4

Views: 7347

Answers (3)

Kevin Ji
Kevin Ji

Reputation: 1

The file name of the module is the same as the component:
- login.ts
- login.module.ts
The module needs to be named login in order to correspond.

Upvotes: 0

user1752532
user1752532

Reputation:

In order to use @IonicPage(), the "component page" that you add the decorator to needs to have a connected module.

The error you are getting is basically saying.

You have added the @IonicPage() decorator but there is no associated module for this component. You need to include a subscribe-channel.module.ts file that declares this component in its own module scope.

So you need to add a subscribe-channel.module.ts which is the declaration of a module.

To better understand this you can go into your terminal and generate a new template and see the files that it adds 

>_ ionic generate page foobar

Under the foobar folder, you will see 4 files one of them is foobar.module.ts which is the module declaration.

FYI: You need to change

import { IonicModule } from 'ionic-angular';

to 

import { IonicPageModule } from 'ionic-angular';

in the generated template. There still seems to be a few issues around this new shiny stuff

Upvotes: 4

Suraj Rao
Suraj Rao

Reputation: 29614

However, the deep-link still does not work, it takes to default page. FYI, the deep-link was working earlier with following code in app.module.ts . However, I am trying the IonicPage assuming it is a better option for future.

For deeplinking you have to now set it in IonicPage() decorator of your required ionic page.

Remove 

links: [
            { component: SubscribeChannelPage, name: 'subscribe', segment: 'subscribe/:channelId' },
          ]

as this was before IonicPage was introduced in ionic 3.x

Try:

@IonicPage({
  name: 'SubscribeChannelPage',
  segment: 'subscribe/:channelId'
})

in subscribe-channel.ts. Example Url will be:

 http://localhost:8101/#/subscribe/:channelId

Upvotes: 0

Related Questions