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没有提供商

回答

相关问题