角的Zone.js恨RaphaelJS

Question

我嘗試在角使用RaphaelJS但zone.js不希望出現這種情況：

"ERROR" TypeError: e is undefined Stack trace: ["../../../../raphael/raphael.min.js"]/engine.create@http://localhost:4200/vendor.bundle.js:3632:9420 e@http://localhost:4200/vendor.bundle.js:3630:896 PaperComponent@http://localhost:4200/main.bundle.js:146:22 createClass@http://localhost:4200/vendor.bundle.js:54805:26 createDirectiveInstance@http://localhost:4200/vendor.bundle.js:54639:37 createViewNodes@http://localhost:4200/vendor.bundle.js:56075:49 callViewAction@http://localhost:4200/vendor.bundle.js:56521:13 execComponentViewsAction@http://localhost:4200/vendor.bundle.js:56430:13 createViewNodes@http://localhost:4200/vendor.bundle.js:56102:5 createRootView@http://localhost:4200/vendor.bundle.js:55970:5 callWithDebugContext@http://localhost:4200/vendor.bundle.js:57353:39 debugCreateRootView@http://localhost:4200/vendor.bundle.js:56670:12 ["../../../core/@angular/core.es5.js"]/.prototype.create@http://localhost:4200/vendor.bundle.js:53753:37 ["../../../core/@angular/core.es5.js"]/http://localhost:4200/vendor.bundle.js:47230:16 ["../../../core/@angular/core.es5.js"]/http://localhost:4200/vendor.bundle.js:48659:40 ["../../../core/@angular/core.es5.js"]/moduleDoBootstrap/<@http://localhost:4200/vendor.bundle.js:48442:74 ["../../../core/@angular/core.es5.js"]/.prototype.moduleDoBootstrap@http://localhost:4200/vendor.bundle.js:48442:13 ["../../../core/@angular/core.es5.js"]/.prototype._bootstrapModuleFactoryWithZone/http://localhost:4200/vendor.bundle.js:48404:21 ["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10579:17 forkInnerZoneWithAngularBehavior/zone._inner<.onInvoke@http://localhost:4200/vendor.bundle.js:47787:24 ["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10578:17 ["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10329:24 scheduleResolveOrReject/<@http://localhost:4200/polyfills.bundle.js:11019:52 ["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10612:17 forkInnerZoneWithAngularBehavior/zone._inner<.onInvokeTask@http://localhost:4200/vendor.bundle.js:47778:24 ["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10611:17 ["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10379:28 drainMicroTaskQueue@http://localhost:4200/polyfills.bundle.js:10783:25 AppComponent.ngfactory.js:14:7

"ERROR CONTEXT" Object { view: Object, nodeIndex: 13, nodeDef: Object, elDef: Object, elView: Object } AppComponent.ngfactory.js:14:7

"Unhandled Promise rejection:" "e is undefined" "; Zone:" "" "; Task:" "Promise.then" "; Value:" TypeError: e is undefined Stack trace: ["../../../../raphael/raphael.min.js"]/engine.create@http://localhost:4200/vendor.bundle.js:3632:9420 e@http://localhost:4200/vendor.bundle.js:3630:896 PaperComponent@http://localhost:4200/main.bundle.js:146:22 createClass@http://localhost:4200/vendor.bundle.js:54805:26 createDirectiveInstance@http://localhost:4200/vendor.bundle.js:54639:37 createViewNodes@http://localhost:4200/vendor.bundle.js:56075:49 callViewAction@http://localhost:4200/vendor.bundle.js:56521:13 execComponentViewsAction@http://localhost:4200/vendor.bundle.js:56430:13 createViewNodes@http://localhost:4200/vendor.bundle.js:56102:5 createRootView@http://localhost:4200/vendor.bundle.js:55970:5 callWithDebugContext@http://localhost:4200/vendor.bundle.js:57353:39 debugCreateRootView@http://localhost:4200/vendor.bundle.js:56670:12 ["../../../core/@angular/core.es5.js"]/.prototype.create@http://localhost:4200/vendor.bundle.js:53753:37 ["../../../core/@angular/core.es5.js"]/http://localhost:4200/vendor.bundle.js:47230:16 ["../../../core/@angular/core.es5.js"]/http://localhost:4200/vendor.bundle.js:48659:40 ["../../../core/@angular/core.es5.js"]/moduleDoBootstrap/<@http://localhost:4200/vendor.bundle.js:48442:74 ["../../../core/@angular/core.es5.js"]/.prototype.moduleDoBootstrap@http://localhost:4200/vendor.bundle.js:48442:13 ["../../../core/@angular/core.es5.js"]/.prototype._bootstrapModuleFactoryWithZone/http://localhost:4200/vendor.bundle.js:48404:21 ["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10579:17 forkInnerZoneWithAngularBehavior/zone._inner<.onInvoke@http://localhost:4200/vendor.bundle.js:47787:24 ["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10578:17 ["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10329:24 scheduleResolveOrReject/<@http://localhost:4200/polyfills.bundle.js:11019:52 ["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10612:17 forkInnerZoneWithAngularBehavior/zone._inner<.onInvokeTask@http://localhost:4200/vendor.bundle.js:47778:24 ["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10611:17 ["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10379:28 drainMicroTaskQueue@http://localhost:4200/polyfills.bundle.js:10783:25 "["../../../../raphael/raphael.min.js"]/engine.create@http://localhost:4200/vendor.bundle.js:3632:9420 e@http://localhost:4200/vendor.bundle.js:3630:896 PaperComponent@http://localhost:4200/main.bundle.js:146:22 createClass@http://localhost:4200/vendor.bundle.js:54805:26 createDirectiveInstance@http://localhost:4200/vendor.bundle.js:54639:37 createViewNodes@http://localhost:4200/vendor.bundle.js:56075:49 callViewAction@http://localhost:4200/vendor.bundle.js:56521:13 execComponentViewsAction@http://localhost:4200/vendor.bundle.js:56430:13 createViewNodes@http://localhost:4200/vendor.bundle.js:56102:5 createRootView@http://localhost:4200/vendor.bundle.js:55970:5 callWithDebugContext@http://localhost:4200/vendor.bundle.js:57353:39 debugCreateRootView@http://localhost:4200/vendor.bundle.js:56670:12 ["../../../core/@angular/core.es5.js"]/.prototype.create@http://localhost:4200/vendor.bundle.js:53753:37 ["../../../core/@angular/core.es5.js"]/http://localhost:4200/vendor.bundle.js:47230:16 ["../../../core/@angular/core.es5.js"]/http://localhost:4200/vendor.bundle.js:48659:40 ["../../../core/@angular/core.es5.js"]/moduleDoBootstrap/<@http://localhost:4200/vendor.bundle.js:48442:74 ["../../../core/@angular/core.es5.js"]/.prototype.moduleDoBootstrap@http://localhost:4200/vendor.bundle.js:48442:13 ["../../../core/@angular/core.es5.js"]/.prototype._bootstrapModuleFactoryWithZone/http://localhost:4200/vendor.bundle.js:48404:21 ["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10579:17 forkInnerZoneWithAngularBehavior/zone._inner<.onInvoke@http://localhost:4200/vendor.bundle.js:47787:24 ["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10578:17 ["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10329:24 scheduleResolveOrReject/<@http://localhost:4200/polyfills.bundle.js:11019:52 ["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10612:17 forkInnerZoneWithAngularBehavior/zone._inner<.onInvokeTask@http://localhost:4200/vendor.bundle.js:47778:24 ["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10611:17 ["../../../../zone.js/dist/zone.js"]/http://localhost:4200/polyfills.bundle.js:10379:28 drainMicroTaskQueue@http://localhost:4200/polyfills.bundle.js:10783:25 " polyfills.bundle.js:10842:16

mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create vendor.bundle.js:10011:4

我瀏覽到已編譯源，仍然沒有任何線索那裏。所以我試圖解決它安裝各種墊片，沒有工作。

我的源文件：

tsconfig.json：

{ 
    "compileOnSave": false, 
    "compilerOptions": { 
    "outDir": "./dist/out-tsc", 
    "sourceMap": true, 
    "declaration": false, 
    "moduleResolution": "node", 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "target": "es5", 
    "typeRoots": [ 
     "node_modules/@types" 
    ], 
    "lib": [ 
     "es2016", 
     "dom" 
    ] 
    } 
} 

typings.d.ts：

/* SystemJS module definition */ 
declare var module: NodeModule; 
interface NodeModule { 
    id: string; 
} 

tsconfig.app.json：

{ 
    "extends": "../tsconfig.json", 
    "compilerOptions": { 
    "outDir": "../out-tsc/app", 
    "baseUrl": "./", 
    "module": "es2015", 
    "types": [] 
    }, 
    "exclude": [ 
    "test.ts", 
    "**/*.spec.ts" 
    ] 
} 

主.ts：

import { enableProdMode } from '@angular/core'; 
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 

import { AppModule } from './app/app.module'; 
import { environment } from './environments/environment'; 

if (environment.production) { 
    enableProdMode(); 
} 

platformBrowserDynamic().bootstrapModule(AppModule); 

app.component.ts：

import { Component } from '@angular/core'; 
@Component({ 
    selector: 'sign-app', 
    templateUrl: './app.component.html', 
    styleUrls: [ './app.component.css' ] 
}) 
export class AppComponent 
{ 
    title = 'app'; 

    constructor() 
    { 
    } 
} 

app.component.html：

<div style="text-align:center"> 
    <h1> 
    Welcome to {{title}}! 
    </h1> 
</div> 
<div> 
    <p>Please put your sign below:</p> 
    <sign-paper></sign-paper> 
</div> 

app.module.ts：

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 

import { AppComponent } from './app.component'; 
import { PaperComponent } from './paper.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    PaperComponent 
    ], 
    imports: [ 
    BrowserModule 
    ], 
    providers: [], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

paper.component。 ts：

import { Component } from '@angular/core'; 
import * as Raphael from 'raphael'; 

/// <reference path="../../node_modules/@types/raphael/index.d.ts" /> 

@Component({ 
    selector: 'sign-paper', 
    templateUrl: './paper.component.html', 
    styleUrls: [ './app.component.css' ], 
    providers: [] 
}) 
export class PaperComponent 
{ 
    private paper: RaphaelPaper; 

    constructor() 
    { 
     this.paper = Raphael('paper', 640, 480); 
     this.draw(); 
    } 

    private draw(): void 
    { 
     let thatCircle: RaphaelElement = this.paper.circle(10, 100, 100); 
     thatCircle.attr('stroke', '#0A0B0C'); 
    } 
} 

paper.component.html：

<div id="paper"></div> 

polyfills.ts：

/** 
* This file includes polyfills needed by Angular and is loaded before the app. 
* You can add your own extra polyfills to this file. 
* 
* This file is divided into 2 sections: 
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main 
*  file. 
* 
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that 
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 
* 
* Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html 
*/ 

/*************************************************************************************************** 
* BROWSER POLYFILLS 
*/ 

/** IE9, IE10 and IE11 requires all of the following polyfills. **/ 
import 'core-js/es6/symbol'; 
import 'core-js/es6/object'; 
import 'core-js/es6/function'; 
import 'core-js/es6/parse-int'; 
import 'core-js/es6/parse-float'; 
import 'core-js/es6/number'; 
import 'core-js/es6/math'; 
import 'core-js/es6/string'; 
import 'core-js/es6/date'; 
import 'core-js/es6/array'; 
import 'core-js/es6/regexp'; 
import 'core-js/es6/map'; 
import 'core-js/es6/weak-map'; 
import 'core-js/es6/set'; 

/** IE10 and IE11 requires the following for NgClass support on SVG elements */ 
import 'classlist.js'; // Run `npm install --save classlist.js`. 

/** Evergreen browsers require these. **/ 
import 'core-js/es6/reflect'; 
import 'core-js/es7/reflect'; 


/** 
* Required to support Web Animations `@angular/animation`. 
* Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation 
**/ 
// import 'web-animations-js'; // Run `npm install --save web-animations-js`. 



/*************************************************************************************************** 
* Zone JS is required by Angular itself. 
*/ 
import 'zone.js/dist/zone'; // Included with Angular CLI. 



/*************************************************************************************************** 
* APPLICATION IMPORTS 
*/ 

/** 
* Date, currency, decimal and percent pipes. 
* Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 
*/ 
import 'intl'; // Run `npm install --save intl`. 
/** 
* Need to import at least one locale-data with intl. 
*/ 
import 'intl/locale-data/jsonp/en'; 

的package.json：錯誤的

{ 
    "name": "Sign", 
    "version": "1.0.0", 
    "license": "BSD-3-Clause", 
    "scripts": { 
    "ng": "ng", 
    "start": "ng serve", 
    "build": "ng build", 
    "test": "ng test", 
    "lint": "ng lint", 
    "e2e": "ng e2e" 
    }, 
    "private": true, 
    "dependencies": { 
    "@angular/animations": "^4.0.0", 
    "@angular/common": "^4.0.0", 
    "@angular/compiler": "^4.0.0", 
    "@angular/core": "^4.0.0", 
    "@angular/forms": "^4.0.0", 
    "@angular/http": "^4.0.0", 
    "@angular/platform-browser": "^4.0.0", 
    "@angular/platform-browser-dynamic": "^4.0.0", 
    "@angular/router": "^4.0.0", 
    "@types/raphael": "^2.1.30", 
    "angular-polyfills": "^1.0.1", 
    "classlist.js": "^1.1.20150312", 
    "core-js": "^2.4.1", 
    "intl": "^1.2.5", 
    "raphael": "^2.2.7", 
    "rxjs": "^5.1.0", 
    "ts-helpers": "^1.1.2", 
    "yarn": "^0.27.5", 
    "zone.js": "^0.8.4" 
    }, 
    "devDependencies": { 
    "@angular/cli": "^1.2.3", 
    "@angular/compiler-cli": "^4.0.0", 
    "@angular/language-service": "^4.0.0", 
    "@types/jasmine": "~2.5.53", 
    "@types/jasminewd2": "~2.0.2", 
    "@types/node": "~6.0.60", 
    "codelyzer": "~3.0.1", 
    "jasmine-core": "~2.6.2", 
    "jasmine-spec-reporter": "~4.1.0", 
    "karma": "~1.7.0", 
    "karma-chrome-launcher": "~2.1.1", 
    "karma-cli": "~1.0.1", 
    "karma-coverage-istanbul-reporter": "^1.2.1", 
    "karma-jasmine": "~1.1.0", 
    "karma-jasmine-html-reporter": "^0.2.2", 
    "protractor": "~5.1.2", 
    "ts-node": "~3.0.4", 
    "tslint": "~5.3.2", 
    "typescript": "~2.3.3" 
    }, 
    "description": "Let's sign things.", 
    "main": "index.js", 
    "author": "RoestVrijStaal" 
} 

Answer 1

"ERROR" TypeError: e is undefined Stack trace:

原因是使用不具有可變定義例如

(function(){"use strict";e})() 

修復

定義e

更多

你的錯誤指向的縮小文件。這意味着你的發佈代碼本質上是無用的。設置源地圖獲取適當的錯誤行並從此處繼續。