Posts tagged Angular

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).

Trying Meteor on Azure Web Apps\Websites

I’ve been starting to play around with NodeJS, the MEAN stack and now recently Meteor. As a developer, I’d like another tool in my belt. I’ve got the .Net Framework stack down, but what if I had to use something else. I’m not a huge fan of Java, although Java 8/9 looks interesting with LINQ support.

nfhgSo I recently started playing around with Meteor, which is a RAILS’esque superset for NodeJS with some cool features (sharing client and server state seamlessly between the web browser and server) plus lots of plumbing abstraction.

I’m also a huge fan of Azure, but after some quick Googling l found out that Azure Websites, now Azure Web Apps, does not support Meteor. You can spin it up with a Linux VM and/or a Docker container on top of that, but that’s not the route I wanted to go through, yet.

Meteor using it’s own packaging and deployment engine. But under the hood it’s just a specialized NodeJS app. Some more Googling and I found out about Demeteorizer, which unpacks a meteor app back into it’s own NodeJS parts.

Inside your meteor app you can run the command “demeteorizer” to decompile the meteor app.

2015-06-07_12-17-54

Now were not out of the woods yet. Meteor utilizes native bcrypt which requires native (Visual Studio 2010) build tools to compile. This does not work on Azure Web apps. The workaround is to run node install and compile locally then include the node_modules directory in your upload. Note that if your using the Free or Shared version of Azure Web Apps those are 32bit only, so you need to compile under a 32bit architecture..

Meteor 1.1.0.2 uses Node 0.10.36, but as of this post Azure only supports up to 0.10.32. To get around this you need to create a bin directory in the .demeteorized directory and download the correct version of node. You can follow this guide for more detailed information. Ensure you get the correct bit’ness (the default folder is 32bit and there is a folder in the npm dist directory for 64bit).

Create a file in the .demeteorized directory called IISNode.yml with the following line in it:

nodeProcessCommandLine: "D:\home\site\wwwroot\bin\node.exe"

Edit the package.json and change the version of bcrypt from 0.7.8 to 0.8.3. I had to do this to be able to build bcrypt on my system. You may need to add “–msvs_version=2013” params when building on your system if the default build chain doesn’t work. Also if your on a 64bit system and deploying to a 32bit Azure Web App instance (this is the default for free/shared) you need to add “–arch=ia32” to your npm install commands.

After you’ve manually updated the package.json run the following command in the demeteorized directory:

npm install

Next got into the programs/server directory and edit the package.json file there. You want to change fibers from a tarball to 1.0.5 so it should look like this:

"fibers": "1.0.5"

Now run the follow command in .demeteorized\programs\server:

npm install

That should get us setup to deploy our Meteor app to Azure Web Apps. Go into Azure and create your new web app. Once it’s created go into it and click the configure tab. Scroll down to the “app settings” section and supply the following variables

MONGO_URL
ROOT_URL
MAIL_URL

2015-06-07_12-39-32

If you don’t have a MongoDB you can add one from MongoLabs as an App Service.

2015-06-07_12-41-46

They have a free 500MB version you can play with. Once it’s create and in your account, click on it, then click “Connection Info” in the bottom to get your connection string. Utilizing your deployment method of choice, deploy you app to Azure.

After all this the Meteor app still isn’t running on Azure. I’m getting the following error:

Tue Jun 09 2015 15:12:51 GMT+0000 (Coordinated Universal Time): Unaught exception: RangeError: Out of memory
    at Object.<anonymous> (D:\home\site\wwwroot\programs\server\boot.js:263:4)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (D:\home\site\wwwroot\main.js:9:1)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
Application has thrown an uncaught exception and is terminated:
RangeError: Out of memory
    at Object.<anonymous> (D:\home\site\wwwroot\programs\server\boot.js:263:4)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (D:\home\site\wwwroot\main.js:9:1)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)

A tweet form Jeremiah Billmann points to an issue with Node-Fibers and Azure (or IIS).

So possibly the issue here is Node-Fibers not playing nice with IISNode or IIS. Hopefully I can find a solution soon as I love to zero friction deployment and management of Azure Web Apps.

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