web-dev-qa-db-fra.com

Erreur Angular2 RC5: zone.js: rejet de la promesse non gérée: aucun fournisseur pour ElementRef

J'ai récemment mis à niveau de RC4 à RC5 et je n'ai modifié aucun code, mais l'application est défectueuse. Voici le message d'erreur:  RC5 upgrade error

Le message d'erreur semble être sorti lorsque vous chargez le fichier 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: Utilisez Angular-CLI maintenant, plus de problème.

angularangular2-upgrade
6
Ng2-Fun

On dirait que vous devez extraire ElementRef dans la section imports de l'annotation @NgModule, comme je le fais dans cet exemple depuis mon application .

Si cela ne vous dit rien, vous devez vous informer sur les dernières modifications apportées par RC.5 à Angular 2. Ce sont des tricheurs. Voici la documentation pour NgModule . Vous trouverez un exemple très basique de son utilisation dans le Quickstart Docs . Votre application nécessitera une refonte majeure pour la faire fonctionner, si mon expérience personnelle en est une indication. Après quelques heures, le mien ne fonctionne plus et le mien est une application très basique.

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

J'ai ensuite boosté le module avec quelque chose comme ceci:

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

90% de certitude que ElementRef est censé être importé automatiquement. Si cela se manifeste, quelque chose a été perdu en cours de route ... Ce n'est pas censé être importé manuellement

1
Sam Alexander