ngx-mqtt TypeError: __WEBPACK_IMPORTED_MODULE_0__angular_core __. defineInjectable не является функцией

Question

Я новичок в Ionic 3 и мне нужно использовать плагин ngx-mqtt , чтобы подписаться на тему.К сожалению, когда я установил плагин, я получил эту ошибку в моем app.module.ts.Я не могу найти подробное руководство по этому плагину.

В консоли браузера ошибка появляется в mqtt.service.js:385

Вот моя ионная информация:

Ionic:

   ionic (Ionic CLI)  : 4.2.1 
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (1 plugins total)

System:

   Android SDK Tools : 26.1.1 
   ios-deploy        : 1.9.2
   NodeJS            : v6.9.2 
   npm               : 6.4.1
   OS                : macOS High Sierra
   Xcode             : Xcode 10.0 Build version 10A255

Вот мой package.json:

{
  "name": "app",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/core": "~4.15.0",
    "@ionic-native/splash-screen": "~4.15.0",
    "@ionic-native/status-bar": "~4.15.0",
    "@ionic/storage": "^2.2.0",
    "cordova-sqlite-storage": "2.5.0",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "mqtt": "^2.18.8",
    "ngx-mqtt": "6.7.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.0",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-sqlite-storage": {}
    }
  }
}

А вот мой app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { IonicStorageModule } from '@ionic/storage';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
// import { ListPage } from '../pages/list/list';
import { LoginPage } from '../pages/login/login';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

// MQTT
import { Observable } from 'rxjs/Observable';
import {
  // IMqttMessage,
  MqttModule,
  MqttService,
  IMqttServiceOptions
} from 'ngx-mqtt';

export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {
  hostname: 'wss://iot.eclipse.org',
  port: 443,
  path: '/ws'
};

export function mqttServiceFactory() {
  return new MqttService(MQTT_SERVICE_OPTIONS);
}

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    // ListPage,
    LoginPage
  ],
  imports: [
    BrowserModule,
    MqttModule.forRoot({
      hostname: 'wss://iot.eclipse.org',
      port: 443,
      path: '/ws'
    }),
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot(),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    // ListPage,
    LoginPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    // MqttService,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Answer 1

Было замечено, что в README.md файле Git repo они четко упомянули, что ngx-mqtt> = 6 совместим только с угловым> = 6 и каксогласно вашему package.json файлу очищается, что ваш проект имеет угловую версию как 5.2.11 .Следовательно, вам необходимо обновить свой проект соответствующей угловой версией.

Надеюсь, это поможет вам.