Блог

Главная - Вопросы по программированию - Angular 2 Universal ng2 — не работает загрузчик Safari

Angular 2 Universal ng2 — не работает загрузчик Safari

#ios #angular #safari #ng2-bootstrap #angular-universal

#iOS #angular #safari #ng2-загрузчик #angular-универсальный

Вопрос:

Веб-сайт, который я создал с помощью 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, но по-прежнему безуспешно.

Я также прочитал еще один проект, в котором кто-то удалил «использовать строго»; из проекта, это, по крайней мере, загрузило страницу без каких-либо ошибок вообще. Однако, когда я попытался щелкнуть ссылку, ошибка вернулась.

Обновить

Я, наконец, нашел фактическую строку, которая вызывает ошибку:

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

Есть ли какой-либо возможный способ выяснить, доступно ли свойство только для чтения или нет, прежде чем устанавливать его?

Обновить

Я думаю, что я исправил одну ошибку. Оказалось, что в одном из моих компонентов в шаблоне я присваивал свойство style, которое доступно только для чтения.

Итак, вместо <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 была вызвана попыткой присвоить что-либо свойству стиля (только для чтения). См. Обновление выше.

Комментарии:

1. на этом верхнем импорт intl. Есть ли причина, по которой вы не закончили точкой с запятой? Я вижу ошибки с и без.