具有Angular 6的完整堆栈网络应用程序仅在Chrome中运行

时间:2019-05-21 21:13:20

标签: python django angular postgresql

我正在尝试使用Angular 6,Django 2.1,Python 3.5和Postgresql构建用于数据可视化的完整堆栈Web应用程序。这是代码: https://github.com/shivkiyer/dataviz

我已在VPS上部署了该应用程序: http://webdevandresearch.com/dataviz/

此应用只能在Google Chrome中运行,而不能在Firefox或Internet Explorer中运行。具体来说,当我单击按钮时,它不会加载数据集。我认为这一定与我添加点击侦听器的方式有关,但是其他方面正在起作用,例如单击按钮进行导航或显示/隐藏详细信息。因此,似乎按钮上的单击侦听器根本无法正常工作。

这是错误消息:

TypeError: _co.errorMessage is undefined
Stack trace:
View_DataAnalyticsComponent_0/<@ng:///AppModule/DataAnalyticsComponent.ngfactory.js:140:9
debugUpdateDirectives@http://localhost:3030/vendor.js:44159:12
checkAndUpdateView@http://localhost:3030/vendor.js:43556:5
callViewAction@http://localhost:3030/vendor.js:43797:21
execComponentViewsAction@http://localhost:3030/vendor.js:43739:13
checkAndUpdateView@http://localhost:3030/vendor.js:43562:5
callViewAction@http://localhost:3030/vendor.js:43797:21
execEmbeddedViewsAction@http://localhost:3030/vendor.js:43760:17
checkAndUpdateView@http://localhost:3030/vendor.js:43557:5
callViewAction@http://localhost:3030/vendor.js:43797:21
execComponentViewsAction@http://localhost:3030/vendor.js:43739:13
checkAndUpdateView@http://localhost:3030/vendor.js:43562:5
callWithDebugContext@http://localhost:3030/vendor.js:44449:22
debugCheckAndUpdateView@http://localhost:3030/vendor.js:44127:12
./node_modules/@angular/core/fesm5/core.js/ViewRef_.prototype.detectChanges@http://localhost:3030/vendor.js:41943:13
./node_modules/@angular/core/fesm5/core.js/ApplicationRef.prototype.tick/<@http://localhost:3030/vendor.js:37676:58
./node_modules/@angular/core/fesm5/core.js/ApplicationRef.prototype.tick@http://localhost:3030/vendor.js:37676:13
next/<@http://localhost:3030/vendor.js:37567:99
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invoke@http://localhost:3030/polyfills.js:2726:17
onInvoke@http://localhost:3030/vendor.js:36925:24
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invoke@http://localhost:3030/polyfills.js:2725:37
./node_modules/zone.js/dist/zone.js/</Zone.prototype.run@http://localhost:3030/polyfills.js:2485:24
./node_modules/@angular/core/fesm5/core.js/NgZone.prototype.run@http://localhost:3030/vendor.js:36839:16
next@http://localhost:3030/vendor.js:37567:69
./node_modules/@angular/core/fesm5/core.js/EventEmitter.prototype.subscribe/schedulerFn<@http://localhost:3030/vendor.js:36656:36
./node_modules/rxjs/_esm5/internal/Subscriber.js/SafeSubscriber.prototype.__tryOrUnsub@http://localhost:3030/vendor.js:69153:13
./node_modules/rxjs/_esm5/internal/Subscriber.js/SafeSubscriber.prototype.next@http://localhost:3030/vendor.js:69091:17
./node_modules/rxjs/_esm5/internal/Subscriber.js/Subscriber.prototype._next@http://localhost:3030/vendor.js:69035:9
./node_modules/rxjs/_esm5/internal/Subscriber.js/Subscriber.prototype.next@http://localhost:3030/vendor.js:69012:13
./node_modules/rxjs/_esm5/internal/Subject.js/Subject.prototype.next@http://localhost:3030/vendor.js:68778:17
./node_modules/@angular/core/fesm5/core.js/EventEmitter.prototype.emit@http://localhost:3030/vendor.js:36640:54
checkStable@http://localhost:3030/vendor.js:36894:13
onLeave@http://localhost:3030/vendor.js:36961:5
onInvokeTask@http://localhost:3030/vendor.js:36919:17
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invokeTask@http://localhost:3030/polyfills.js:2757:41
./node_modules/zone.js/dist/zone.js/</Zone.prototype.runTask@http://localhost:3030/polyfills.js:2530:28
./node_modules/zone.js/dist/zone.js/</ZoneTask.invokeTask@http://localhost:3030/polyfills.js:2833:24
invokeTask@http://localhost:3030/polyfills.js:4079:9
globalZoneAwareCallback@http://localhost:3030/polyfills.js:4105:17

此错误来自本地计算机上的开发服务器。 Angular开发服务器不会引发任何错误。在我的Django服务器上,我看到Firefox的Angular开发服务器发送的GET请求为301。在我的Google Chrome浏览器上,GET请求的状态为200。因此,从Angular开发服务器发送的HTTP请求在Firefox中混乱了。在我的Google Chrome浏览器上,它工作正常。

1 个答案:

答案 0 :(得分:0)

您是否已启用Polyfill?在FireFox中,您对/ api / load-file / 1的GET请求返回一个HTTP301。但是chrome通过polyfill成功读取了json。