Angular2 RC5 error:zone.js: Unhandled Promise rejection: No provider for ElementRef

Question

I recently upgrade from RC4 to RC5, and didn't change any code, but the app is broken. Here is the error message:

The error message seems came out when load the index.html file:

<html>
<head>
    <script>
        var pjson = require('./package.json');
        document.title = pjson.name;
    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./node_modules/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/global.css">

    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app/main/bootstrap.js').catch(function(err){ console.error(err); });
    </script>
    <script>
        var electron = require('electron');
    </script>
</head>

<body>
<app-cmp>Loading...</app-cmp>
</body>
</html>

Update: Use Angular-CLI now, no problem any more.

@LucasTétreault I have the same issue and I'm not referencing ElementRef anywhere in my code. I've only seen this since trying to move to RC.5 with its NgModule breaking change. — Michael Oryl, Aug 13 '16 at 10:15
@LucasTétreault I have the same issue as MichaelOryl, I didn't reference ElementRef anywhere. — Ng2-Fun, Aug 15 '16 at 12:54
Tried using ElementRef within a resolve and get `there is no provider for ElementRef` — fidev, Jul 25 '17 at 16:22

Michael Oryl · Answer 1 · 2016-08-13T10:42:44.823

5

Looks like you have to pull ElementRef into the imports section of the @NgModule annotation, such as I do in this example from my app.

If that means nothing to you, then you need to read up on the breaking changes RC.5 made to Angular 2. They are whoppers. Here is the documentation for NgModule. You'll find a very basic example of its use in the Quickstart Docs. Your app is going to need a major overhaul to get it working if my personal experience is any indication. I've yet to get mine working again after a few hours, and mine is a very basic app.

// app.module.ts
// Angular 2 imports
import { NgModule, ElementRef } from '@angular/core'; //  <--- Import ElementRef
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router'
import { HTTP_PROVIDERS } from '@angular/http';
import { COMMON_DIRECTIVES } from '@angular/common';

// My components and services (yours will certainly differ)
import {PublicPage} from './components/pages/public-page'
import {ProtectedPage} from './components/pages/protected-page'
import {LoggedoutPage} from "./components/pages/loggedout-page";
import { APP_ROUTES } from './app.routes';
import { WindowService } from './services/window.service';
import { AuthService } from './services/auth.service';
import { CookieService } from './services/cookies.service';

// My main component for this app/module
import { AppComponent }  from './app.component';

@NgModule({
    // Add ElementRef to the module imports below
    imports:      [ ElementRef, BrowserModule, RouterModule.forRoot(APP_ROUTES) ],  
    declarations: [ AppComponent, PublicPage, ProtectedPage, LoggedoutPage ],
    bootstrap:    [ AppComponent ],
    providers:    [ WindowService, AuthService, CookieService, HTTP_PROVIDERS, COMMON_DIRECTIVES ]
})
export class AppModule { }

I then boostrap the module with something like this:

// main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

edited Aug 13 '16 at 10:42

answered Aug 13 '16 at 10:36

Michael Oryl

20,856
14
77
117

But the thing is - it's not a breaking change. See the migration guide: https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html If nothing else was changed other than making all the npm modules rc5, it "should" work! – Lucas Tétreault Aug 13 '16 at 15:33
@LucasTétreault But it will be a breaking change in the final release. This migration this is to go away when the final version of Angular 2 finally gets released. So either way, it is a breaking change being made in the RC phase. Your RC.4 code won't work with the final release of Angular 2.0. – Michael Oryl Aug 13 '16 at 16:14
@MichaelOryl does the code above with ElementRef in imports worked ?, – Sandeep Aug 14 '16 at 02:31
@MichaelOryl - Yes eventually it will be a breaking change... My point was that the OP shouldn't need to import ElementRef like you said. – Lucas Tétreault Aug 14 '16 at 04:52
@LucasTétreault , I think the same , because when I tried to import it, results in type of null error – Sandeep Aug 14 '16 at 06:47
@Sandeep The above code fixes the error about `ElementRef` in my case, yes. – Michael Oryl Aug 14 '16 at 08:45
@MichaelOryl - You are not using ElementRef in you project, but you still need to import ElemenetRef. Right? – Ng2-Fun Aug 15 '16 at 14:56
@ng2-fun That is correct. I have no reference in my code to ElementRef at all, other than having to put it in the NgModule annotation. – Michael Oryl Aug 15 '16 at 15:49
1

@MichaelOryl - I created a simple project, after "Import ElementRef" and put it inside NgModule as you did, I got the error: "TypeError: Cannot read property 'type' of null". Have you had that error before? – Ng2-Fun Aug 16 '16 at 02:09
@Ng2-Fun I would check that you don't have some unnecessary imports in the NgModule annotation. I believe I saw that when I had the deprecated HTTP_PROVIDERS listed in the imports section. – Michael Oryl Aug 16 '16 at 06:49
2

I tried this solution and got `(SystemJS) Unexpected value 'ElementRef' imported by the module 'AppModule'(…)`. Any ideas? – blubberbo Sep 30 '16 at 15:03
The documentation for directives ( https://angular.io/docs/ts/latest/guide/attribute-directives.html ) doesn't have this at all in app.module.ts, is that out of date? The Quickstart referenced in the answer doesn't have any reference to 'ElementRef'. The ngmodule guide shows examples of 'ElementRef', but never in app.module.ts only in 'highlight.directive.ts' mirroring the directives documentation. So, I guess this is a completely different issue in 2.0 – Stephen Nov 02 '16 at 17:50
Yes, this like many other Angular 2 posts on StackOverflow, is out of date. The fact that the alpha and beta versions of A2 were so publicly used has caused a lot of what later became misinformation to be posted. – Michael Oryl Nov 02 '16 at 18:15

score 1 · Answer 2 · answered Feb 20 '17 at 21:26

1

90% sure that the ElementRef is supposed to be automatically imported. If this is showing up then something has been lost along the way... Its not supposed to be manually imported

answered Feb 20 '17 at 21:26

Sam Alexander

504
1
6
24

1

I agree with this! This generally signifies to me that something has been imported incorrectly or a dependency is missing somewhere higher up the tree. – MT_ Mar 07 '17 at 16:06

Angular2 RC5 error:zone.js: Unhandled Promise rejection: No provider for ElementRef

2 Answers2

Linked