update to Nativescript 3

[moayadnajd]

first error is Property 'resources' does not exist

[AdamDenoon]

Same here:

tns --version
3.0.3

iOS Error: JS ERROR TypeError: undefined is not an object (evaluating 'application.resources['fonticon'] = fonticon')

Android Error:

TypeError: Cannot set property 'fonticon' of undefined
File: "file:///<app.js>, line: 14, column: 34

Offending line: application.resources['fonticon'] = fonticon;

Offending part of line: application.resources['fonticon']<

Application.resources no longer has 'fonticon' as a property.

EDIT: I just upgraded to NativeScript 3.0.3, and that's when it stopped working.

[AdamDenoon]

Output of console.dir(application) yields:

=== dump(): dumping function and properties names ===
JS: Observable()
JS: hasLaunched()
JS: getResources()
JS: setResources()
JS: on()
JS: off()
JS: notify()
JS: hasListeners()
JS: setApplication()
JS: livesync()
JS: setCssFileName()
JS: getCssFileName()
JS: addCss()
JS: AndroidApplication()
JS: start()
JS: getMainEntry()
JS: getNativeApplication()
JS: getOrientation()
JS: === dump(): finished ===

This tells me that the new way to set the resources for the application is to use the setResources() method.

To fix this issue, replace application.resources['fonticon'] = fonticon; with application.setResources(fonticon);

[wiliarko]

How do i access that fonticon?

<Label text="{{ sp_icon | fonticon }}" class="ion" style="font-size:30;" /> JS: Cannot find function or filter: fonticon

[AdamDenoon]

I had the same problem. I just ensured I had "fa" listed as a class on my XML element, then loaded the icon via JS:

<Button id="next-button" class="fa" text="" onTap="callAction" />

var fonticon = application.getResources(fonticon);
. . .
var nextButton = page.getViewById("next-button");
nextButton.text = fonticon('fa-chevron-right');

[Aris-ngoy]

i am having the same problem even after creating a new project it isnt working on ns 3.0.3 tsc or js but on angular is working fine

[moayadnajd]

hi all i fixed the first issue by edit the app.ts code as below

var resources = application.getResources(); resources['fonticon'] = fonticon; resources['isActive'] = isActive; application.setResources(resources); as @AdamDenoon mentioned

[uzarsalan]

What variable isActive?

[AdamDenoon]

@uzarsalan That variable is unrelated to the issue and fonticon in general.

[madsongr]

I have the same issue and I get no errors after using @moayadnajd ´s answer but my icons are not displayed:

app.ts:

import  * as application from 'application';
import {TNSFontIcon, fonticon} from 'nativescript-fonticon';

//TNSFontIcon.debug = true;
TNSFontIcon.paths = {
  'fa': 'font-awesome.css',
  'ion': 'ionicons.css'
};
TNSFontIcon.loadCss();

var resources = application.getResources();
resources['fonticon'] = fonticon;
application.setResources(resources);

application.start({ moduleName: 'main-page' });

app.css:

.fa {
    font-family: FontAwesome, fontawesome-webfont;
    font-size:60;
  }

.ion {
   font-family: Ionicons, ionicons;
   font-size:60;
}

main-page.xml:

<GridLayout rows="auto auto" columns="50 *">
    <Label class="fa" text="{{'fa-user' | fonticon}}" row="0" col="0" horizontalAlignment="center" verticalAlignment="center"/>
    <TextField hint="Email" keyboardType="email" autocorrect="false" autocapitalizationType="none" row="0" col="1"/>

    <Label class="fa" text="{{'fa-lock' | fonticon}}" row="1" col="0" horizontalAlignment="center" verticalAlignment="center"/>
    <TextField hint="Pass" secure="true" row="1" col="1"/>
</GridLayout>

[madsongr]

Solved. It was missing import application = require('application');