Ionic @NgModule Error

Ich Arbeit aktuell an einer App mit Ionic, dem bekannten framework das html/typescript code in apk’s und ipa’s umwandelt. Als ich zuletzt versucht habe mit dem Cordova plugin Local Notifications eine seite mit buttons zu machen die mir benachrichtigungen auf dem handy anzeigen, hab ich folgenden error bekommen:

Error: Unexpected value 'LocalNotifications' imported by the module 'AppModule'. Please add a @NgModule annotation.

import { Component, OnInit } from '@angular/core';
import { LocalNotifications, ELocalNotificationTriggerUnit } from '@ionic-native/local-notifications/ngx';
import { Platform, AlertController } from '@ionic/angular';
import { ThrowStmt } from '@angular/compiler';

@Component({
  selector: 'app-notifications',
  templateUrl: './notifications.page.html',
  styleUrls: ['./notifications.page.scss'],
})
export class NotificationsPage implements OnInit {

  scheduled = [];

  constructor(private plt: Platform, private localNotifications: LocalNotifications, private alertCtrl: AlertController) {
    this.plt.ready().then(() => {
      this.localNotifications.on('click').subscribe(res => {
        console.log('click: ', res);
        let msg = res.data ? res.data.mydata : '';
        this.showAlert(res.title, res.text, msg);
      });

      this.localNotifications.on('trigger').subscribe(res => {
        console.log('trigger: ', res);
        let msg = res.data ? res.data.mydata : '';
        this.showAlert(res.title, res.text, msg);
      })
    });
  }

  ngOnInit() {
    
  }

  sN() {
    this.localNotifications.schedule({
      id: 1,
      title: 'Attention',
      text: 'Musterman macht eine App',
      data: { mydata: 'My hidden message this is'},
      trigger: { in: 5, unit: ELocalNotificationTriggerUnit.SECOND }
    })
  }

  rN() {
    this.localNotifications.schedule({
      id: 22,
      title: 'Recurring',
      text: 'Mustermann macht eine App rec',
      trigger: { every: ELocalNotificationTriggerUnit.MINUTE }
    })
  }

  rD() {
    this.localNotifications.schedule({
      id: 42,
      title: 'Good Morning',
      text: 'Code smth epic today',
      trigger: { every: { hour: 11, minute: 50} }
    })
  }

  getAll() {
    this.localNotifications.getAll().then(res => {
      this.scheduled = res;
    });
  }

  showAlert(header, sub, msg) {
    this.alertCtrl.create({
      header: header,
      subHeader: sub,
      message: msg,
      buttons: ['Ok']
    }).then(alert => alert.present())
  }

}

Ich hab überall gesucht und absolut kein gleichen Error oder irgendeine Lösung gefunden die mir weiterhilft. Falls die Frage aufkommt:

Ja ich habe das Modul in der app.module.ts eingebunden

Ich hoffe wirklich mir kann jemand weiterhelfen

Mfg

Max

Hi Max,

das sieht aus als liegt der Fehler in deiner app.module.ts. Kannst du die bitte auch noch posten?

Gern hier

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy, RouterModule } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

import { LocalNotifications } from '@ionic-native/local-notifications/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicStorageModule.forRoot(), 
    AppRoutingModule, 
    IonicModule.forRoot(), 
    HttpClientModule,
    LocalNotifications 
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

So wie man hier sieht hab ich das plugin wie jedes andere auch als imports hinzugefügt

Versuch mal das LocalNotifications unter providers zu importieren, nicht unter imports

Immer noch gleicher Error

Wie genau sieht jetzt deine app.component.ts aus? Und hast du auch das plugin via Kommandozeile installiert?

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy, RouterModule } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

import { LocalNotifications } from '@ionic-native/local-notifications/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicStorageModule.forRoot(), 
    AppRoutingModule, 
    IonicModule.forRoot(), 
    HttpClientModule,
    LocalNotifications 
  ],
  providers: [
    StatusBar,
    SplashScreen,
    LocalNotifications,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Ja ich habs via command line installiert

Das ist doch nochmal die selbe oder nicht?
Du müsstest die LocalNotifications aus dem import-Array ins providers-Array verschieben

wie genau soll ich einfach ein neues providers array aufmachen und dann da reinschreiben?

upsi falsches script

Nein, einfach in das Bestehende übernehmen:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy, RouterModule } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

import { LocalNotifications } from '@ionic-native/local-notifications/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicStorageModule.forRoot(), 
    AppRoutingModule, 
    IonicModule.forRoot(), 
    HttpClientModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    LocalNotifications 
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

jap immer noch gleicher error
Ich hab keine ahnung was ich machen soll
ich hab schon so gut wie alles probiert

Falls es hilft:

Tutorial zum Installieren: (click)
Tutorial für die Notification page: (click)

Beiden bin ich gefolgt

Ok kurzes update
habe gesehen das bei oben gennantem youtube tutorial (click) die app mit angular generiert wurde

das hab ich nicht so
vieleicht liegt es daran
kann man angular noch im nachhinein installieren?

Ich würde die App mit ionic generieren, nicht mit Angular, du möchtest ja eine Ionic-App entwickeln

Also wenn ich diesem Tutorial folge, funktioniert es bei mir. Kannst du das bestätigen?

also die app ist schon mit ionic gemacht aber mit dem projekt type angular
ich probier gerade den auf ionic-angular zu stellen
steht alles in der ionic.config.json
aber sieht nicht so aus als ob es daran liegt

gibt es sonst noch was das ich ausprobieren kann?

weil wie gesagt ich hab bestimmt seit 1er woche nach einem zumindest „ähnlichen error“ gesucht und nichts gefunden das geklappt hat

und ich werd auch selber nicht schlau aus dem error
also ich weis schon das es vom app.module.ts kommt und was mit den NgModule imports zutuhn hat
aber ich komm echt net weiter

Hast du es denn mal wie ich geschrieben hab mit meinem Tutorial in einem neuen Projekt ausprobiert?

meinst du mit dem tutorial?

Nein, das das ich oben verlinkt habe

ich werde es mal ausprobieren

So wie es aktuell aussieht (bin noch nicht ganz fertig mit compilen) geht es

Es könnte noch an etwas anderes legen

und zwar hab ich meine app nach diesen tutorial erstellt (click) und ich glaub im laufe dieses tutorials wurden paar sachen verändert

Jap siehst so aus als würde das Tutorial funktionieren

Ok wow problem gelöst

Für alle die Zukünftig dieses Problem haben sollten:

Überprüft unbedingt das ihr das module auf gar keinen fall in eure imports in die app.module.ts reinhaut sondern NUR unter die providers