iOS 模拟器上的 Ionic 4/Angular 7 应用程序错误

Question

我已经在浏览器中测试了 Ionic 4/Angular 7 应用程序，它运行良好，我通过 Xcode 在 iPhone 7 模拟器中启动了它，该应用程序只是一个空白屏幕，在调试控制台中显示以下内容：

[Error] ERROR
Error: Uncaught (in promise): TypeError: hostEl.createShadowRoot is not a function. (In 'hostEl.createShadowRoot()', 'hostEl.createShadowRoot' is undefined) ShadowDomRenderer@ionic://localhost/vendor.js:69178:55 createRenderer@ionic://localhost/vendor.js:69021:45 createRenderer@ionic://localhost/vendor.js:60321:63 createComponentView@ionic://localhost/vendor.js:59302:70 callWithDebugContext@ionic://localhost/vendor.js:60300:30 createViewNodes@ionic://localhost/vendor.js:59343:65 createRootView@ionic://localhost/vendor.js:59292:20 callWithDebugContext@ionic://localhost/vendor.js:60300:30 create@ionic://localhost/vendor.js:57631:43 createComponent@ionic://localhost/vendor.js:57742:51 activateWith@ionic://localhost/vendor.js:81413:68 activateRoutes@ionic://localhost/vendor.js:72907:52 ionic://localhost/vendor.js:72858:33 forEach@[native code] activateChildRoutes@ionic://localhost/vendor.js:72857:36 activateRoutes@ionic://localhost/vendor.js:72914:41 ionic://localhost/vendor.js:72858:33 forEach@[native code] activateChildRoutes@ionic://localhost/vendor.js:72857:36 activate@ionic://localhost/vendor.js:72782:33 ionic://localhost/vendor.js:72766:22 _next@ionic://localhost/vendor.js:89535:39 next@ionic://localhost/vendor.js:84499:23 _next@ionic://localhost/vendor.js:92255:30 next@ionic://localhost/vendor.js:84499:23 _next@ionic://localhost/vendor.js:89541:30 next@ionic://localhost/vendor.js:84499:23 notifyNext@ionic://localhost/vendor.js:91884:30 _next@ionic://localhost/vendor.js:83712:31 next@ionic://localhost/vendor.js:84499:23 _next@ionic://localhost/vendor.js:89541:30 next@ionic://localhost/vendor.js:84499:23 ionic://localhost/vendor.js:95145:28 _trySubscribe@ionic://localhost/vendor.js:83881:35 subscribe@ionic://localhost/vendor.js:83867:35 subscribe@ionic://localhost/vendor.js:83862:35 _innerSub@ionic://localhost/vendor.js:91863:115 _next@ionic://localhost/vendor.js:91853:23 next@ionic://localhost/vendor.js:84499:23 notifyNext@ionic://localhost/vendor.js:91884:30 _next@ionic://localhost/vendor.js:83712:31 next@ionic://localhost/vendor.js:84499:23 _next@ionic://localhost/vendor.js:89541:30 next@ionic://localhost/vendor.js:84499:23 _next@ionic://localhost/vendor.js:92255:30 next@ionic://localhost/vendor.js:84499:23 notifyNext@ionic://localhost/vendor.js:89825:30 _next@ionic://localhost/vendor.js:83712:31 next@ionic://localhost/vendor.js:84499:23 _next@ionic://localhost/vendor.js:89541:30 next@ionic://localhost/vendor.js:84499:23 _complete@ionic://localhost/vendor.js:92051:33 complete@ionic://localhost/vendor.js:84511:27 _complete@ionic://localhost/vendor.js:84529:34 complete@ionic://localhost/vendor.js:84511:27 _complete@ionic://localhost/vendor.js:89820:38 complete@ionic://localhost/vendor.js:84511:27 ionic://localhost/vendor.js:95147:28 _trySubscribe@ionic://localhost/vendor.js:83881:35 subscribe@ionic://localhost/vendor.js:83867:35 subscribe@ionic://localhost/vendor.js:83862:35 subscribe@ionic://localhost/vendor.js:83862:35 subscribe@ionic://localhost/vendor.js:83862:35 subscribe@ionic://localhost/vendor.js:83862:35 _innerSub@ionic://localhost/vendor.js:89815:90 _tryNext@ionic://localhost/vendor.js:89809:23 _next@ionic://localhost/vendor.js:89792:26 next@ionic://localhost/vendor.js:84499:23 _next@ionic://localhost/vendor.js:92255:30 next@ionic://localhost/vendor.js:84499:23 ionic://localhost/vendor.js:95145:28 _trySubscribe@ionic://localhost/vendor.js:83881:35 subscribe@ionic://localhost/vendor.js:83867:35 subscribe@ionic://localhost/vendor.js:83862:35 subscribe@ionic://localhost/vendor.js:83862:35 subscribe@ionic://localhost/vendor.js:83862:35 subscribe@ionic://localhost/vendor.js:83862:35 _innerSub@ionic://localhost/vendor.js:91863:115 _next@ionic://localhost/vendor.js:91853:23 next@ionic://localhost/vendor.js:84499:23 _next@ionic://localhost/vendor.js:88980:34 next@ionic://localhost/vendor.js:84499:23 _next@ionic://localhost/vendor.js:92255:30 next@ionic://localhost/vendor.js:84499:23 _next@ionic://localhost/vendor.js:92255:30 next@ionic://localhost/vendor.js:84499:23 notifyNext@ionic://localhost/vendor.js:89825:30 _next@ionic://localhost/vendor.js:83712:31 next@ionic://localhost/vendor.js:84499:23 _next@ionic://localhost/vendor.js:89541:30 next@ionic://localhost/vendor.js:84499:23 notifyNext@ionic://localhost/vendor.js:89825:30 _next@ionic://localhost/vendor.js:83712:31 next@ionic://localhost/vendor.js:84499:23 _complete@ionic://localhost/vendor.js:88015:34 complete@ionic://localhost/vendor.js:84511:27 _complete@ionic://localhost/vendor.js:84529:34 complete@ionic://localhost/vendor.js:84511:27 _complete@ionic://localhost/vendor.js:84529:34 complete@ionic://localhost/vendor.js:84511:27
resolvePromise — zone.js:831
resolvePromise — zone.js:788
(anonymous function) — zone.js:892
onInvokeTask — core.js:17290
runTask — zone.js:195
drainMicroTaskQueue — zone.js:601
promiseReactionJob
    defaultErrorLogger (vendor.js:51847)
    handleError (vendor.js:51895)
    next (vendor.js:53894:140)
    (anonymous function) (vendor.js:49638)
    __tryOrUnsub (vendor.js:84638)
    next (vendor.js:84576)
    _next (vendor.js:84522)
    next (vendor.js:84499)
    next (vendor.js:84265)
    emit (vendor.js:49622)
    run (polyfills.js:2512)
    onHandleError (vendor.js:53444)
    runGuarded (polyfills.js:2526)
    _loop_1 (polyfills.js:3056)
    microtaskDrainDone (polyfills.js:3065)
    drainMicroTaskQueue (polyfills.js:2970)
    promiseReactionJob

有谁知道这个错误是什么？好像不能创建shadow root，但是在浏览器中可以正常使用？

Answer 1

似乎在您的组件中您正在使用 ViewEncapsulation.Native 这就是为什么 Angular 在本机运行时调用 createShadowRoot() 的原因。 ViewEncapsulation 上有一个很好的 blog，以及什么时候使用的枚举。 ViewEncapsulation 的默认调用是 Emulated，因此除非您出于某种原因需要 Native，否则更改它应该可以解决您的问题。