Angular的Zone.js讨厌RaphaelJS

时间：2017-07-25 23:00:51

标签： javascript angular typescript raphael zone.js

我尝试在Angular中使用RaphaelJS，但是zone.js并不想要：

  

＆＃34; ERROR＆＃34; TypeError：e未定义堆栈跟踪：   [＆＃34; ../../../../圣拉斐尔/ raphael.min.js＆＃34;] / engine.create@http://localhost:4200/vendor.bundle.js:3632:9420   È@ 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   [＆＃34; ../../../ core/@angular/core.es5.js"]。/ prototype.create@http://localhost:4200/vendor.bundle.js:53753:37   [＆＃34; ../../../ core/@angular/core.es5.js"] /http://localhost:4200/vendor.bundle.js:47230:16   [＆＃34; ../../../ core/@angular/core.es5.js"] /http://localhost:4200/vendor.bundle.js:48659:40   [＆＃34; ../../../ core/@angular/core.es5.js"] / moduleDoBootstrap /＆LT; @ http://localhost:4200/vendor.bundle.js:48442:74   [＆＃34; ../../../ core/@angular/core.es5.js"]。/ prototype.moduleDoBootstrap@http://localhost:4200/vendor.bundle.js:48442:13   [＆＃34; ../../../ core/@angular/core.es5.js"] /.prototype._bootstrapModuleFactoryWithZone/http://localhost:4200/vendor.bundle.js:48404： 21   [＆＃34; ../../../../ zone.js / DIST / zone.js＆＃34;] /http://localhost:4200/polyfills.bundle.js:10579:17   forkInnerZoneWithAngularBehavior / zone._inner＆LT; .onInvoke @ http://localhost:4200/vendor.bundle.js:47787:24   [＆＃34; ../../../../ zone.js / DIST / zone.js＆＃34;] /http://localhost:4200/polyfills.bundle.js:10578:17   [＆＃34; ../../../../ zone.js / DIST / zone.js＆＃34;] /http://localhost:4200/polyfills.bundle.js:10329:24   scheduleResolveOrReject /＆LT; @ http://localhost:4200/polyfills.bundle.js:11019:52   [＆＃34; ../../../../ zone.js / DIST / zone.js＆＃34;] /http://localhost:4200/polyfills.bundle.js:10612:17   forkInnerZoneWithAngularBehavior / zone._inner＆LT; .onInvokeTask @ http://localhost:4200/vendor.bundle.js:47778:24   [＆＃34; ../../../../ zone.js / DIST / zone.js＆＃34;] /http://localhost:4200/polyfills.bundle.js:10611:17   [＆＃34; ../../../../ zone.js / DIST / zone.js＆＃34;] /http://localhost:4200/polyfills.bundle.js:10379:28   drainMicroTaskQueue @ http://localhost:4200/polyfills.bundle.js:10783:25   AppComponent.ngfactory.js：14：7

     

＆＃34;错误背景＆＃34; Object {view：Object，nodeIndex：13，nodeDef：Object，   elDef：Object，elView：Object} AppComponent.ngfactory.js：14：7

     

＆＃34;未处理的承诺拒绝：＆＃34; ＆＃34; e未定义＆＃34; ＆＃34 ;;区域：＆＃34; ＆＃34;＆＃34; ＆＃34 ;;   任务：＆＃34; ＆＃34; Promise.then＆＃34; ＆＃34 ;;值：＆＃34; TypeError：e未定义Stack   跟踪：   [＆＃34; ../../../../圣拉斐尔/ raphael.min.js＆＃34;] / engine.create@http://localhost:4200/vendor.bundle.js:3632:9420   È@ 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   [＆＃34; ../../../ core/@angular/core.es5.js"]。/ prototype.create@http://localhost:4200/vendor.bundle.js:53753:37   [＆＃34; ../../../ core/@angular/core.es5.js"] /http://localhost:4200/vendor.bundle.js:47230:16   [＆＃34; ../../../ core/@angular/core.es5.js"] /http://localhost:4200/vendor.bundle.js:48659:40   [＆＃34; ../../../ core/@angular/core.es5.js"] / moduleDoBootstrap /＆LT; @ http://localhost:4200/vendor.bundle.js:48442:74   [＆＃34; ../../../ core/@angular/core.es5.js"]。/ prototype.moduleDoBootstrap@http://localhost:4200/vendor.bundle.js:48442:13   [＆＃34; ../../../ core/@angular/core.es5.js"] /.prototype._bootstrapModuleFactoryWithZone/http://localhost:4200/vendor.bundle.js:48404： 21   [＆＃34; ../../../../ zone.js / DIST / zone.js＆＃34;] /http://localhost:4200/polyfills.bundle.js:10579:17   forkInnerZoneWithAngularBehavior / zone._inner＆LT; .onInvoke @ http://localhost:4200/vendor.bundle.js:47787:24   [＆＃34; ../../../../ zone.js / DIST / zone.js＆＃34;] /http://localhost:4200/polyfills.bundle.js:10578:17   [＆＃34; ../../../../ zone.js / DIST / zone.js＆＃34;] /http://localhost:4200/polyfills.bundle.js:10329:24   scheduleResolveOrReject /＆LT; @ http://localhost:4200/polyfills.bundle.js:11019:52   [＆＃34; ../../../../ zone.js / DIST / zone.js＆＃34;] /http://localhost:4200/polyfills.bundle.js:10612:17   forkInnerZoneWithAngularBehavior / zone._inner＆LT; .onInvokeTask @ http://localhost:4200/vendor.bundle.js:47778:24   [＆＃34; ../../../../ zone.js / DIST / zone.js＆＃34;] /http://localhost:4200/polyfills.bundle.js:10611:17   [＆＃34; ../../../../ zone.js / DIST / zone.js＆＃34;] /http://localhost:4200/polyfills.bundle.js:10379:28   drainMicroTaskQueue @ http://localhost:4200/polyfills.bundle.js:10783:25   ＆＃34; [＆＃34; ../../../../圣拉斐尔/ raphael.min.js＆＃34;] / engine.create@http://localhost:4200/vendor.bundle.js:3632:9420   È@ 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   [＆＃34; ../../../ core/@angular/core.es5.js"]。/ prototype.create@http://localhost:4200/vendor.bundle.js:53753:37   [＆＃34; ../../../ core/@angular/core.es5.js"] /http://localhost:4200/vendor.bundle.js:47230:16   [＆＃34; ../../../ core/@angular/core.es5.js"] /http://localhost:4200/vendor.bundle.js:48659:40   [＆＃34; ../../../ core/@angular/core.es5.js"] / moduleDoBootstrap /＆LT; @ http://localhost:4200/vendor.bundle.js:48442:74   [＆＃34; ../../../ core/@angular/core.es5.js"]。/ prototype.moduleDoBootstrap@http://localhost:4200/vendor.bundle.js:48442:13   [＆＃34; ../../../ core/@angular/core.es5.js"] /.prototype._bootstrapModuleFactoryWithZone/http://localhost:4200/vendor.bundle.js:48404： 21   [＆＃34; ../../../../ zone.js / DIST / zone.js＆＃34;] /http://localhost:4200/polyfills.bundle.js:10579:17   forkInnerZoneWithAngularBehavior / zone._inner＆LT; .onInvoke @ http://localhost:4200/vendor.bundle.js:47787:24   [＆＃34; ../../../../ zone.js / DIST / zone.js＆＃34;] /http://localhost:4200/polyfills.bundle.js:10578:17   [＆＃34; ../../../../ zone.js / DIST / zone.js＆＃34;] /http://localhost:4200/polyfills.bundle.js:10329:24   scheduleResolveOrReject /＆LT; @ http://localhost:4200/polyfills.bundle.js:11019:52   [＆＃34; ../../../../ zone.js / DIST / zone.js＆＃34;] /http://localhost:4200/polyfills.bundle.js:10612:17   forkInnerZoneWithAngularBehavior / zone._inner＆LT; .onInvokeTask @ http://localhost:4200/vendor.bundle.js:47778:24   [＆＃34; ../../../../ zone.js / DIST / zone.js＆＃34;] /http://localhost:4200/polyfills.bundle.js:10611:17   [＆＃34; ../../../../ zone.js / DIST / zone.js＆＃34;] /http://localhost:4200/polyfills.bundle.js:10379:28   drainMicroTaskQueue @ http://localhost:4200/polyfills.bundle.js:10783:25   ＆＃34; polyfills.bundle.js：10842：16

     

改变对象的[[Prototype]]会导致代码运行   非常缓慢地;而是使用正确的初始值创建对象   [[Prototype]]值使用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"
  ]
}

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

1 个答案:

答案 0 :(得分：0)

  

"ERROR" TypeError: e is undefined Stack trace:

错误原因是使用变量而没有定义例如。

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

修复

定义e

更多

您的错误指向缩小的文件。这意味着您发布的代码基本上没用。设置源映射以获取正确的错误行并从那里继续。

相关问题
最新问题