Modals not showing when I use soundcloud api with typings in my Ionic2 project

Ionic Framework ionic-v3
1

PROBLEM: no modals are showing and no DOM update is automatically triggered (I need to call “changeDetectorRef.detectChanges()”), when I import and use SoundCloud API with typings in my Ionic2 project.

How I am importing SoundCloud API to my Ionic2 project:

In command prompt:

npm install soundcloud
typings install soundcloud --save

In my TS:

import * as SC from 'soundcloud';

or

import SC = require('soundcloud');

The soundcloud api itself works perfectly (audio streaming, tracks listing). But, no modal will show up in my ionic2 project while this code is inserted in any ts file of my project. Also, no DOM update is automatically triggered.

My ionic info:

Cordova CLI: 6.3.0
Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.0.0-beta.32
Ionic App Lib Version: 2.0.0-beta.18
OS:
Node Version: v6.2.2

NOTE:

  • If I remove soundcloud code, modals will show up again. Also, DOM updates will get triggered again.

  • No errors/warnings are shown in console.

Any ideas?

1 Like
2

I temporarily solved the problem by adding:

setTimeout(() => { this._applicationRef.tick(); }, 200);

But I still don’t understand why DOM does not update automatically after importing soundcloud typings.

1 Like
3

If you need to activate the change detection after running a function you can wrap it with:

import {NgZone} from '@angular/core';

constructor(ngZone: NgZone){ }

someFunction() {
  this.ngZone.run(() => {
    // do stuff here
  });
}
4

Thank you ihadeed! But unfortunately NgZone is not the best option when using promises. Then, I’d rather use another solution.

5

Hello cristianguedes,

Did you find any solution?
I don’t know if i have the same issue, but my problem is that, when i import SC from soundcloud, my app compile without problems, but i have a blank screen. But if i not import soundcloud, there is no problem.

I have no errors in console, but i’m having a white screen.

Do you have any idea?
Thank you :slight_smile:

7

As I stated in my own reply:

8

Look at this, maybe can be useful for you:

9

Thanks a lot for this. It really helped me out!