Posts tagged Angular

Ionic Framework: Uncaught (in promise): removeView was not found

During our rewrite efforts to move our existing Ionic 1 applications to Ionic 3 we developed a pattern that looks like this:

export class ChatRoomPage {
  public room: any;
  public loader: Loading;
  public roomSid: string;

  constructor(public navCtrl: NavController, private chatProvider: ChatProvider,
    private consts: Consts, public loadingCtrl: LoadingController, private params: NavParams,
    @Inject(APP_CONFIG_TOKEN) private appConfig: AppConfig) {

    this.loader = this.loadingCtrl.create({
      spinner: 'hide',
      content: 'Loading Please Wait...'
    });
  }

  ionViewDidLoad() {
    this.loader.present();
    this.fetch(null);
  }

  private fetch(refresher) {
    this.chatProvider.getRoomBySid(this.roomSid).subscribe(
      data => {
        this.loader.dismiss();
        this.room = data;
      });
  }
}

The pattern was pretty easy, our Loading popover didn’t change per instance, so we setup it in the controller. We also had pages were we setup the Loading controller in the ionViewDidLoad() method as well. But during testing, were pages were loading multiple times we started to notice this error.

2017-08-04 17_59_35-Microsoft Edge

Extremely frustrating, every time we nav’ed back to a view we could not figure out what was causing the issue, was it navigation, which has had some issues? Nope, it’s the dang loading popover. We made changes, based in part from this thread, and our resulting code now looks like this.

export class ChatRoomPage {
  public room: any;
  public loader: Loading;
  public roomSid: string;

  constructor(public navCtrl: NavController, private chatProvider: ChatProvider,
    private consts: Consts, public loadingCtrl: LoadingController, private params: NavParams,
    @Inject(APP_CONFIG_TOKEN) private appConfig: AppConfig) {
      this.room = {};
  }

  ionViewDidLoad() {
    this.fetch(null);
  }

  private fetch(refresher) {
    this.loader = this.loadingCtrl.create({
      content: 'Loading Please Wait...'
    });

    this.loader.present().then(() => {
      this.chatProvider.getRoomBySid(this.roomSid).subscribe(
        data => {
          this.room = data;

          this.loader.dismissAll();
          this.loader = null;
        },
        err => {
          this.room = {};

          this.loader.dismissAll();
          this.loader = null;
        });
    });
  }
}

The issue is when you call LoadingController.dismiss() or LoadingController.dismissAll() the view that the loading controller creates for your popover is destroyed and cannot be reused. So to be able to call LoadingController.present() again you need to call loadingController.create() beforehand.

Additionally there can be race condition between LoadingController.present() and LoadingController.dismiss(), so another recommendation is to wait for the LoadingController.present() promise to return before running into any instance that may quickly (i.e. in an error case) call dismiss().

If you’re a First Responder or know one check out Resgrid which is a SaaS product utilizing Microsoft Azure, providing logistics, management and communication tools to first responder organizations like volunteer fire departments, career fire departments, EMS, search and rescue, CERT, public safety, disaster relief organizations.

Angular2/Ionic2: No provider for ….

When your developing an angular 2/ionic 2 application and you get the the following error:

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in :0:0
ORIGINAL EXCEPTION: No provider for UserService!
ORIGINAL STACKTRACE:
Error: DI Exception
    at NoProviderError.BaseException [as constructor] (http://localhost:8100/build/js/app.bundle.js:2300:23)
    at NoProviderError.AbstractProviderError [as constructor] (http://localhost:8100/build/js/app.bundle.js:27491:16)
    at new NoProviderError (http://localhost:8100/build/js/app.bundle.js:27528:16)
    at ReflectiveInjector_._throwOrNull (http://localhost:8100/build/js/app.bundle.js:28516:19)
    at ReflectiveInjector_._getByKeyDefault (http://localhost:8100/build/js/app.bundle.js:28544:25)
    at ReflectiveInjector_._getByKey (http://localhost:8100/build/js/app.bundle.js:28507:25)
    at ReflectiveInjector_.get (http://localhost:8100/build/js/app.bundle.js:28316:21)
    at ElementInjector.get (http://localhost:8100/build/js/app.bundle.js:29890:48)
    at ElementInjector.get (http://localhost:8100/build/js/app.bundle.js:29890:48)
    at ReflectiveInjector_._getByKeyDefault (http://localhost:8100/build/js/app.bundle.js:28541:24)
ERROR CONTEXT:
[object Object]

Your module exists, it’s setup and your import is working. So what’s up? You need to make it available for your application. In your app.ts you have 2 approach’s add a new paramter to your @Component called providers that takes an array of modules.

Angular 2 (non-Ionic)

@Component({ 
  templateUrl: “build/app.html”,
  providers: [UserService],
})

For Ionic you can also just pass it into the ionicBootstrap function, the second parameter to that is an array of modules:

ionicBootstrap(ConnectApp, [UserService]);

Hope this helps!

iOS 9, Ionic, Cordova, Angular & 10 $digest() iterations reached

TL;DR: If your getting $digest errors in your Cordova application using Angular (as Ionic does) in iOS9 Apply this patch.

—————————-

Late Wednesday I received an error via Rollbar. a error tracking service that I started looking at.

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.4.3/$rootScope/infdig?p0=10&p1=%5B%5D

It was just one user and according to Apple iTunes Connect and the Google Play Console we’ve had a fair amount of upgrades. So I decided that maybe it was an issue with this one person’s phone and continued brushed it aside.

Then Thursday happened….

2015-09-18_7-19-05

Panicked I started looking at everything, loaded up my app on my phone and tried everything to reproduce the issue. I checked the API for errors, nothing there. WTH is going on?

The Stack Traces were all over the places, here’s an example:

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.4.3/$rootScope/infdig?p0=10&p1=%5B%5D
1
File "file:///var/mobile/Containers/Bundle/Application/FD993E94-0772-4748-AC98-541A62F8FC47/Cordova400.app/www/js/libs/ionic/ionic.bundle.js" line 8895 col 32 in [anonymous]
2
File "file:///var/mobile/Containers/Bundle/Application/FD993E94-0772-4748-AC98-541A62F8FC47/Cordova400.app/www/js/libs/ionic/ionic.bundle.js" line 24548 col 35 in $digest
3
File "file:///var/mobile/Containers/Bundle/Application/FD993E94-0772-4748-AC98-541A62F8FC47/Cordova400.app/www/js/libs/ionic/ionic.bundle.js" line 24778 col 31 in $apply
4
File "file:///var/mobile/Containers/Bundle/Application/FD993E94-0772-4748-AC98-541A62F8FC47/Cordova400.app/www/js/libs/ionic/ionic.bundle.js" line 26545 col 42 in [anonymous]
5
File "file:///var/mobile/Containers/Bundle/Application/FD993E94-0772-4748-AC98-541A62F8FC47/Cordova400.app/www/js/libs/ionic/ionic.bundle.js" line 14221 col 15 in completeOutstandingRequest
6
File "file:///var/mobile/Containers/Bundle/Application/FD993E94-0772-4748-AC98-541A62F8FC47/Cordova400.app/www/js/libs/ionic/ionic.bundle.js" line 14493 col 33 in [anonymous]

I would also this this error:

[$rootScope:inprog] $digest already in progress
http://errors.angularjs.org/1.4.3/$rootScope/inprog?p0=%24digest

My first thought was I was using excessive $scope.$watch’ers or too many $scope.$apply’s. But a scan though the app revealed nothing.

I was investigating the error and found the Occurrences tab, as you can see it’s not limited to 1 page, so not a local scope issue.

occurances

I hovered over the browser, “Mobile Safari 9.0”!!! CRAP iOS9.

“Side note to the Rollbar team, this information needs to be on the main page when looking at an item, you give me the error, and graph, but I have to hunt for the URL (for the occurrence that first tripped it), and hover over the browser icon to get the browser version, don’t hide information behind a hover event! You can make the charts smaller and add some more metadata/contextual information.”

The Ionic Framework Team posted a blog on 9/10/15 titled “iOS 9 Potential Breaking Change” of course I read it, but the gist of what stood out to me was:

If you rely on the semantics of window.location or use the $location service heavily, and have noticed issues on iOS 9 GM please try the patch and let us know how it works for you.

I recently removed all $location so I thought I was free and and clear. But if you dig deeper, to the OpenRadar issue the Ionic Team linked to the problem is with UIWebView and how it handles Url’s with a hash in them (used in a lot of SPA’s “Single Page Applications”).

In the Responder app we use Angular UI Router, which uses hash’s in the url a lot. So if your app is using $state or $location to navigate, your app is most likely borked in iOS9.

To fix the Digest error Apply the PATCH, it’s very very simple and works.

The Ionic Team also has another great article published on 9/12/15 titled “Preparing for iOS 9” give it a close read, Mobile Safari 9 broke some CSS selectors and in some circumstances requires HTTPS only calls.

I noticed some strangeness with Ionic and navigation animations, sometimes I would get a double animation. But I was frantically trying to get app tested to get it to Apple for review.

To request an expedited review once your app is in a “Waiting for Review” state:

  1. Log into iTunes Connect: https://itunesconnect.apple.com
  2. Click Contact Us in the lower right hand corner:
    contact
  3. Select from the drop downs “App Review” “App Store Review” and “Request Expedited Review” and click the “Request and Expedited App Review” form link then fill that out.
    form

 

Good luck out there and happy Ionic\Cordova coding!

Resgrid is a SaaS product utilizing Microsoft Azure, providing logistics, management and communication tools to first responder organizations like volunteer fire departments, career fire departments, EMS, search and rescue, CERT, public safety, disaster relief organizations, etc. It was founded in late 2012 by myself and Jason Jarrett (staxmanade).

Go to Top