Angular 2 registerElement XML not setting property

[giovannicandido]

I guess that the xml with angular2 is not setting the accessToken property:

<GridLayout rows="auto, *">
     <Map #map
          row="1"
          accessToken="bla"
          latitude="52.3702160"
          longitude="4.8951680"
          zoomLevel="3"
          showUserLocation="true"
          hideAttribution="false",
          hideLogo="false",
          hideCompass="false"
          (mapReady)="onMapReady($event)">
      </Map>
</GridLayout>

registerElement("Map", () => require("nativescript-mapbox").Mapbox)

The map load in black with the message: Please set the 'accessToken' property because now the map will be entirely black :)

[giovannicandido]

Maybe some progress:

registerElement("Map", () => require("nativescript-mapbox"))

<Map:Mapbox #map
          row="1"
          accessToken="bla"
          latitude="52.3702160"
          longitude="4.8951680"
          zoomLevel="3"
          showUserLocation="true"
          hideAttribution="false",
          hideLogo="false",
          hideCompass="false"
          >
      </Map:Mapbox>

But now there is no map (blank screen)

[giovannicandido]

The second approach works on android, not work on IOS.

Don't know if is related:

Class PLBuildVersion is implemented in both /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/AssetsLibraryServices.framework/AssetsLibraryServices (0x11bac5910) and /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/PhotoLibraryServices.framework/PhotoLibraryServices (0x11b8ef210). One of the two will be used. Which one is undefined.
Oct 23 14:37:36 Giovannis-iMac cdsmobile[24470]: assertion failed: 16A323 14A345: libxpc.dylib + 62597 [37A9DF49-35C1-3D93-B854-B35CACF0100F]: 0x7d

[EddyVerbruggen]

Unfortunately that's a useless stacktrace (as usual on iOS). Can you try tns platform remove ios && tns platform add ios?

[giovannicandido]

Correction the first approach works on android.

Removing and adding ios do not work

Example project: https://github.com/giovannicandido/tns-example

[jericdeleon]

I ran @giovannicandido's example; besides the above logs, there was a failed http call logged on my run:

Nov 6 09:56:06 Jerics-MacBook-Pro tnsexample[5338]: CONSOLE INFO file:///app/app.component.js:17:21: AfterViewInit
Nov 6 09:56:06 Jerics-MacBook-Pro tnsexample[5338]: CONSOLE LOG file:///app/tns_modules/@angular/core/bundles/core.umd.js:133:20: Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
Nov 6 09:56:07 Jerics-MacBook-Pro tnsexample[5338]: [ERROR] {}[Setup]: loading style failed: HTTP status code 401

[giovannicandido]

@lorcanfurey The log don't say what file is missing but I suspect that is the side-drawer-content.css (should be copied as side-drawer-content.platform.css to side-drawer-content.css)

I going to check on that

[EddyVerbruggen]

Make sure you're not using properties on the map component that are not explicitly listed in the readme (so stuff like id, row, etc need to go). You can control layout by wrapping the component in a ContentView like this:

<Page id="page" 
    xmlns="http://schemas.nativescript.org/tns.xsd" 
    xmlns:map="nativescript-mapbox" 
    xmlns:FAB="nativescript-floatingactionbutton" loaded="loaded">
    <StackLayout height="100%">
        <ContentView height="100%">
            <map:Mapbox
                latitude="39.8282" 
                longitude="-98.5795" 
                accessToken="your-key">
            </map:Mapbox>
        </ContentView>
    </StackLayout>
</Page>

[EddyVerbruggen]

Btw, you'll want to update to 2.2.3 as there was a little bug in the previous version for showing XML maps on iOS when not using the delay property. My previous comment is still true though.