Angular's Zone.js hates RaphaelJS

Question

I try to use RaphaelJS in Angular but zone.js doesn't want that:

"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

I navigated to the compiled source and still not no clue there. So i tried to resolve it 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 } 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"
}

Zone just outputs uncaught error. Don't shoot the messenger. You should start with examining the line where the error happens and figuring out how e can be undefined. Currently you're the only person who can do that. — Estus Flask
@estus When the messenger tells garbage, he deserves no mercy. None. Since I can't produce a readable minified file because Angular stores them in memory instead of disk, I wonder if angular is the right framework for me. — RoestVrijStaal
I see no garbage there. This is regular call stack. I guess this 'my browser points me to an empty AppComponent.ngfactory.js' is not Zone fault. I'm not always happy with regular Zone outputs but this is how it works. Even if the app has problems with source maps, the solution is to find 3632:9420 position in vendor.bundle.js manually and check what is e and why it is undefined. You will have exactly same problem with any framework. — Estus Flask
@estus I think my choice of use of the word "garbage" isn't the good one. I wasn't complaining about the stack trace. What I meant is that I rather like solution-hinting error messages instead of vague ones. — RoestVrijStaal
There would be meaningful message if it was an expected error. Since this was an exception, it cannot be better than that, no matter what the framework is. You just check each position in error stack to figure out where e is undefined came from, top-down. — Estus Flask

basarat basarat · Accepted Answer · 2017-07-26T05:41:36

"ERROR" TypeError: e is undefined Stack trace:

Cause of error is using a variable without defining e.g.

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

Fix

Define e

More

Your error is pointing to a minified file. This means that your posted code is essentially useless. Setup sourcemaps to get the proper error line and proceed from there.

Angular's Zone.js hates RaphaelJS

1 Answers

Fix

More