[Solved] Can't open modal in 3.6: invalid link

[vgb1993]

Type: bug

Ionic Version: 2.x

Platform: all

Hello Ionic, I use Ionic to make PWA and I'm very happy with it. I've started a new project now and I can't figure out why the modals aren't opening. It's weird because I can push any page with:
this.navCtrl.push('PhotoPage')

but I can't open it in a modal:

let modalPhoto = this.modalCtrl.create("PhotoPage");
modalPhoto.present();

The error says:

ERROR Error: Uncaught (in promise): invalid link: PhotoPage
Ionic Framework: ^3.6.0
Ionic App Scripts: 2.1.3
Angular Core: 4.1.3
Angular Compiler CLI: 4.1.3
Node: 6.11.1
OS Platform: macOS Sierra
Navigator Platform: MacIntel
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36

// photo.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage({
  segment: 'photo/:id'
})
@Component({
  selector: 'page-photo',
  templateUrl: 'photo.html',
})
export class PhotoPage {
  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams
  ) { }
}

// photo.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { PhotoPage } from './photo';
import { ComponentsModule } from "../../components/components.module";
@NgModule({
  declarations: [ PhotoPage ],
  imports: [
    IonicPageModule.forChild(PhotoPage),
    ComponentsModule
  ],
})
export class PhotoPageModule {}

// package.json

"dependencies": {
    "@angular-redux/form": "^6.5.3",
    "@angular-redux/router": "^6.3.1",
    "@angular-redux/store": "^6.5.7",
    "@angular/common": "4.1.3",
    "@angular/compiler": "4.1.3",
    "@angular/compiler-cli": "4.1.3",
    "@angular/core": "4.1.3",
    "@angular/forms": "4.1.3",
    "@angular/http": "4.1.3",
    "@angular/platform-browser": "4.1.3",
    "@angular/platform-browser-dynamic": "4.1.3",
    "@angular/router": "^4.3.2",
    "@ionic-native/core": "3.12.1",
    "@ionic-native/splash-screen": "3.12.1",
    "@ionic-native/status-bar": "3.12.1",
    "@ionic/storage": "^2.0.1",
    "angular-redux": "^1.0.0-beta",
    "cordova-browser": "^4.1.0",
    "cordova-plugin-console": "^1.0.5",
    "cordova-plugin-device": "^1.1.4",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-statusbar": "^2.2.2",
    "cordova-plugin-whitelist": "^1.3.1",
    "cordova-sqlite-storage": "^2.0.4",
    "flux-standard-action": "^1.2.0",
    "ionic-angular": "^3.6.0",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "ng2-translate": "^5.0.0",
    "ngx-facebook": "^2.4.0",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-observable": "^0.14.1",
    "rxjs": "5.4.0",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.12"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^2.1.3",
    "@ionic/cli-plugin-cordova": "1.5.0",
    "@ionic/cli-plugin-ionic-angular": "1.4.0",
    "ionic": "3.6.0",
    "typescript": "2.3.4"
  },

Any help would be very very appreciated, If I can't use modals in this version I'll have to make a downgrade to a lower version. Thanks Ionic!

[jgw96]

Hello, thanks for using Ionic! Very excited to hear that you are building a PWA with it. Would you mind posting a small repo we could use to reproduce this issue?

[sfaizanh]

@vgb1993 can you pass data in create method

let modalPhoto = this.modalCtrl.create("PhotoPage", { id: 1 });

If it doesn't work then in photo.js try removing { segment: 'photo/:id' } from @IonicPage()

Hope it helps.

[jgw96]

Hello all! As it seems it has been a while since there was any activity on this issue i will be closing it for now. Feel free to comment if you are still running into this issue. Thanks for using Ionic!

[vgb1993]

Hy there, I was away on hollydays, I'm back now.

So I was creating a repo to replicate the error and I found out the cause of the problem. Basically I was doing a mistake in the components.module.ts. I was using IonicModule.forRoot() instead of IonicPageModule.forChild. I was confused with the new CLI generating the components.module.ts automatically.

This was when the ERROR was happening in the new repo:

//components.module.ts
@NgModule({
	declarations: [
		BlogpostComponent,
		LandingSectionComponent
	],
	imports: [
		IonicModule.forRoot(BlogpostComponent),
		IonicModule.forRoot(LandingSectionComponent),
	],
	exports: [BlogpostComponent,
    LandingSectionComponent]
})
export class ComponentsModule {}

Then after some digging I found out I was importing the wrong modules. This is WORKING now:

//components.module.ts
@NgModule({
	declarations: [
		BlogpostComponent,
		LandingSectionComponent
	],
	imports: [
		IonicPageModule.forChild(BlogpostComponent),
		IonicPageModule.forChild(LandingSectionComponent),
	],
	exports: [BlogpostComponent,
    LandingSectionComponent]
})
export class ComponentsModule {}

//app.module.ts
@NgModule({
  declarations: [
    MyApp,
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    ComponentsModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

So yeah, my fault! I'm so happy I find it, now I can move on. If anybody else get's stuck with this let me know.

Thank you for your time, thank you for being awesome Ionic!

[vgb1993]

BTW I have a couple of propositions to make regarding deep-linking in web projects, where is the right place to do that?

[sfaizanh]

@vgb1993 Ionic Framework - Deep Links

[sfaizanh]

Check this, we are also waiting for deep-linking in web #11377

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.