https://capacitor.ionicframework.com/docs/apis/push-notifications/

Review this.
Bye

Thanks for your help, @rapropos. I’ve followed your bulleted suggestion, though yet to fix the leaking subscriptions. I’m currently unsubscribing from ngOnDestroy(). How else could you unsubscribe the subscriptions besides the until-destroy plugin?

I also updated the authservice with the follownig

export class AuthenticateService {
 
  user: Observable<firebase.User>;
  constructor(private storage: Storage, private firebaseAuth: AngularFireAuth)
  {
    this.user = firebaseAuth.authState;
  }
///...etc

so I can just call the following instead of the snapshot of getLoggedInUser()

this.authService.user.subscribe((u)=>{
console.log(u) /*displays firebase user object if logged in, null if logged out*/
})

I got the idea from this article.

(post withdrawn by author, will be automatically deleted in 24 hours unless flagged)

(post withdrawn by author, will be automatically deleted in 24 hours unless flagged)

Here is some code I had in an Ionic 3 app hope it helps

    //Pages navigaton Array
    this.leftPages = [
      { title: 'Home', component: "HomePage", category: "" },
      { title: 'All Categories', component: "CategoriesPage", category: "" },
      { title: 'Shopping Cart', component: "ShoppingCartPage", category: "" },
      { title: 'Account', component: "AccountPage", category: "" },
      { title: 'Shopping Lists', component: "ShoppingListPage", category: "" },
      { title: 'Order History', component: "OrderHistoryPage", category: "" },
      { title: 'Login', component: "LoginPage", category: "" },
      { title: 'Help', component: "HelpPage", category: "" },
    ];


    this.activePage = this.leftPages[0];

// Navigate via code
    this.nav.setRoot(page.component, category);
    this.activePage = page;
  }

  //Check for the active page
  checkActive(page) {
    return page == this.activePage;
  }

<ion-list>
      <button ion-item menuClose="main-menu-left" *ngFor="let leftpage of leftPages"
        [class.activeHighlight]="checkActive(leftpage)" (click)="openPage(leftpage)">
        {{leftpage.title}}
      </button>
</ion-list>

That’s fine; the UntilDestroy decorator does basically that behind the scenes.

check this video - https://www.youtube.com/watch?v=9yVQfuYSWOE

const App: React.FC = () => {
  const { authValues } = React.useContext(AuthContext);

  return (
    <IonApp>
      {!authValues.authenticated ? (
        <IonReactRouter>
          <Route path="/login" component={LoginPage} exact={true} />
          <Route
            path="/"
            render={() => <Redirect to="/login" />}
            exact={true}
          />
          <Route
            path="*"
            render={() => <Redirect to="/login" />}
            exact={true}
          />
        </IonReactRouter>
      ) : (
        <IonReactRouter>
          <IonTabs>
            <IonRouterOutlet>
              {/* specify route to each of teh tabs*/}
              <Route path="/tab1" component={Tab1} exact={true} />
              <Route path="/tab2" component={Tab2} exact={true} />
              <Route
                path="/tab2/tab-detail"
                component={TabDetail}
                exact={true}
              />
              {/* default route is to tab1 */}
              <Route
                path="/"
                render={() => <Redirect to="/tab1" />}
                exact={true}
              />
            </IonRouterOutlet>
            {/* draw what the tab bar should look like*/}
            <IonTabBar slot="bottom">
              <IonTabButton tab={"tab1"} href={"/tab1"}>
                <IonLabel>{"Tab One"}</IonLabel>
              </IonTabButton>
              <IonTabButton tab={"tab2"} href={"/tab2"}>
                <IonLabel>{"Tab Two"}</IonLabel>
              </IonTabButton>
            </IonTabBar>
          </IonTabs>
        </IonReactRouter>
      )}
    </IonApp>
  );
};

export default App;

why are you passing the the route into the menu? also what you are trying to do is hide and show the menu based on a specific state… so create a state variable.

const showMenu = route.location.pathname !== '/login'  &&
                 route.location.pathname !== '/details'
return (
   <IonSplitPane contentId="main">
      { showMenu === true ? <Menu route={route} /> : null }
     ... rest of code
   </IonSplitPane>
)

you can see my approach here in this video

Sharing the API service call details code.

import { HttpClient, HttpHeaders, HttpParams, HttpErrorResponse } from '@angular/common/http';
import { ToastController, LoadingController } from '@ionic/angular';
import { Storage } from '@ionic/storage';
import { BalaEnv } from './bala-env-vars';
import { catchError } from 'rxjs/operators';
import { AlertController } from '@ionic/angular';
import { error } from 'util';


@Injectable({
  providedIn: 'root'
})

export class BalaService {
  auth_token: any;
  httpOptions: any;
  baseUrl: any;
  hasInit: boolean;
  userData: any;

  constructor(
    public http: HttpClient,
    private storage: Storage,
    private alertController: AlertController,
    private toastController: ToastController,
    private loadingCtrl: LoadingController,

  ) {
    this.hasInit = false;
    this.baseUrl = BalaEnv.BASE_API;
    this.init();
  }

  handleError(error: HttpErrorResponse) {
    let me = this;
    this.loadingCtrl.dismiss();
    if (error.error instanceof ErrorEvent) {
      // A client-side or network error occurred. Handle it accordingly.
    } else {

      if (error.status == 401) {
        this.presentToast(error.error.detail);

        if (error.error.detail === 'Signature has expired.') {
          //  this.presentAlert(error.error.detail)
          me.storage.get('user')
            .then((user) => {
              me.recallToken(user).subscribe((res: any) => {
                me.storage.set('authToken', res.token);
                me.init();
              });
            });
        }
        else if (error.error.message != undefined) {
          me.presentToast(error.error.message)
        } else {
          return [];
        };
      } else if (error.status == 404) {
        me.presentToast('Link is broken');
      } else if (error.status == 400) {
        Object.keys(error.error).forEach(function (key) {
          me.presentToast(error.error[key][0])
        });
        return [];
      }
      else if (error.status == 500) {
        this.presentToast('something went wrong');
      }
    }
    return [];
  }
  async presentAlert(msg) {
    const alert = await this.alertController.create({
      header: 'Alert',
      message: msg,
      buttons: ['OK']
    });

    await alert.present();
  }
  async presentToast(msg) {
    const toast = await this.toastController.create({
      message: msg,
      duration: 2000
    });
    toast.present();
  }
  hasAuthToken() {
    return this.auth_token && true;
  }
  getAuthToken() {
    return this.auth_token;
  }
  getUser() {
    let t = this;
    t.storage.get("userDetails")
      .then((user) => {
      });
  }
  setAuthToekn(authToken: string) {
    this.auth_token = authToken;
  }
  setUserData(user: string) {
    this.userData = user;
  }
  getUserData() {
    return this.userData;
  }
  removeAuthToken() {
    this.auth_token = null;
  }
  refreshToken(token) {
    let t = this;
    let httpOption = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Accept': 'application/json',
      })
    };
    return this.http.post(this.baseUrl + 'auth/jwt/refresh/', token, httpOption)
      .pipe(
        catchError((error) => {
          return t.handleError(error)
        })
      )
  }
  recallToken(payload) {
    let t = this;
    let httpOption = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Accept': 'application/json',
      })
    };
    return this.http.post(this.baseUrl + 'auth/jwt/', payload, httpOption)
      .pipe(
        catchError((error) => {
          return t.handleError(error)
        })
      )
  }
  init() {
    let me = this;
    me.storage.get('authToken')
      .then((token) => {
        if (token != null) {
          me.hasInit = true;
          me.setAuthToekn(token);
          me.httpOptions = {
            headers: new HttpHeaders({
              'Content-Type': 'application/json',
              'Accept': 'application/json',
              'Authorization': 'JWT ' + token
            })
          };
        }
        else {
          me.httpOptions = {
            headers: new HttpHeaders({
              'Content-Type': 'application/json',
              'Accept': 'application/json',
            })
          };
        }
      });
  }
  setParams(params) {
    let obj = new HttpParams();
    for (let i in params) {
      obj = obj.set(i, params[i]);
    }
    return obj;
  }
  loginService(payLoad: any) {
    let me = this;
    return this.http.post(this.baseUrl + 'auth/', payLoad, this.httpOptions)
      .pipe(
        catchError((error) => {
          return me.handleError(error);
        })
      );
  }

  registrationService(payLoad: any) {
    let t = this;
    return this.http.post(this.baseUrl + 'auth/register/', payLoad, this.httpOptions)
      .pipe(
        catchError((error) => {
          return t.handleError(error);
        })
      );
  }

  getLevel() {
    let t = this;
    return t.http.get(this.baseUrl + 'level', this.httpOptions)
      .pipe(
        catchError((error) => {
          return t.handleError(error);
        })
      )
  }
  getLevelById(id) {
    let t = this;
    return t.http.get(this.baseUrl + 'level/' + id, this.httpOptions)
      .pipe(
        catchError((error) => {
          return t.handleError(error);
        })
      )
  }

  //level/registration_submit/id/
  levelRegistration(u_id, payLoad) {
    let t = this;
    let httpOptions = {
      headers: new HttpHeaders({
        'Authorization': 'JWT ' + t.getAuthToken(),
        'Accept': 'application/json',
      })
    };
    return t.http.put(this.baseUrl + 'level/registration_submit/' + u_id, payLoad, httpOptions)
      .pipe(
        catchError((error) => {
          alert(JSON.parse(error));
          return t.handleError(error);
        })
      )
  }
//upload image / video in activity log
  uploadEventMedia(payLoad){
    let t = this;
    let httpOptions = {
      headers: new HttpHeaders({
        'Authorization': 'JWT ' + t.getAuthToken(),
        'Accept': 'application/json',
      })
    };
    return t.http.post(this.baseUrl + 'activity_log/activityuploads/', payLoad, httpOptions)
      .pipe(
        catchError((error) => {
          alert(JSON.parse(error));
          return t.handleError(error);
        })
      )
  }

  uploadImage(u_id, payLoad) {
    let t = this;
    let httpOptions = {
      headers: new HttpHeaders({
        'Authorization': 'JWT ' + t.getAuthToken(),
        'Content-Type': 'multipart/form-data',
        'Accept': 'application/json',
      })
    }; 
    return t.http.post(this.baseUrl + 'level/registration_submit_image/' + u_id, payLoad, httpOptions)
      .pipe(
        catchError((error) => {
          alert(JSON.parse(error));
          return t.handleError(error);
        })
      )
  }

  getState(payLoad) {
    let t = this;
    const requestparams = this.setParams(payLoad);
    const options = Object.assign({}, this.httpOptions, { params: requestparams });
    return t.http.get(this.baseUrl + 'location/states', options)
      .pipe(
        catchError((error) => {
          return t.handleError(error);
        })
      )
  }
  getCity(stateid) {
    let t = this;
    return t.http.get(this.baseUrl + 'location/cities/' + stateid, this.httpOptions)
      .pipe(
        catchError((error) => {
          return t.handleError(error);
        })
      )
  }
  getQuiz(lid) {
    let t = this;
    return t.http.get(this.baseUrl + 'level/quiz/' + lid, this.httpOptions)
      .pipe(
        catchError((error) => {
          return t.handleError(error);
        })
      )
  }
  getCallSlot(payLoad) {
    let t = this;
    const requestparams = this.setParams(payLoad);
    const options = Object.assign({}, this.httpOptions, { params: requestparams });
    return t.http.get(this.baseUrl + 'level/call_slots/', options)
      .pipe(
        catchError((error) => {
          return t.handleError(error);
        })
      )
  }
  scheduleSkypeCall(payload) {
    let t = this;
    return t.http.post(this.baseUrl + 'level/accept_tc_coc/', payload, this.httpOptions)
      .pipe(
        catchError((error) => {
          return t.handleError(error);
        })
      )
  }
  _addStandardHeaders(header: HttpHeaders, userId) {
    let t = this;
    header = header.set('Content-Type', 'application/x-www-form-urlencoded');
    header = header.set('Accept', 'application/json');
    header = header.set('Authorization', 'JWT ' + t.getAuthToken());
    header = header.set('User', userId);
    return header;
  }

  _initializeReqOpts(reqOpts) {
    if (!reqOpts) {
      reqOpts = {
        headers: new HttpHeaders(),
        params: new HttpParams()
      };
    }
    return reqOpts;
  }

  submitQuiz(payload) {
    let t = this;
    return t.http.post(this.baseUrl + 'level/quiz_result_submit/', payload, this.httpOptions)
      .pipe(
        catchError((error) => {
          return t.handleError(error);
        })
      )
  }
  //upload video
  uploadVideo(id, payLoad) {
    let t = this;
    let httpOptions = {
      headers: new HttpHeaders({
        'Authorization': 'JWT ' + t.getAuthToken(),
        'Accept': 'application/json',
      })
    };
    return t.http.post(this.baseUrl + 'level/video_link_save_video/' + id, payLoad, httpOptions)
      .pipe(
        catchError((error) => {
          return t.handleError(error);
        })
      )
  }

  //upload video link
  uploadVideoLink(id, payLoad) {
    let t = this;
    return t.http.post(this.baseUrl + 'level/video_link_save_video/' + id, payLoad, t.httpOptions)
      .pipe(
        catchError((error) => {
          return t.handleError(error);
        })
      )
  }
  //getFaqs
  getVideoLink(id) {
    let t = this;
    return t.http.get(this.baseUrl + 'level/video_link_save/' + id, t.httpOptions)
      .pipe(
        catchError((error) => {
          return t.handleError(error);
        })
      )
  }
  getFaqs(payLoad) {
    let t = this;
    const requestparams = this.setParams(payLoad);
    const options = Object.assign({}, this.httpOptions, { params: requestparams });
    return t.http.get(this.baseUrl + 'faq/', options)
      .pipe(
        catchError((error) => {
          return t.handleError(error);
        })
      )
  }

  //getSpalshMessage

  getSpalshMessage() {
    let t = this;
    let httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Accept': 'application/json',
      })
    };
    return t.http.get(this.baseUrl + 'general_settings/splash_msg/', httpOptions)
      .pipe(
        catchError((error) => {
          return t.handleError(error);
        })
      )
  }


  //meet and greet
  getMeetAndGreet() {
    let t = this;
    return t.http.get(this.baseUrl + 'team_member/', this.httpOptions)
      .pipe(
        catchError((error) => {
          return t.handleError(error);
        })
      )
  }
  getTeamMember(id) {
    let t = this;
    return t.http.get(this.baseUrl + 'team_member/' + id, this.httpOptions)
      .pipe(
        catchError((error) => {
          return t.handleError(error);
        })
      )
  }
  addActivityLog(payload){
let t=this;
return t.http.post(this.baseUrl+'activity_log/',payload,this.httpOptions)
.pipe(
  catchError((error)=>{
    return t.handleError(error);
  })
)
  }
  getAllActivityLog() {
    let t = this;
    return t.http.get(this.baseUrl + 'activity_log/all/', this.httpOptions)
      .pipe(
        catchError((error) => {
          return t.handleError(error);
        })
      )
  }
  getActivityLog(id) {
    let t = this;
    return t.http.get(this.baseUrl + 'activity_log/' + id, this.httpOptions)
      .pipe(
        catchError((error) => {
          return t.handleError(error);
        })
      )
  }
  addweaverandrelease(payload) {
    let t = this;
    return t.http.post(this.baseUrl + 'level/weaverandrelease/', payload, this.httpOptions)
      .pipe(
        catchError((error) => {
          return t.handleError(error);
        })
      )
  }

  addreleaseliability(payload) {
    let t = this;
    return t.http.post(this.baseUrl + 'level/releaseliability/', payload, this.httpOptions)
      .pipe(
        catchError((error) => {
          return t.handleError(error);
        })
      )
  }
  checkisbaalaboss(id) {
    let t = this;
    return t.http.get(this.baseUrl + 'level/isbaalaboss/' + id, this.httpOptions)
      .pipe(catchError((error) => {
        return t.handleError(error);
      })
      )
  }
}```


This format we used for header 
headers: new HttpHeaders({
              'Content-Type': 'application/json',
              'Accept': 'application/json',
              'Authorization': 'JWT ' + token
            })```

Hello,

Some prevision to incorporate the BarcodeDetector API to Capacitor ?

https://www.chromestatus.com/feature/4757990523535360

I already can print some word but i wanna print QR code on it, the thermal printer using
ESC/POS commands,i tryed some command but didnot work,any solution for me???

In this you’re highlighting the page which is currently active right? What I want to accomplish is , could you please check this link? I think here I’ve explained in a bit more detail.

im sending the route because I will use location property in menu.Just never mind that

I just seen a bug whenever I will use IonMenuToggle to menu it will triggers this compile bug. But if I comment it out it will works fine.
Even though it will compile stuck . If I refresh the browser manually it has no error and works fine but the CLI always stuck on compiling…

Did you try what I suggested?

I want to integrate MS Teams into my application based on Ionic and Angular.

Any help would be really appreciable.

created a simple ionic-react sample here:

just look on App.tsx . I try to wrap the routes with menu with withRouter
try to make changes and compile it will replicate the bug
npm install first cause I delete the node modules

Just to eliminate two common sources of problems here:

• is baseUrl an HTTPS endpoint, as opposed to bare HTTP? If not, does the problem persist even with HTTPS?
• could this be a CORS problem? Authorization headers need to be explicitly permitted by the server

you dont need the route, you can use the useHistory hook also best to load project in stackblitz or codesandbox

hmmm i need the withRouter so that it will always send location property everytime it will change path

can you make sample to the one I send. that it will not show the menu component on specific route paths.

I am creating a small chat app and i have to give the send file option in chat. It’s working fine when I am uploading the file while chatting but when I close the chat screen it stops the uploading. So is there any way to keep the uploading even on change the screen?