RC0 Upgrade : No Provider for ElementRef

Ionic Framework ionic-v3
1

I’m in the process of migrating an existing ionic 2 project from beta-11 to RC.0. I’m using “Copy your project to a new project” method specified in the changelog.

I am running into this error:

Unhandled Promise rejection: No provider for ElementRef! ; Zone: ; Task: Promise.then ; Value: NoProviderError Error: No provider for ElementRef!

I am not explicitly using ElementRef in my code. Unlike EXCEPTION: No provider for ElementRef! (Content → ElementRef) , there is no reference to a component (like Content) in the exception or anywhere on the stack. I’m at a loss as to how to dig into this any further.

Full callstack:

localhost/:28 Unhandled Promise rejection: No provider for ElementRef! ; Zone: ; Task: Promise.then ; Value: NoProviderError Error: No provider for ElementRef!
at NoProviderError.Error (native)
at NoProviderError.BaseError [as constructor] (http://localhost:8101/build/main.js:1340:34)
at NoProviderError.AbstractProviderError [as constructor] (http://localhost:8101/build/main.js:1823:16)
at new NoProviderError (http://localhost:8101/build/main.js:1854:16)
at ReflectiveInjector_.throwOrNull (http://localhost:8101/build/main.js:3489:19)
at ReflectiveInjector.getByKeyDefault (http://localhost:8101/build/main.js:3517:25)
at ReflectiveInjector.getByKey (http://localhost:8101/build/main.js:3480:25)
at ReflectiveInjector.get (http://localhost:8101/build/main.js:3289:21)
at NgModuleInjector.AppModuleInjector.createInternal (AppModule.ngfactory.js:397:183)
at NgModuleInjector.create (http://localhost:8101/build/main.js:8451:76)console.(anonymous function) @ localhost/:28
localhost/:28 Error: Uncaught (in promise): Error: No provider for ElementRef!(…)console.(anonymous function) @ localhost/:28

2

I have the exact same problem when I am upgrading to rc0

3

I worked around this but didn’t dig in enough to figure out the general solution.

For what it’s worth, this is what I did:

  1. I created a new rc0 project with the same template I used for my original App (I should have done this in the first place - I think that’s better than the upgrade instructions to just use the blank template).
  2. The I commented out all of my code in my failing app, copied the pages from that app. Copied the code from the new apps app.components.ts and app.modules.ts over to my app and commented out my own code.
  3. Ran the code: I now had a working copy of an rc0 app pretty much co-exiting with my app.
  4. Finally I bit by bit started adding my providers and pipes in, turning my components on and adding in my pages. Everything worked.

I didn’t hit the ElementRef error at any point in that processes, else I would have posted the solution. My general impression though is that I must have screwed up some of the magic around Dependency Injection the first time I tried the upgrade, as that is in general what that call stack looks like after some more research.

Hope that helps.

4

Hey @msc4dnc, I too have been dealing with this same issue. After hours of debugging I came a cross your post and it seemed to have work. To hopefully help Ionic debug the issue; here’s my info:

Ionic:

   ionic (Ionic CLI)             : 4.2.1 (/home/dave/.nvm/versions/node/v8.12.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.13
   @angular-devkit/build-angular : 0.8.6
   @angular-devkit/schematics    : 0.8.6
   @angular/cli                  : 6.2.6
   @ionic/angular-toolkit        : 1.0.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : not available
   Cordova Plugins       : not available

System:

   NodeJS : v8.12.0 (/home/dave/.nvm/versions/node/v8.12.0/bin/node)
   npm    : 6.4.1
   OS     : Linux 4.4

edit: crap! I didn’t realize that I was resurrecting this post. Sorry about that. =\