Fails to load plugin in Angular NS 5.4+ "Events name(s) must be string."

[tomfaltesek]

I have included the require("nativescript-platform-css") within the main.ts file. When I try to run the application an exception is thrown in the plugin (line 94).

// Setup Events
Page.on(Page.navigatingToFirst, setDevice); // Exception is thrown here (line 94).
Page.on(Page.showingModallyFirst, setDevice);

Exception:

JS ERROR TypeError: Events name(s) must be string.
(CoreFoundation) *** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: TypeError: Events name(s) must be string.

When I debug, the value of Page.navigatingToFirst is undefined. I'm not quite sure what the root of this issue is.

I am able to get the plugin to work by manually updating the event setup code in platformcss.js from this:

// Setup Events
Page.on(Page.navigatingToFirst, setDevice);
Page.on(Page.showingModallyFirst, setDevice);

To this:

// Setup Events
Page.on(Page.navigatingToEvent, setDevice);

Is that other event no longer available in the latest NS?

[tomfaltesek]

It's looking like this is an issue with the nativescript-globalevents node module. Before the gloablevents.js extends the Page object with all of the events and the on() method, it first checks to see if the on() method already exits on the Page object. Well, the on() method does exist on the Page object now, so none of the First events are being defined.

if (page.Page.on || page.Page.addEventListener) {
    console.log("NativeScript-globalevents auto disabled; functionality appears to be already present!");
} else {
  // Extend the Page object with the new events...
}

I'll open an issue in the nativescript-globalevents repo and we'll see how we can proceed.

[tomfaltesek]

Before we bother updating the nativescript-globalevents repo, is there a good reason for binding the setDevice() function to these particular events:

// Setup Events
Page.on(Page.navigatingToFirst, setDevice);
Page.on(Page.showingModallyFirst, setDevice);

Are those the only appropriate events for binding? Should we consider different events?

[NathanaelA]

I'm also the author of the ns-globalevents. So dropping this over there is fine. :) Those events need to be bound to for the css to be updated properly...

[NathanaelA]

@tomfaltesek - I tested Global Events & Platform-css this last week in a NS 6.0 Core demo; and everything is working correctly. Can you make sure that you are requiring the Platform CSS at the very top (or as the first require) in the app.js/main.js. It appears that Angular might be the source of the issue. I'd be curious to know that if it is first if it works properly..

[tomfaltesek]

@NathanaelA - Yeah, even when require("nativescript-platform-css"); is the first line of my main.ts file I get the following output during runtime:

CONSOLE INFO file:///app/vendor.js:91398:36: HMR: Hot Module Replacement Enabled. Waiting for signal.
CONSOLE LOG file:///app/vendor.js:92006:16: NativeScript-globalevents auto disabled; functionality appears to be already present!
***** Fatal JavaScript exception - application has been terminated. *****
Native stack trace:
1   0x10ea225ff NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool)
2   0x10ea66675 -[TNSRuntime executeModule:referredBy:]
3   0x10e43e1f3 main
4   0x1133a6541 start
5   0x1
...
JavaScript error:
file:///app/vendor.js:110946:66: JS ERROR TypeError: Events name(s) must be string.
(CoreFoundation) *** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: TypeError: Events name(s) must be string.
at
1   addEventListener@file:///app/vendor.js:110946:66
2   on@file:///app/vendor.js:110935:30
3   customAddEventListener@file:///app/vendor.js:83197:33
4   ../node_modules/nativescript-platform-css/platformcss.js@file:///app/vendor.js:92852:8
5   __webpack_require__@file:///app/runtime.js:751:34
6   fn@file:///app/runtime.js:121:39
...

For a hacky fix, I've temporarily added these lines to my main.ts file:

// Temporary fix for 'nativescript-platform-css' plugin.
(<any>Page).navigatingToFirst = "navigatingTo";
(<any>Page).showingModallyFirst = "showingModally";

[NathanaelA]

Thanks -- I'll have to play with Angular as see what it is doing.