Error: ActionItem is not a valid View instance

Question

I have the following template:

<Page.actionBar>
    <ActionBar title="Modules" automationText="ActionBar">
        <NavigationButton icon="res://back_btn" tap="goBack" automationText="GoBack"></NavigationButton>
        <Android>
            <ActionItem id="exampleMenuButton" icon="res://menu" automationText="ExampleMenu"></ActionItem>
        </Android>
        <iOS>
            <ActionItem id="exampleMenuButton" ios.position="right" automationText="ExampleMenu">
                <ActionItem.actionView>
                    <Image src="res://menu" width="22" height="22" margin="0, -11, 0, 11"></Image>
                </ActionItem.actionView>
            </ActionItem>
        </iOS>
    </ActionBar>
</Page.actionBar>

Which comes from nativescript-marketplace-demo. First I had to change tags to be not self-closed, because of Only void and foreign elements can be self closed "NavigationButton"-like errors and now get the error seen below, why?

CONSOLE ERROR file:///app/vendor.js:1688:24: ERROR Error: Uncaught (in promise): Error: ActionItem is not a valid View instance.
_addView@file:///app/vendor.js:77124:28 [angular]
addChild@file:///app/vendor.js:79138:22 [angular]
insertChild@file:///app/vendor.js:58553:32 [angular]
appendChild@file:///app/vendor.js:57775:38 [angular]
appendChild@file:///app/vendor.js:13726:34 [angular]
createElement@file:///app/vendor.js:9925:33 [angular]
createViewNodes@file:///app/vendor.js:12532:57 [angular]
callViewAction@file:///app/vendor.js:12944:28 [angular]
execComponentViewsAction@file:///app/vendor.js:12883:27 [angular]
createViewNodes@file:///app/vendor.js:12601:29 [angular]
createRootView@file:///app/vendor.js:12479:20 [angular]
callWithDebugContext@file:///app/vendor.js:13610:47 [angular]
create@file:///app/vendor.js:10415:60 [angular]
createComponent@file:///app/vendor.js:10615:68 [angular]
activateOnGoForward@file:///app/vendor.js:48567:70 [angular]
activateWith@file:///app/vendor.js:48553:37 [angular]
placeComponentIntoOutlet@file:///app/vendor.js:23184:28 [angular]
activateRoutes@file:///app/vendor.js:23165:50 [angular]
file:///app/vendor.js:23101:72 [angular]
forEach@[native code] [angular]
activateChildRoutes@file:///app/vendor.js:23101:36 [angular]
activate@file:///app/vendor.js:23075:33 [angular]
file:///app/vendor.js:22692:30 [angular]
file:///app/vendor.js:230:25 [angular]
...

Answer 1

The XML template you attempted to use is a PAN (Plain Awesome NativeScript) file, not a NAN (NativeScript ANgular) file.

This is actually very critical to understand, some things work only in PAN and somethings only work in NAN. They are written very similar, but there are several key differences...

For example in PAN it is tagged as a .XML file, in NAN it is normally tagged as a HTML file. In PAN, you have the Page tag, in NAN, you normally skip the Page tag and use the Router tag. In PAN all your tags can optionally be self closed. In NAN, all tags better not be self closed at all.

In PAN all events are treated like any other property in the xml file; i.e. tap="goback". is the same as label="hi" In NAN, that tap event should be written as (tap)="goback()"

These are only a few of the differences, there are many others that make the two formats incompatible with each other without you making changes to the screen.

Since it appears you are attempting to learn NAN, I would recommend you checkout the https://github.com/NativeScript/sample-Groceries/ example application. This APP is fully written in NAN.

In addition the http://docs.nativescript.org has full documentation for both PAN and NAN apps.