Javascript 角度';s Zone.js讨厌RaphaelJS
我尝试在Angular zone.js中使用RaphaelJS,但zone.js不希望: “错误”类型错误:e是未定义的堆栈跟踪: [“../../../../raphael/raphael.min.js”]/engine.create@ e@ 纸质元件@ createClass@ createDirectiveInstance@ createViewNodes@ callViewAction@ 执行组件视图操作@ createViewNodes@ createRootView@ callWithDebugContext@ 调试CreateRootView@ [“../../../core/@angular/core.es5.js”]/.prototype.create@ [“../../../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/Javascript 角度';s Zone.js讨厌RaphaelJS,javascript,angular,typescript,raphael,zone.js,Javascript,Angular,Typescript,Raphael,Zone.js,我尝试在Angular zone.js中使用RaphaelJS,但zone.js不希望: “错误”类型错误:e是未定义的堆栈跟踪: [“../../../../raphael/raphael.min.js”]/engine.create@ e@ 纸质元件@ createClass@ createDirectiveInstance@ createViewNodes@ callViewAction@ 执行组件视图操作@ createViewNodes@ createRootView@ callWit
“ERROR”TypeError:e是未定义的堆栈跟踪:
错误原因是使用变量时未定义,例如
(function(){"use strict";e})()
修理
定义e
更多
您的错误指向缩小的文件。这意味着您发布的代码基本上是无用的。设置sourcemaps以获取正确的错误行并从那里继续 区域仅输出未捕获错误。不要向信使开枪。您应该从检查错误发生的那一行开始,并找出e如何可以不定义。“目前你是唯一能做到这一点的人。@estus当信使告诉垃圾时,他不值得宽恕。”。没有一个因为Angular将文件存储在内存而不是磁盘中,所以我无法生成可读的缩小文件,所以我想知道Angular是否适合我。我看不到任何垃圾。这是常规调用堆栈。我猜“我的浏览器指向一个空的AppComponent.ngfactory.js”不是区域故障。我并不总是对常规区域输出感到满意,但这就是它的工作原理。即使应用程序在源地图方面有问题,解决方案是手动在vendor.bundle.js中找到3632:9420位置,并检查什么是
e
,以及为什么它没有定义。任何框架都会有完全相同的问题。@estus我认为我选择使用“垃圾”这个词并不好。我不是在抱怨堆栈跟踪。我的意思是,我更喜欢暗示错误消息的解决方案,而不是含糊不清的消息。如果这是一个预期的错误,就会有有有意义的消息。因为这是一个例外,所以无论框架是什么,都不会比这更好。您只需检查错误堆栈中的每个位置,找出e是未定义的
从何而来,自上而下。等等,将tsconfig.json中的“sourceMap”设置为true
是不够的?那么还有什么可以做呢?不幸的是,我的浏览器指向一个空的AppComponent.ngfactory.js。
/* SystemJS module definition */
declare var module: NodeModule;
interface NodeModule {
id: string;
}
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"baseUrl": "./",
"module": "es2015",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.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);
import { Component } from '@angular/core';
@Component({
selector: 'sign-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent
{
title = 'app';
constructor()
{
}
}
<div style="text-align:center">
<h1>
Welcome to {{title}}!
</h1>
</div>
<div>
<p>Please put your sign below:</p>
<sign-paper></sign-paper>
</div>
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 { }
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');
}
}
<div id="paper"></div>
/**
* 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';
{
"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"
}
(function(){"use strict";e})()