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

Question

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

12.1k Views Asked by Ng2-Fun At 11 April 2025 at 09:32

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.

Original Q&A

There are 2 best solutions below

**Sam Alexander** · Answer 1

Sam Alexander On 20 February 2017 at 21:26

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

**Michael Oryl** · Answer 2

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

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

There are 2 best solutions below

Related Questions in ANGULAR

Related Questions in ANGULAR2-UPGRADE

Trending Questions

Popular # Hahtags

Popular Questions