ionic2 app build prod failed with angular2-mqtt

[bengchet]

Hi, first of all thanks for your awesome lib, because it is quite hard to find mqtt lib for angular2. Currently I am testing it with Ionic2 and trying to build an Android App for it. Everything is working fine until I got the following error when I was running the command ionic build android --prod

can't resolve module /home/beng/ionic_app/myLoRa/node_modules/angular2-mqtt/node_modules/@angular/core/src/di/reflective_key.d.ts from /home/beng/ionic_app/myLoRa/node_modules/angular2-mqtt/node_modules/@angular/core/src/di/reflective_key.d.ts
[09:30:36]  build prod failed: can't find symbol KeyRegistry exported from module 
            /home/beng/ionic_app/myLoRa/node_modules/angular2-mqtt/node_modules/@angular/core/src/di/reflective_key.d.ts 
[09:30:36]  ionic-app-script task: "build" 
[09:30:36]  Error: can't find symbol KeyRegistry exported from module 
            /home/beng/ionic_app/myLoRa/node_modules/angular2-mqtt/node_modules/@angular/core/src/di/reflective_key.d.ts 
Error: can't find symbol KeyRegistry exported from module /home/beng/ionic_app/myLoRa/node_modules/angular2-mqtt/node_modules/@angular/core/src/di/reflective_key.d.ts
    at ReflectorHost.findDeclaration (/home/beng/ionic_app/myLoRa/node_modules/@angular/compiler-cli/src/reflector_host.js:173:23)
    at /home/beng/ionic_app/myLoRa/node_modules/@angular/compiler-cli/src/codegen.js:137:46
    at Array.forEach (native)
    at extractProgramSymbols (/home/beng/ionic_app/myLoRa/node_modules/@angular/compiler-cli/src/codegen.js:120:10)
    at CodeGenerator.codegen (/home/beng/ionic_app/myLoRa/node_modules/@angular/compiler-cli/src/codegen.js:57:29)
    at /home/beng/ionic_app/myLoRa/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:51:34

When I am running the command ionic build android without "--prod" the compilation is okay. Hope you can give some insights on this issue because I am quite new to angular2 and I might miss something.

Below is my code.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { MqttConnectionState, MqttService } from 'angular2-mqtt';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})

export class HomePage {
  mqtt: any = null;
  mqtt_state: boolean = false;
  chart: any = null;
  options: any = null;

  constructor() {
      this.mqtt = new MqttService({
        hostname: 'broker.mqttdashboard.com',
        port: 8000,
      });

      this.mqtt.state.subscribe((value)=>{
          switch(value){
            case MqttConnectionState.CLOSED:
              this.onLostConnection();
              break;
            case MqttConnectionState.CONNECTED:
              this.onConnected();
              break;
          }
      });

      //register subscription callback
      this.mqtt.observe("bengchet/ionic2").subscribe((resp)=>{
        var json = JSON.parse(resp.payload.toString());
        this.chart.series[0].addPoint(parseFloat(json.value));
      });
    }

    onConnected(){
      console.log('Connected to broker');
      //publish some message
      //this.mqtt.unsafePublish("bengchet/ionic2","Hello world 2",{qos:1});
    }

    onLostConnection(){}

    ionViewWillEnter(){
        this.options = {
            chart: { type: 'spline' },
            title : { text : 'simple chart' },
            series: [{
                data: [],
            }]
        };
        setInterval(()=>{
          let json = new Json((Math.random() * 10).toFixed(2));
          this.mqtt.unsafePublish("bengchet/ionic2", JSON.stringify(json), {qos: 1});
        }, 5000);
    }

    saveInstance(chartInstance) {
        this.chart = chartInstance;
    }
}

export class Json{
  constructor(private value: any){}
}

Thanks.

[sclausen]

Which version of ionic and angular2-mqtt do you use?

[sclausen]

Maybe it's because ionic uses angular 2.2.1 and angular2-mqtt uses angular ^2.4.1 I will have a look and see, if I could set a lower version without problems.

[sclausen]

I also found this, using google with the actual error message https://forum.ionicframework.com/t/build-error-cant-find-symbol-keyregistry/72811/3 Maybe this helps.

[bengchet]

Hi thanks for reply. This is the package.json I am using.

"dependencies": {
    "@angular/common": "2.2.1",
    "@angular/compiler": "2.2.1",
    "@angular/compiler-cli": "2.2.1",
    "@angular/core": "2.2.1",
    "@angular/forms": "2.2.1",
    "@angular/http": "2.2.1",
    "@angular/platform-browser": "2.2.1",
    "@angular/platform-browser-dynamic": "2.2.1",
    "@angular/platform-server": "2.2.1",
    "@ionic/storage": "1.1.7",
    "angular2-highcharts": "^0.4.1",
    "angular2-mqtt": "^1.5.0",
    "ionic-angular": "^2.0.0-rc.5",
    "ionic-native": "2.2.11",
    "ionicons": "3.0.0",
    "rxjs": "5.0.0-beta.12",
    "sw-toolbox": "3.4.0",
    "web-mqtt-client": "^1.3.0",
    "zone": "^0.3.4",
    "zone.js": "0.6.26"
  },

I have followed the instructions according to the link provided. But the problem still exists. May be the instructions didn't show how to install latest angular? It just shows npm install ionic-angular@latest, I don't know if it is the same as the 'angular' you are mentioning.

[sclausen]

Does the new version 1.5.1 fix your problem?

[bengchet]

Yes, totally fixed the problem. Many thanks!