In our Ionic 2 + Angular 2 project, we had a folder "profile" in which we had "profile.html" and "profile.ts", and in the latter, we had three components which are two modals and a dialog.
As the file "profile.ts" was so big with these components, I moved two of them (the other was tiny and made sense in that same file), all to specific files in the same folder: "profileEdit.ts", "hobbiesDialog.ts", resulting in this folder tree:
$project/src/pages/profile
So now, my profile.ts has these imports:
import { Component, Input } from '@angular/core';
import { NavController, ViewController, PopoverController, ModalController } from 'ionic-angular';
import { AlertController, ToastController, NavParams } from 'ionic-angular';
import Parse from 'parse';
import { LoginPage } from '../login/login';
import { ProfileEditModal } from 'profileEdit';
The last one is failing: somehow, Angular can't find the module:
Uncaught Error: Cannot find module "profileEdit" at eval
I also added these modules to the app.module.ts:
// more imports
import { ProfilePage, ProfilePopover } from '../pages/profile/profile';
import { ProfileEditModal } from '../pages/profile/profileEdit';
import { HobbiesPopover } from '../pages/profile/hobbiesDialog';
Also added them in the declarations and entryComponents arrays of @NgModule.
... but it won't work! It used to work when it was in a single file, but now it doesn't. What am I doing wrong here?
Whenever you import a class which is at the same directory level, you should import it like
'./fileName.extension'
Try
import { ProfileEditModal } from './profileEdit';