Angular2 RC5 error: zone.js: Unhandled Promise rejection: Нет провайдера для ElementRef

Недавно я обновился с RC4 до RC5 и не изменил никакого кода, но приложение сломано. Вот сообщение об ошибке: Angular2 RC5 error: zone.js: Unhandled Promise rejection: Нет провайдера для 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 в любом месте своего кода. Я видел это только с тех пор, как попытался перейти на RC.5 с изменением его NgModule. –

@ LucasTétreault У меня такая же проблема, как у MichaelOryl, я нигде не упоминал ElementRef. –

Похоже, вы должны тянуть ElementRef в imports части @NgModule аннотаций, таких, как я делаю в этом примере из my app.

Если это ничего не значит для вас, то вам нужно прочитать об изменениях RC.5, сделанных в Угловом 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 { }

Я тогда boostrap модуль с чем-то вроде этого:

// 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 rpm, это должно «работать»! –

@ LucasTétreault Но это будет потрясающее изменение в финальном релизе. Эта миграция должна исчезнуть, когда окончательная версия Angular 2, наконец, будет выпущена. Таким образом, в любом случае это радикальное изменение в RC-фазе. Ваш RC4-код не будет работать с окончательной версией Angular 2.0. –

@MichaelOryl делает код выше с ElementRef в импорте?? – Sandeep

90% уверен, что ElementRef должен быть автоматически импортированы. Если это появляется, то что-то потеряно на этом пути ... Его не предполагается вручную импортировать

источник

2017-02-20 21:26:45

Я согласен с этим! Это, как правило, означает, что что-то было импортировано некорректно или отсутствует какая-либо зависимость где-то выше дерева. –

Angular2 RC5 error: zone.js: Unhandled Promise rejection: Нет провайдера для ElementRef

ответ

Смежные вопросы