Angular 2 Universal ng2-bootstrap 不工作 Safari

Posted 2023-02-23

技术标签:

【中文标题】Angular 2 Universal ng2-bootstrap 不工作 Safari【英文标题】：Angular 2 Universal ng2-bootstrap not working Safari 【发布时间】：2016-10-13 16:28:52 【问题描述】：

我使用 Angular 2 和 ng2-bootstrap 创建并使用 Webpack 和 Universal 提供服务的网站一直可以在 Chrome 上顺利运行，但不能在 Safari 或 Microsoft Edge 上运行。

目前 Safari 是最重要的。

在开发者控制台中出现以下错误：

[Error] EXCEPTION: Attempted to assign to readonly property.
    handleError
    next
    (anonymous function)
    __tryOrUnsub
    next
    _next
    next
    next
    emit
    onError
    onHandleError
    handleError (zone.js:207)
    runTask (zone.js:139)
    invoke (zone.js:304)
[Error] ORIGINAL STACKTRACE:
    handleError
    next
    (anonymous function)
    __tryOrUnsub
    next
    _next
    next
    next
    emit
    onError
    onHandleError
    handleError (zone.js:207)
    runTask (zone.js:139)
    invoke (zone.js:304)
[Error] setProperty
setElementProperty
detectChangesInternal
detectChanges
detectViewChildrenChanges
detectChangesInternal
detectChanges
detectViewChildrenChanges
detectChangesInternal
detectChanges
detectContentChildrenChanges
detectChangesInternal
detectChanges
detectContentChildrenChanges
detectChangesInternal
detectChanges
detectViewChildrenChanges
detectChangesInternal
detectChanges
detectChanges

forEach@[native code]
tick

invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:203:33
onInvoke
invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:202:42
run@http://localhost:3000/node_modules/zone.js/dist/zone.js:96:49
runInner
run
next

__tryOrUnsub
next
_next
next
next
emit
_checkStable
onLeave
onInvokeTask
invokeTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:235:54
runTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:136:57
invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:304:40
    handleError
    next
    (anonymous function)
    __tryOrUnsub
    next
    _next
    next
    next
    emit
    onError
    onHandleError
    handleError (zone.js:207)
    runTask (zone.js:139)
    invoke (zone.js:304)
[Error] TypeError: Attempted to assign to readonly property.
    __tryOrUnsub
    next
    _next
    next
    next
    emit
    onError
    onHandleError
    handleError (zone.js:207)
    runTask (zone.js:139)
    invoke (zone.js:304)

这对我没有多大帮助，因为我无法找出它试图分配什么只读属性。

我会在这里发布我的进度，以了解更多信息。

更新

我已更新到最新的 Angular 2 2.1.0 版本，但仍然没有运气。

我还阅读了另一个项目，有人删除了“use strict”；从项目来看，这至少加载了没有任何错误的页面。但是，当我尝试单击链接时，错误又回来了。

更新

我终于找到了导致错误的实际行：

BrowserDomAdapter.prototype.setProperty = function(el, name, value) 
   el[name] = value
;

有没有办法在设置之前判断一个属性是否是只读的？

更新

我想我已经修复了一个错误。结果在模板中的一个组件中，我分配了只读的样式属性。

所以我没有使用<div [style]="getStyle()">，而是使用了<div [attr.style]="getStyle()">，它阻止了 TypeError 的引发。

但是，现在我遇到了另一个错误：

[Error] EXCEPTION: Can't find variable: Intl
    handleError (index.js:13885:260)
    next (index.js:8825:664)
    (anonymous function) (index.js:9320:555)
    __tryOrUnsub (index.js:980:1636)
    next (index.js:980:768)
    _next (index.js:975:294)
    next (index.js:962)
    next (index.js:1316:668)
    emit (index.js:9320:179)
    onError (index.js:9572:261)
    onHandleError (index.js:20269:272)
    handleError (index.js:27565:6501)
    runTask (index.js:27565:3198)
    invoke (index.js:27567:1047)
[Error] ORIGINAL STACKTRACE:
    handleError (index.js:13885:439)
    next (index.js:8825:664)
    (anonymous function) (index.js:9320:555)
    __tryOrUnsub (index.js:980:1636)
    next (index.js:980:768)
    _next (index.js:975:294)
    next (index.js:962)
    next (index.js:1316:668)
    emit (index.js:9320:179)
    onError (index.js:9572:261)
    onHandleError (index.js:20269:272)
    handleError (index.js:27565:6501)
    runTask (index.js:27565:3198)
    invoke (index.js:27567:1047)
[Error] intlDateFormat@http://localhost:3000/index.js:11996:633
http://localhost:3000/index.js:12000:513
http://localhost:3000/index.js:12000:1106
forEach@[native code]
dateFormatter@http://localhost:3000/index.js:12000:1057
format@http://localhost:3000/index.js:12000:1448
transform@http://localhost:3000/index.js:17986:940
[native code]
http://localhost:3000/index.js:6148:4063
detectChangesInternal
detectChanges@http://localhost:3000/index.js:19974:507
detectContentChildrenChanges@http://localhost:3000/index.js:19977:438
detectChangesInternal
detectChanges@http://localhost:3000/index.js:19974:507
detectContentChildrenChanges@http://localhost:3000/index.js:19977:438
detectChangesInternal
detectChanges@http://localhost:3000/index.js:19974:507
detectViewChildrenChanges@http://localhost:3000/index.js:19977:724
detectChangesInternal
detectChanges@http://localhost:3000/index.js:19974:507
detectViewChildrenChanges@http://localhost:3000/index.js:19977:724
detectChangesInternal
detectChanges@http://localhost:3000/index.js:19974:507
detectContentChildrenChanges@http://localhost:3000/index.js:19977:438
detectChangesInternal@http://localhost:3000/index.js:19977:98
detectChanges@http://localhost:3000/index.js:19974:507
detectContentChildrenChanges@http://localhost:3000/index.js:19977:438
detectChangesInternal
detectChanges@http://localhost:3000/index.js:19974:507
detectViewChildrenChanges@http://localhost:3000/index.js:19977:724
detectChangesInternal
detectChanges@http://localhost:3000/index.js:19974:507
detectChanges@http://localhost:3000/index.js:14295:1477
http://localhost:3000/index.js:8848:612
forEach@[native code]
tick@http://localhost:3000/index.js:8848:563
http://localhost:3000/index.js:8844:973
invoke@http://localhost:3000/index.js:27565:6355
onInvoke@http://localhost:3000/index.js:20266:1016
invoke@http://localhost:3000/index.js:27565:6265
run@http://localhost:3000/index.js:27565:2197
runInner@http://localhost:3000/index.js:20269:446
run@http://localhost:3000/index.js:9613:65
next@http://localhost:3000/index.js:8844:951
http://localhost:3000/index.js:9320:554
__tryOrUnsub@http://localhost:3000/index.js:980:1635
next@http://localhost:3000/index.js:980:767
_next@http://localhost:3000/index.js:975:293
next@http://localhost:3000/index.js:962:73
next@http://localhost:3000/index.js:1316:667
emit@http://localhost:3000/index.js:9320:178
_checkStable@http://localhost:3000/index.js:9574:44
onLeave@http://localhost:3000/index.js:9572:19
onInvokeTask@http://localhost:3000/index.js:20266:890
invokeTask@http://localhost:3000/index.js:27565:7121
runTask@http://localhost:3000/index.js:27565:3119
invoke@http://localhost:3000/index.js:27567:1046
    handleError (index.js:13885:483)
    next (index.js:8825:664)
    (anonymous function) (index.js:9320:555)
    __tryOrUnsub (index.js:980:1636)
    next (index.js:980:768)
    _next (index.js:975:294)
    next (index.js:962)
    next (index.js:1316:668)
    emit (index.js:9320:179)
    onError (index.js:9572:261)
    onHandleError (index.js:20269:272)
    handleError (index.js:27565:6501)
    runTask (index.js:27565:3198)
    invoke (index.js:27567:1047)
[Error] ReferenceError: Can't find variable: Intl
    __tryOrUnsub (index.js:980:1697)
    next (index.js:980:768)
    _next (index.js:975:294)
    next (index.js:962)
    next (index.js:1316:668)
    emit (index.js:9320:179)
    onError (index.js:9572:261)
    onHandleError (index.js:20269:272)
    handleError (index.js:27565:6501)
    runTask (index.js:27565:3198)
    invoke (index.js:27567:1047)

原来它在 Angular 的 common/bundles/common.umd.js 中，但在 Safari 中未定义。有什么想法吗？

【问题讨论】：

【参考方案1】：

所以最终的解决方法是将 Intl 包含到项目中：

npm install intl --save

在你的主模块中：

import intl
import 'intl/locale-data/jsonp/nb';

TypeError 是由于尝试将某些内容分配给（只读）样式属性。请参阅上面的更新。

【讨论】：

在顶部导入国际。你有没有以分号结尾的原因？我看到有和没有错误。

以上是关于Angular 2 Universal ng2-bootstrap 不工作 Safari的主要内容，如果未能解决你的问题，请参考以下文章

Angular 2 Universal - 使用手写笔和 pug 模板的服务器端渲染

将 Angular 2/3/4/5/6 项目转换为 Angular Universal

Angular 2 Universal ng2-bootstrap 不工作 Safari

当网站上的文档过时时如何安装 Angular2 Universal？

从 Angular Universal 应用程序中的 Express JS 获取值

Angular Universal 学习笔记