Nativescript: [Angular] hmr handling

Created on 10 Aug 2020 · 3Comments · Source: NativeScript/NativeScript

When I create a new project with the following command:

tns create demoProjectName --ng

and I run tns run ios to run it in my emulator it works fine the first time it starts, but as soon as I change something (i.e. the ActionBar title in the sample items component) and webpack is running, the app won't start anymore and crashes with the following message:

CONSOLE INFO file: node_modules/nativescript-dev-webpack/hot.js:3:0: HMR: Checking for updates to the bundle with hmr hash 98a74e9d60367a270d1e. CONSOLE INFO file: node_modules/nativescript-dev-webpack/hot.js:3:0: HMR: The following modules were updated: CONSOLE INFO file: node_modules/nativescript-dev-webpack/hot.js:3:0: HMR: ↻ ./app/item/items.component.html CONSOLE INFO file: node_modules/nativescript-dev-webpack/hot.js:3:0: HMR: ↻ ./app/item/items.component.ts CONSOLE INFO file: node_modules/nativescript-dev-webpack/hot.js:3:0: HMR: ↻ ./app/app-routing.module.ts CONSOLE INFO file: node_modules/nativescript-dev-webpack/hot.js:3:0: HMR: ↻ ./app/app.module.ts CONSOLE INFO file: node_modules/nativescript-dev-webpack/hot.js:3:0: HMR: Successfully applied update with hmr hash 98a74e9d60367a270d1e. App is up to date. ***** Fatal JavaScript exception - application has been terminated. ***** Native stack trace: 1 0x10e54060e NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool) 2 0x10e581548 NativeScript::FFICallback<NativeScript::ObjCMethodCallback>::ffiClosureCallback(ffi_cif*, void*, void**, void*) 3 0x10ef82222 ffi_closure_unix64_inner 4 0x10ef82c4a ffi_closure_unix64 5 0x7fff23da2414 __CFRUNLOOP_IS_CALLING_OUT_TO_A_TIMER_CALLBACK_FUNCTION__ 6 0x7fff23da20ae __CFRunLoopDoTimer 7 0x7fff23da170a __CFRunLoopDoTimers 8 0x7fff23d9c35e __CFRunLoopRun 9 0x7fff23d9b8a4 CFRunLoopRunSpecific 10 0x7fff38c39bbe GSEventRunModal 11 0x7fff49325968 UIApplicationMain 12 0x10ef82a8d ffi_call_unix64 13 0x112bf7640 JavaScript stack trace: file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:472:0 at file: node_modules/@nativescript/angular/view-util.js:191:0 at file: node_modules/@nativescript/angular/view-util.js:119:0 at file: node_modules/@nativescript/angular/renderer.js:60:0 at forEach([native code]) at file: node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:11528:0 at file: node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js:24842:0 at file: node_modules/@nativescript/angular/platform-common.js:221:0 at file: node_modules/@nativescript/angular/platform-common.js:103:74 at file: node_modules/@nativescript/angular/zone-js/dist/zone-nativescript.js:188:0 at file: node_modules/@nativescript/angular/zone-js/dist/zone-nativescript.js:496:0 at timer(file: node_modules/@nativescript/angular/zone-js/dist/zone-nativescript.js:1561:0) at invoke(file: node_modules/@nativescript/core/timer/timer.ios.js:54:30) at file: node_modules/@nativescript/angular/zone-js/dist/zone-nativescript.js:151:0 at file: node_modules/@nativescript/core/timer/timer.ios.js:18:0 at UIApplicationMain([native code]) at run(file: node_modules/@nativescript/core/application/application.ios.js:312:0) at file: node_modules/@nativescript/angular/platform-common.js:211:0 at file: node_modules/@nativescript/angular/platform-common.js:112:0 at file: node_modules/@nativescript/angular/platform-common.js:92:0 at file:///app/bundle.js:345:145 at ./main.ts(file:///app/bundle.js:350:34) at __webpack_require__(file: src/webpack/bootstrap:750:0) at checkDeferredModules(file: src/webpack/bootstrap:43:0) at webpackJsonpCallback(file: src/webpack/bootstrap:30:0) at anonymous(file:///app/bundle.js:2:61) at evaluate([native code]) at modu<…> JavaScript error: file: node_modules/@nativescript/core/ui/core/view-base/view-base.js:472:0: JS ERROR Error: View not added to this instance. View: ProxyViewContainer(8) CurrentParent: Page(4) ExpectedParent: AppHostView(1) ***** Fatal JavaScript exception - application has been terminated. ***** Native stack trace: 1 0x10e54060e NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool) 2 0x10e5925f4 -[TNSRuntime executeModule:referredBy:] 3 0x10de32db3 main 4 0x7fff520ce1fd start 5 0x1 JavaScript stack trace: UIApplicationMain(file: node_modules/@nativescript/core/application/application.ios.js:312:0) at run(file: node_modules/@nativescript/core/application/application.ios.js:312:0) at file: node_modules/@nativescript/angular/platform-common.js:211:0 at file: node_modules/@nativescript/angular/platform-common.js:112:0 at file: node_modules/@nativescript/angular/platform-common.js:92:0 at file:///app/bundle.js:345:145 at ./main.ts(file:///app/bundle.js:350:34) at __webpack_require__(file: src/webpack/bootstrap:750:0) at checkDeferredModules(file: src/webpack/bootstrap:43:0) at webpackJsonpCallback(file: src/webpack/bootstrap:30:0) at anonymous(file:///app/bundle.js:2:61) at evaluate([native code]) at moduleEvaluation([native code]) at [native code] at asyncFunctionResume([native code]) at [native code] at promiseReactionJob([native code]) JavaScript error: file: node_modules/@nativescript/core/application/application.ios.js:312:0: JS ERROR Error ***** Fatal JavaScript exception - application has been terminated. ***** Native stack trace: 1 0x10e54060e NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool) 2 0x10e58ff76 -[TNSRuntimeInspector reportFatalError:] 3 0x10de3523b TNSInspectorUncaughtExceptionHandler 4 0x7fff23e3e2cd __handleUncaughtException 5 0x7fff51253c05 _objc_terminate() 6 0x7fff500a1c87 std::__terminate(void (*)()) 7 0x7fff500a440b __cxa_get_exception_ptr 8 0x7fff500a43d2 __cxxabiv1::exception_cleanup_func(_Unwind_Reason_Code, _Unwind_Exception*) 9 0x7fff51253ad6 _objc_exception_destructor(void*) 10 0x10e540b4f NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool) 11 0x10e5925f4 -[TNSRuntime executeModule:referredBy:] 12 0x10de32db3 main 13 0x7fff520ce1fd start 14 0x1 JavaScript stack trace: JavaScript error: JS ERROR Error: NativeScript encountered a fatal error: Error at UIApplicationMain(file: node_modules/@nativescript/core/application/application.ios.js:312:0) at run(file: node_modules/@nativescript/core/application/application.ios.js:312:0) at file: node_modules/@nativescript/angular/platform-common.js:211:0 at file: node_modules/@nativescript/angular/platform-common.js:112:0 at file: node_modules/@nativescript/angular/platform-common.js:92:0 at file:///app/bundle.js:345:145 at ./main.ts(file:///app/bundle.js:350:34) at __webpack_require__(file: src/webpack/bootstrap:750:0) at checkDeferredModules(file: src/webpack/bootstrap:43:0) at webpackJsonpCallback(file: src/webpack/bootstrap:30:0) at anonymous(file:///app/bundle.js:2:61) at evaluate([native code]) at moduleEvaluation([native code]) at [native code] at asyncFunctionResume([native code]) at [native code] at promiseReactionJob([native code]) NativeScript caught signal 6. Native Stack: 1 0x10e591251 sig_handler(int) 2 0x7fff522ab5fd _sigtramp 3 0x7fff5219ff39 itoa64 4 0x7fff5219bb7c abort 5 0x7fff500a2858 abort_message 6 0x7fff500a1cad std::__terminate(void (*)()) 7 0x7fff500a440b __cxa_get_exception_ptr 8 0x7fff500a43d2 __cxxabiv1::exception_cleanup_func(_Unwind_Reason_Code, _Unwind_Exception*) 9 0x7fff51253ad6 _objc_exception_destructor(void*) 10 0x10e540b4f NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool) 11 0x10e5925f4 -[TNSRuntime executeModule:referredBy:] 12 0x10de32db3 main 13 0x7fff520ce1fd start 14 0x1 JS Stack:

The only way to get it working again is changing any file (not necessarily the one I was editing before) so that webpack can run a second time. Now it works fine again. I always have to do 2 changes for the app to work.

Versions: (latest versions because I just created it 5 minutes ago via CLI):
tns-cli: 6.8.0
tns-ios: 6.5.0
angular/core: 9.1.0
ngtools/webpack: 9.1.0
nativescript-dev-webpack: 1.5.0

Source