javascript - Angular's Zone.js hates RaphaelJS -

i try use raphaeljs in angular zone.js doesn't want that:

"error" typeerror: e 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 undefined" "; zone:" "" "; task:" "promise.then" "; value:" typeerror: e 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 [[prototype]] of object cause code run slowly; instead create object correct initial [[prototype]] value using object.create vendor.bundle.js:10011:4

i navigated compiled source , still not no clue there. tried resolve installing various shims, didn't work.

my source files:

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"   ] } 

main.ts:

import { enableprodmode } '@angular/core'; import { platformbrowserdynamic } '@angular/platform-browser-dynamic';  import { appmodule } './app/app.module'; import { environment } './environments/environment';  if (environment.production) {   enableprodmode(); }  platformbrowserdynamic().bootstrapmodule(appmodule); 

app.component.ts:

import { component } '@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 {{title}}!   </h1> </div> <div>   <p>please put sign below:</p>   <sign-paper></sign-paper> </div> 

app.module.ts:

import { browsermodule } '@angular/platform-browser'; import { ngmodule } '@angular/core';  import { appcomponent } './app.component'; import { papercomponent } './paper.component';  @ngmodule({   declarations: [     appcomponent,     papercomponent   ],   imports: [     browsermodule   ],   providers: [],   bootstrap: [ appcomponent ] }) export class appmodule { } 

paper.component.ts:

import { component } '@angular/core'; import * raphael '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:

/**  * file includes polyfills needed angular , loaded before app.  * can add own polyfills file.  *  * file divided 2 sections:  *   1. browser polyfills. these applied before loading zonejs , sorted browsers.  *   2. application imports. files imported after zonejs should loaded before main  *      file.  *  * current setup so-called "evergreen" browsers; last versions of browsers  * automatically update themselves. includes safari >= 10, chrome >= 55 (including opera),  * edge >= 13 on desktop, , ios 10 , chrome on mobile.  *  * learn more in https://angular.io/docs/ts/latest/guide/browser-support.html  */  /***************************************************************************************************  * browser polyfills  */  /** ie9, ie10 , ie11 requires of 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 , ie11 requires following 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 support web animations `@angular/animation`.  * needed for: chrome, firefox , opera. http://caniuse.com/#feat=web-animation  **/ // import 'web-animations-js';  // run `npm install --save web-animations-js`.    /***************************************************************************************************  * zone js required angular itself.  */ import 'zone.js/dist/zone';  // included angular cli.    /***************************************************************************************************  * application imports  */  /**  * date, currency, decimal , percent pipes.  * needed for: chrome, firefox, edge, ie11 , safari 10  */ import 'intl';  // run `npm install --save intl`. /**  * need import @ least 1 locale-data 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" } 

"error" typeerror: e undefined stack trace:

cause of error using variable without defining e.g.

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

fix

define e

more

your error pointing minified file. means posted code useless. setup sourcemaps proper error line , proceed there.