L'annulation de la reconnaissance a échoué en raison de l'erreur de référence NgZone

Question

J'ai des problèmes avec l'implémentation de NgZones. J'ai cette erreur même si j'ai défini NgZone. "NodeInvocationException: la reconnaissance a échoué en raison d'une erreur: ReferenceError: NgZone n'est pas défini"

Ceci est mon fichier app.error-handle.ts, dans lequel j'utilise NgZone.

import { ToastyService } from 'ng2-toasty'; 
import { ErrorHandler, Inject, NgZone } from '@angular/core'; 

export class AppErrorHandler implements ErrorHandler { 
    constructor(
    private ngZone: NgZone, 
    @Inject(ToastyService) private toastyService: ToastyService) { 
    } 

    handleError(error: any): void { 
    this.ngZone.run(() => { 
     this.toastyService.error({ 
     title: 'Error', 
     msg: 'An unexpected error happened.', 
     theme: 'bootstrap', 
     showClose: true, 
     timeout: 5000 
     }); 
    }); 

    } 
} 

Ceci est mon fichier webpack.config.vendor.js.

const path = require('path'); 
    const webpack = require('webpack'); 
    const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
    const merge = require('webpack-merge'); 
    const treeShakableModules = [ 
     '@angular/animations', 
     '@angular/common', 
     '@angular/compiler', 
     '@angular/core', 
     '@angular/forms', 
     '@angular/http', 
     '@angular/platform-browser', 
     '@angular/platform-browser-dynamic', 
     '@angular/router', 
     'zone.js', 
    ]; 
    const nonTreeShakableModules = [ 
     'bootstrap', 
     'bootstrap/dist/css/bootstrap.css', 
     'es6-promise', 
     'es6-shim', 
     'event-source-polyfill', 
     'ng2-toasty', 
     'ng2-toasty/bundles/style-bootstrap.css', 
     'jquery' 
    ]; 
    const allModules = treeShakableModules.concat(nonTreeShakableModules); 

    module.exports = (env) => { 
     const extractCSS = new ExtractTextPlugin('vendor.css'); 
     const isDevBuild = !(env && env.prod); 
     const sharedConfig = { 
      stats: { modules: false }, 
      resolve: { extensions: [ '.js' ] }, 
      module: { 
       rules: [ 
        { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' } 
       ] 
      }, 
      output: { 
       publicPath: 'dist/', 
       filename: '[name].js', 
       library: '[name]_[hash]' 
      }, 
      plugins: [ 
       new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable) 
       new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/11580 
       new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/14898 
       new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100 
      ] 
     }; 

     const clientBundleConfig = merge(sharedConfig, { 
      entry: { 
       // To keep development builds fast, include all vendor dependencies in the vendor bundle. 
       // But for production builds, leave the tree-shakable ones out so the AOT compiler can produce a smaller bundle. 
       vendor: isDevBuild ? allModules : nonTreeShakableModules 
      }, 
      output: { path: path.join(__dirname, 'wwwroot', 'dist') }, 
      module: { 
       rules: [ 
        { test: /\.css(\?|$)/, use: extractCSS.extract({ use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }) } 
       ] 
      }, 
      plugins: [ 
       extractCSS, 
       new webpack.DllPlugin({ 
        path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'), 
        name: '[name]_[hash]' 
       }) 
      ].concat(isDevBuild ? [] : [ 
       new webpack.optimize.UglifyJsPlugin() 
      ]) 
     }); 

     const serverBundleConfig = merge(sharedConfig, { 
      target: 'node', 
      resolve: { mainFields: ['main'] }, 
      entry: { vendor: allModules.concat(['aspnet-prerendering']) }, 
      output: { 
       path: path.join(__dirname, 'ClientApp', 'dist'), 
       libraryTarget: 'commonjs2', 
      }, 
      module: { 
       rules: [ { test: /\.css(\?|$)/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] } ] 
      }, 
      plugins: [ 
       new webpack.DllPlugin({ 
        path: path.join(__dirname, 'ClientApp', 'dist', '[name]-manifest.json'), 
        name: '[name]_[hash]' 
       }) 
      ] 
     }); 

     return [clientBundleConfig, serverBundleConfig]; 
    } 

Answer 1

Récemment, j'eu le même problème et je l'ai résolu en injectant NgZone dans le constructeur avec l'aide d'un décorateur @Inject.

Alors, essayez de remplacer

private ngZone: NgZone 

avec

@Inject(NgZone) private ngZone: NgZone 

J'espère que ça aide.