Error: Unexpected value 'undefined' imported by the module 'AppModule

mrossid · January 5, 2018, 11:28am

dear someone, please help me to fix this, i am a newbie ionic user,please

all i want to did is create a modal,show it when the fab botton is pressed.
but i had this err…

Error: Unexpected value 'undefined' imported by the module 'AppModule'
    at syntaxError (http://localhost:8100/build/vendor.js:75334:34)
    at http://localhost:8100/build/vendor.js:89963:40
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (http://localhost:8100/build/vendor.js:89940:49)
    at JitCompiler._loadModules (http://localhost:8100/build/vendor.js:108410:87)
    at JitCompiler._compileModuleAndComponents (http://localhost:8100/build/vendor.js:108371:36)
    at JitCompiler.compileModuleAsync (http://localhost:8100/build/vendor.js:108287:37)
    at CompilerImpl.compileModuleAsync (http://localhost:8100/build/vendor.js:74170:49)
    at PlatformRef.bootstrapModule (http://localhost:8100/build/vendor.js:5799:25)
    at Object.201 (http://localhost:8100/build/main.js:247:109)

i’ve defined the modal in my app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { DetailsPage } from '../pages/details/details';
import { modalPage } from '../pages/add-modal/add-modal';
import { ShareServiceProvider } from '../providers/share-service/share-service';


import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    DetailsPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpClientModule,modalPage
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    DetailsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    ShareServiceProvider
  ]
})
export class AppModule{}

THANKS.

anna_liebt · January 5, 2018, 11:39am

Hello,

maybe modalPage is missing in declarations and entryComponents.

Best regards, anna-liebt

mrossid · January 5, 2018, 12:02pm

i’ve updated the code as u suggest…
but i got an err like this…
what’s the problem? can you lead me?
thank you

here’s the code

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { DetailsPage } from '../pages/details/details';
import { modalPage } from '../pages/add-modal/add-modal';
import { ShareServiceProvider } from '../providers/share-service/share-service';


import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    DetailsPage,modalPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpClientModule,modalPage
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    DetailsPage,
    modalpage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    ShareServiceProvider
  ]
})
export class AppModule {}

here is the err…

anna_liebt · January 5, 2018, 12:11pm

Hello,
second failure is a Typo. You wrote modalpage, but Import is modalPage.

First failure is maybe also a typo. Check upper and lower case in paths.

And sorry for my bad english. You must import how your page is exported. So maybe your page is add-modal.ts and declared in export class add-Modal, then this you must use.

Best regards, anna-liebt.

mrossid · January 5, 2018, 12:20pm

thank you dear,

it is caused by typo,
and i was fixed the code become like this…

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { DetailsPage } from '../pages/details/details';
import { ModalPage } from '../pages/add-modal/add-modal';
import { ShareServiceProvider } from '../providers/share-service/share-service';


import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    DetailsPage,
    ModalPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpClientModule,
    ModalPage
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    DetailsPage,
    ModalPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    ShareServiceProvider
  ]
})
export class AppModule {}

and when i refresh the webpage where it’s loaded
i got a new weird err like this,

Error: Unexpected value 'undefined' imported by the module 'AppModule'
    at syntaxError (http://localhost:8100/build/vendor.js:75334:34)
    at http://localhost:8100/build/vendor.js:89963:40
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (http://localhost:8100/build/vendor.js:89940:49)
    at JitCompiler._loadModules (http://localhost:8100/build/vendor.js:108410:87)
    at JitCompiler._compileModuleAndComponents (http://localhost:8100/build/vendor.js:108371:36)
    at JitCompiler.compileModuleAsync (http://localhost:8100/build/vendor.js:108287:37)
    at CompilerImpl.compileModuleAsync (http://localhost:8100/build/vendor.js:74170:49)
    at PlatformRef.bootstrapModule (http://localhost:8100/build/vendor.js:5799:25)
    at Object.201 (http://localhost:8100/build/main.js:246:109)

omg i’ve been stacked in this modalCode for a longtime

anna_liebt · January 5, 2018, 12:29pm

Hello,

please check what your export class ??? is in your …/pages/add-modal/add-modal.

Best regards, anna-liebt

mrossid · January 5, 2018, 1:07pm

i’m sorry
i dont understand with what you said “check your add-modal class”,

here is my add-modal class

add-modal.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { AddModalPage } from './add-modal';

@NgModule({
  declarations: [
    AddModalPage,
  ],
  imports: [
    IonicPageModule.forChild(AddModalPage),
  ],
})
export class AddModalPageModule {}

add-modul.ts


import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

/**
 * Generated class for the AddModalPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-add-modal',
  templateUrl: 'add-modal.html',
})
export class AddModalPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad AddModalPage');
  }

}

is there any wrong with my add-modal class ???

anna_liebt · January 5, 2018, 1:14pm

Hello,

export class AddModalPage

this what you are exporting. In your Import you must use that.

So go to app.module.ts and Import like

import { AddModalPage} from '../pages/add-modal/add-modal';

Take care that there is no typo, no upper case, lower case fault, that realtive path is correct.

Otherwise I have no idea and I am completly wrong. In this case go back to start.

Best regards, anna-liebt

mrossid · January 5, 2018, 1:24pm

thank you,
i knew that i didn’t understand about ionic 3 concept,i really enjoyed doing a hardfixing to get any solution about some err, forgive me if i make you busy with this,
but i think it will fix with one step closer,

i did what you suggest before,
and err come,

here it is the err,

Error: Unexpected directive 'AddModalPage' imported by the module 'AppModule'. Please add a @NgModule annotation.
    at syntaxError (http://localhost:8100/build/vendor.js:75334:34)
    at http://localhost:8100/build/vendor.js:89957:44
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (http://localhost:8100/build/vendor.js:89940:49)
    at JitCompiler._loadModules (http://localhost:8100/build/vendor.js:108410:87)
    at JitCompiler._compileModuleAndComponents (http://localhost:8100/build/vendor.js:108371:36)
    at JitCompiler.compileModuleAsync (http://localhost:8100/build/vendor.js:108287:37)
    at CompilerImpl.compileModuleAsync (http://localhost:8100/build/vendor.js:74170:49)
    at PlatformRef.bootstrapModule (http://localhost:8100/build/vendor.js:5799:25)
    at Object.201 (http://localhost:8100/build/main.js:246:109)

anna_liebt · January 5, 2018, 1:27pm

Hello,
what for editor do you use?

Best regards, anna-liebt

mrossid · January 5, 2018, 1:29pm

Sublime Text Version 3.0,build 3143

what;s wrong?

anna_liebt · January 5, 2018, 1:39pm

Hello,

nothing.

Maybe for sublime exist a plugin that helps with angular, paths and so on and can bring a bit more help.

Best regard, anna-liebt

anna_liebt · January 5, 2018, 1:42pm

hello,

show your app.module.ts again.

In one post you have modalpage in Imports:[…, remove it from there

Best regards, anna-liebt

mrossid · January 5, 2018, 1:45pm

OMG WHAT WAS HAPPEN???

I REMOVED THE “AddModalPage” imports :[] section and finally fixed this!!!

can you make a clarify about this case?
i dont know why this can happend a

here is the final code of my app.module.ts,

import { BrowserModule } from ‘@angular/platform-browser’;
import { ErrorHandler, NgModule } from ‘@angular/core’;
import { IonicApp, IonicErrorHandler, IonicModule } from ‘ionic-angular’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;
import { StatusBar } from ‘@ionic-native/status-bar’;

import { MyApp } from ‘./app.component’;
import { HomePage } from ‘…/pages/home/home’;
import { DetailsPage } from ‘…/pages/details/details’;
import { AddModalPage } from ‘…/pages/add-modal/add-modal’;
import { ShareServiceProvider } from ‘…/providers/share-service/share-service’;

import { HttpClientModule } from ‘@angular/common/http’;


@NgModule({
  declarations: [
    MyApp,
    HomePage,
    DetailsPage,
    AddModalPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpClientModule,
    **// AddModalPage <-------------------------------------------**
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    DetailsPage,
    AddModalPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    ShareServiceProvider
  ]
})
export class AppModule {}

anna_liebt · January 5, 2018, 2:05pm

Ha ha,
clarify… that makes my laughing… I’m a bloody beginner with all that stuff.

I hope somebody else can explain it in a better way.

There are lazy loaded pages and "I can’t remember called…pages’…short Icrc…,pages.

Icrc…pages are made as you have done it now. lazy loaded pages are imported otherwise.

Best regards, anna-liebt

mrossid · January 5, 2018, 2:18pm

hahaha
no prob, we’re a human.
no one’s perfect in this a*s world

loved to communication through this forum with you
thanks for the lead!
GOOD JOB!

AaronSterling · January 5, 2018, 4:18pm

Eagerly loaded pages