Search code examples
javascriptandroidangularionic2production

Error with OpenWeatherMap with ionic 2 Production build

I am trying to build an ionic2 app using angular 2 and TS, the build is in production mode and i get this error.

Error: Unexpected value 'OpenWeatherMapModule in E:/Stage/VLT 
        APP/com.vlt.app/node_modules/ionic-
openweathermap/dist/openweathermap.module.d.ts' imported by the module 
        'AppModule in E:/Stage/VLT APP/com.vlt.app/src/app/app.module.ts'. 
Please add a @NgModule annotation. 
Error: Unexpected value 'OpenWeatherMapModule in E:/Stage/VLT 
APP/com.vlt.app/node_modules/ionic-
openweathermap/dist/openweathermap.module.d.ts' imported by the module 
'AppModule in E:/
Stage/VLT APP/com.vlt.app/src/app/app.module.ts'. Please add a @NgModule 
annotation.

I am using OpenWeatherMap in my app and i don't know why i only get this Error in Production mode. Besides i don't think i need to edit any files in node modules library directory.

EDIT

this is my imports array in app.module.ts

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ListPage,
    BestOffers,
    excursion,
    hotel,
    circuit,
    MapPage,
    NosExcursion,
    WeatherPage,
    NosHotel,
    NosCircuit,
    CircuitPage,
    ExcursionPage,
    ImageModal,
    SearchModal,
    ResultModal,
    PromoPage,
    HotelPage,
    GalleryPage,
    GalleryModal,
    ZoomableImage,
    PopoverPage,
    ReservationModal,
    CurrencyChange,
CircuitReservationModal,
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpModule,
    IonicStorageModule.forRoot(),
    SuperTabsModule.forRoot(),
    AgmCoreModule.forRoot({
      apiKey: '**********'
    }),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [Http]
      }
    }),
    IonicImageViewerModule,
    OpenWeatherMapModule,
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage,
    BestOffers,
    excursion,
    hotel,
    circuit,
    MapPage,
    NosExcursion,
    WeatherPage,
    NosHotel,
    NosCircuit,
    CircuitPage,
    HotelPage,
    ExcursionPage,
    ImageModal,
    SearchModal,
    ResultModal,
    PromoPage,
    GalleryPage,
    GalleryModal,
    PopoverPage,
    ReservationModal,
    CurrencyChange,
    CircuitReservationModal,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    SQLite,
    HotelPage,
    InAppBrowser,
  ]
})
export class AppModule {}
export function createTranslateLoader(http: Http) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
    }

So any help ?

Solution

  • After testing for a while, I got the same issue as yours. I think it is the problem with openweathermap Module. The file structure in this module seem not correct.

    enter image description here

    So In stead of installing this module, I download the source code and include in my ionic sample as below:

    enter image description here

    home.html 

    <ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <openweathermap [options]="options"></openweathermap>
</ion-content>

    home.ts 

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  options: any = {};

  constructor(public navCtrl: NavController) {
    this.options = {
          apikey: "6ff5deed8aaa46c2fdcb1bfddd2d4ecc",
          city: { "name": ["Phnom Penh"] },
          unitFormat: "metric",
          lang: "en"
        }
  }
}

    The source code of this example can be found here: ionic3-openweathermap

    I Hope this could help you, Thanks :)

    EDIT

    I tested in Android production and it work fine