Angular2 RC5エラー：zone.js：処理されていないプロミス拒否：ElementRefのプロバイダがありません

最近RC4からRC5にアップグレードしましたが、コードは変更されませんでしたが、アプリケーションが壊れています。ここでは、エラーメッセージは次のとおりです。Angular2 RC5エラー：zone.js：処理されていないプロミス拒否：ElementRefのプロバイダがありません

<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：

エラーメッセージがとき負荷index.htmlファイルを出てきたようで、今使っ角度-CLI、それ以上の問題はありません。

出典

2016-08-12 Ng2-Fun

これは、ElementRefを使用している場所を確認するのに役立ちます。 –

@ LucasTetreault私は同じ問題を抱えています。私はどこでも私のコードでElementRefを参照していません。私はこれを見たのは、NgModuleを変更してRC.5に移行しようとしてからです。 –

@ LucasTetreault私はMichaelOrylと同じ問題があります。私はどこでもElementRefを参照しませんでした。 –

この例ではmy appから@NgModuleアノテーションのimportsセクションにElementRefをプルする必要があるようです。

あなたに何の意味もない場合は、RC.5をAngular 2に変更した変更点を読み上げる必要があります。ここにはdocumentation for NgModuleがあります。 Quickstart Docsには、非常に基本的な使用例があります。私の個人的な経験が何らかの指示であれば、あなたのアプリはそれを働かせるために大きな改革を必要とします。私はまだ2,3時間後に私の仕事を再開しました。私のことはとても基本的なアプリです。

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

私は、このようなもので、モジュールをのブートストラップ：ElementRefが自動的にインポートされるようになっていることを確認してください

// 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をすべて作成する以外に他のものが変更されていない場合、「うまくいくはずです！ –

@ LucasTetreaultしかし、それは最終版の急変です。この移行は、Angular 2の最終版が最終的にリリースされるときに消えていくものです。どちらにしても、それはRC段階で行われている大きな変化です。 RC.4コードは、Angular 2.0の最終リリースでは動作しません。 –

@MichaelOrylは、上記のコードをElementRefでインポートしていますか？ – Sandeep

90％。これが表示されている場合、何かが道に沿って失われている...手動でインポートするはずがない

出典

2017-02-20 21:26:45

私はこれに同意します！これは、一般に、何かが間違ってインポートされたか、依存関係がツリーの上のどこかで上にないことを示しています。 –

Angular2 RC5エラー：zone.js：処理されていないプロミス拒否：ElementRefのプロバイダがありません

答えて

関連する問題