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


#1

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.


#2

Hello,

maybe modalPage is missing in declarations and entryComponents.

Best regards, anna-liebt


#3

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…


#4

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.


#5

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 :frowning:


#6

Hello,

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

Best regards, anna-liebt


#7

i’m sorry :frowning:
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 ???


#8

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


#9

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)

#10

Hello,
what for editor do you use?

Best regards, anna-liebt


#11

Sublime Text Version 3.0,build 3143

what;s wrong?


#12

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


#13

hello,

show your app.module.ts again.

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

Best regards, anna-liebt


#14

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 :smile: 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 {}

#15

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


#16

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

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


#17

Eagerly loaded pages