Angular2 RC5错误:zone.js:未处理的承诺拒绝:没有ElementRef的提供程序 [英] Angular2 RC5 error:zone.js: Unhandled Promise rejection: No provider for ElementRef
问题描述
我最近从RC4升级到RC5，并且未更改任何代码，但该应用程序已损坏.这是错误消息:
I recently upgrade from RC4 to RC5, and didn't change any code, but the app is broken. Here is the error message:
加载index.html文件时似乎出现了错误消息:
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:现在使用Angular-CLI，不再有问题.
Update: Use Angular-CLI now, no problem any more.
推荐答案
好像您必须将ElementRef拉入@NgModule批注的imports部分，例如本例中的我的应用.
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.
如果这对您没有任何意义，则您需要阅读RC.5对Angular 2所做的重大更改.它们是废话.这是NgModule的文档.您可以在快速入门文档中找到其用法的非常基本的示例.如果我的个人经验可以证明，您的应用需要进行大修才能使其正常运行.几个小时后，我还没有恢复工作，而我的工作是一个非常基本的应用程序.
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错误:zone.js:未处理的承诺拒绝:没有ElementRef的提供程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
