unexpected directive imported by the module please add a @ngmodule annotation

Question

Tried ionic cordova build android --prod --release in an attempt to prepare an app for deployment. I came across an error which I attempted to fix. The error originally received was

Type SecondPage in longlocation/second/second.ts is part of the declarations of 2 modules: AppModule in longlocation/src/app/app.module.ts and SecondPageModule in longlocation/src/pages/second/second.module.ts! Please consider moving SecondPage in longlocation/src/pages/second/second.ts to a higher module that imports AppModule in longlocation/src/app/app.module.ts and SecondPageModule in longlocation/src/pages/second/second.module.ts.

I removed the mentioned components from

declarations

as instructed by another stackoverflow answer.

Now I'm getting another error which says

unexpected directive 'SecondPage' imported by the module 'AppModule'. Please add a @ngmodule annotation

My code is

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 { SecondPage } from '../pages/second/second';
import { SendtextPage } from '../pages/sendtext/sendtext';

import { SMS } from '@ionic-native/sms';

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

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    //SecondPage,
    //SendtextPage
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
      SecondPage,
      SendtextPage,
    IonicModule.forRoot(MyApp)

  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    SecondPage,
    SendtextPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    SMS,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Ionic Framework : 3.9.2 Ionic App Scripts : 3.2.1 Angular Core : 5.2.11 Angular Compiler CLI : 5.2.11 Node : 10.6.0

Any help is greatly appreciated.

Why do you have page components in the imports array in your app module? Only modules should be declared there. — R. Richards
It was not originally there. I added it there to remove another error. Which in turn lead to this. The original error is also mentioned. — Ela Buwa
Have you tried to add them to both declarations and entryComponents — Abdulrahman Falyoun
@Abdulrahman That's how the original code was. I get the error "Type SecondPage in /longdirectory/src/pages/second/second.ts is part of the declarations of 2 modules: AppModule and SecondPageModule. Please consider moving SecondPage to a higher module that imports AppModule and SecondPageModule". — Ela Buwa

Ali Mhanna Ali Mhanna · Accepted Answer · 2019-06-24T06:42:41

edit your second.module.ts and remove SecondPage from declarations and leave it on app.module.ts if you navigate to it like this :

this.navCtrl.push(SecondPage);

if you'r navigate to it using :

 this.navCtrl.push("SecondPage");

you should remove it from app.module.ts too

unexpected directive imported by the module please add a @ngmodule annotation

1 Answers