Angular2 RC5錯誤：zone.js：未處理Promise拒絕：ElementRef沒有提供商

我最近從RC4升級到RC5，並沒有更改任何代碼，但該應用程序已損壞。以下是錯誤消息： Angular2 RC5錯誤：zone.js：未處理Promise拒絕：ElementRef沒有提供商

該錯誤消息似乎走了出來，當負載index.html文件：

<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：使用角CLI現在，沒有什麼問題了。

來源

2016-08-12 Ng2-Fun

它可能有助於查看您使用ElementRef的位置。 –

@LucasTétreault我有同樣的問題，我沒有在我的代碼中的任何地方引用ElementRef。自從試圖通過其NgModule突破性變化轉向RC.5以來，我只看到了這一點。 –

@LucasTétreault我和MichaelOryl有同樣的問題，我沒有在任何地方引用ElementRef。 –

看起來像您必須將ElementRef拉到@NgModule註釋的imports部分，例如我在此示例中從my app開始。

如果這對您來說毫無意義，那麼您需要閱讀RC.5對Angular 2所做的突破性更改。它們是非常棒的。這裏是documentation for NgModule。您將在Quickstart Docs中找到一個非常基本的示例。如果我的個人經驗有任何跡象，那麼您的應用程序需要進行大修才能使其正常工作。幾個小時後，我還沒有再次開始工作，而我的是一個非常基本的應用程序。

// 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 { }

我則自舉的模塊是這樣的：

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

來源

2016-08-13 10:36:11

但事情是 - 它不是一個突破性的改變。請參閱遷移指南：https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html 如果除了製作所有npm模塊rc5之外沒有其他更改，它「應該」工作！ –

@LucasTétreault但這將是最終版本中的一次突破性改變。當Angular 2的最終版本最終獲得發佈時，這種遷移將消失。無論如何，這是RC階段正在發生的突變。您的RC.4代碼不適用於Angular 2.0的最終版本。 –

@MichaelOryl執行上面的代碼與ElementRef在導入工作？， – Sandeep

90％確保ElementRef應該被自動導入。如果出現這種情況，那麼一路上已經丟失了一些東西......它不應該手動導入

來源

2017-02-20 21:26:45

我同意這一點！這通常意味着某些東西被錯誤地導入，或者依賴關係在樹的上方某處丟失。 –

Angular2 RC5錯誤：zone.js：未處理Promise拒絕：ElementRef沒有提供商

回答

相關問題