Custom component - failing in --prod mode


#1

I am trying to create a custom component. It works fine in ionic serve and ionic build but fails in ionic build with --prod

The error:

08:52:00]  ngc started ... 
Error: Template parse errors:
Can't bind to 'toggleMap' since it isn't a known property of 'earth-map'.

Full log of error: https://gist.github.com/pliablepixels/54d9bd25ee4c5c70b1b3cddae81eb76e

My component.module.ts

import { NgModule,  } from '@angular/core';
import { EarthMapComponent } from './earth-map/earth-map';
import { IonicModule } from 'ionic-angular';

@NgModule({
	declarations: [EarthMapComponent],
	imports: [IonicModule], // needed to use ion-spinner 
	exports: [EarthMapComponent]
})
export class ComponentsModule {}

app.module.ts: (I’ve tried importing and commenting out. If I import, it says duplicate definition as the above file already has it)

import { EarthMapComponent } from '../components/earth-map/earth-map';

@NgModule({
  declarations: [
    MyApp,
    FavPage,
    ContactPage,
    SettingPage,
    TabsPage,
    CardListPage,
   // EarthMapComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot({name:'__cardCallDB', driverOrder:['sqlite','websql','indexeddb']}),
    //EarthMapComponent
  ],

earth-map.ts

import { Component, Input} from '@angular/core';
import {  MapAnimation } from '../../animations/animations';


@Component({
  selector: 'earth-map',
  templateUrl: 'earth-map.html',
  animations: [
    MapAnimation

  ]
})
export class EarthMapComponent {
  // if you do ngIf in parent (view), then leave animation
  // of child is not called, so changed it to an input
  @Input() toggleMap: boolean;
  mapLoaded = false;
  constructor() {
  }

  mapLoadedCallback() {
    this.mapLoaded = true;
  }

}

earth-map.html


<ion-item  *ngIf="toggleMap" [@mapAnim] no-padding class="fullItem">
  <div>
    <ion-spinner *ngIf="!mapLoaded" name="bubbles"></ion-spinner>
    <img src="http://api.usno.navy.mil/imagery/earth.png?date=today&ID=PP_CardCall" (load)="mapLoadedCallback()" />
  </div>
</ion-item>

How I invoke it from another page:

in the page ts file

import { EarthMapComponent } from '../../components/earth-map/earth-map';

in page template

  <earth-map [toggleMap]="showWorldMap"></earth-map>

#2

Problem solved.
I found this thread which helped

I am not using lazy loading, so I had to remove the component module file and declare EarthMapComponent in app.module.ts