Error while trying to use plugin

[darmie]

Node v4.2.1 NPM v2.14.7

Both ionicons.css and ionicons.ttf are on the root page. This is my app.modul.ts

import { NgModule } from "@angular/core";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NativeScriptHttpModule } from "nativescript-angular/http";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { NativeScriptModule } from "nativescript-angular/platform";

import {AppComponent } from "./app.component";
import { routes, navigatableComponents } from "./app.routing";

import {TNSFontIconService, TNSFontIconPipe} from 'nativescript-ng2-fonticon';

@NgModule({
    imports: [
      NativeScriptModule,
      NativeScriptFormsModule,
      NativeScriptHttpModule,
      NativeScriptRouterModule,
      NativeScriptRouterModule.forRoot(routes)
    ],
    declarations: [
      AppComponent,
      ...navigatableComponents,
      TNSFontIconPipe
    ],
    bootstrap: [AppComponent],
    providers: [{
    provide: TNSFontIconService,
    useFactory: () => {
        return new TNSFontIconService({
            'ion': 'ionicons.css'
        })
    }
}],
})

export class AppModule {}

my component login.component.ts

import {Component, ElementRef, OnInit, ViewChild} from "@angular/core";
import { Page } from "ui/page";
import textField = require("ui/text-field");
import view = require("ui/core/view");
import {Color} from "color";
import app = require("application");
import platform = require("platform");
import observable = require("data/observable");
import {TNSFontIconService, TNSFontIconPipe} from 'nativescript-ng2-fonticon';

@Component({
  selector: "my-app",
  templateUrl: "templates/login.component.html",
  styleUrls: ["./templates/login.css"]
  //pipes: [TNSFontIconPipe]
})

export class LoginComponent implements OnInit{
  constructor(private page: Page, private fonticon: TNSFontIconService) {}
  ngOnInit() {
      this.page.actionBarHidden = true;
      this.page.backgroundSpanUnderStatusBar = true;

      this.page.backgroundImage = "~/assets/BackgroundLogin_dull.jpg";
      var color = new Color("#CCCCCC").android;

      //Email
      var email = <textField.TextField>this.page.content.getViewById("email");
      email.backgroundColor = new Color("transparent");
      email.android.setHintTextColor(color);

      //Password
      var pass = <textField.TextField>this.page.content.getViewById("password");
      pass.android.setHintTextColor(color);
      pass.backgroundColor = new Color("transparent");
    }
}

my XML

<StackLayout>
  <Image src="~/assets/logo_stack-login4.png" scale="aspectFit"  horizontalAlignment="center"></Image>
  <GridLayout row="0" col="0" rows="auto auto auto auto auto">
    <DockLayout class="textBox" col="0" row="1">
      <GridLayout row="0" col="0" rows="auto auto">
        <Label row="1" col="0" class="ion" [text]="'ion-android-person' | fonticon"></Label>
        <TextField  row="1" col="1" id="email" hint="Email Address" keyboardType="email" autocorrect="false" autocapitalizationType="none"></TextField>
      </GridLayout>
    </DockLayout>
    <DockLayout class="textBox" col="0" row="2">
      <GridLayout row="0" col="0" rows="auto auto">
        <Label col="0" row="1" text="HELLO2"></Label>
        <TextField col="1" row="2" id="password" hint="Password" secure="true"></TextField>
      </GridLayout>
    </DockLayout>
    <DockLayout col="0" row="3">
      <Button class="submit-button" text="Login"></Button>
    </DockLayout>
  </GridLayout>

</StackLayout>

I am getting this error

JS: EXCEPTION: Uncaught (in promise): TypeError: Cannot read property 'toLowerCase' of undefined
JS: ORIGINAL STACKTRACE:
JS: Error: Uncaught (in promise): TypeError: Cannot read property 'toLowerCase' of undefined
JS:     at resolvePromise (/data/data/org.nativescript.Bau/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:416:31)
JS:     at /data/data/org.nativescript.Bau/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:452:17
JS:     at ZoneDelegate.invokeTask (/data/data/org.nativescript.Bau/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:223:37)
JS:     at Object.inner.inner.fork.onInvokeTask (/data/data/org.nativescript.Bau/files/app/tns_modules/@angular/core/bundles/core.umd.js:6220:41)
JS:     at ZoneDelegate.invokeTask (/data/data/org.nativescript.Bau/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:222:42)
JS:     at Zone.runTask (/data/data/org.nativescript.Bau/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:123:47)
JS:     at drainMicroTaskQueue (/data/data/org.nativescript.Bau/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:355:35)
JS: Unhandled Promise rejection: Cannot read property 'toLowerCase' of undefined ; Zone: angular ; Task: Promise.then ; Value: TypeError: Cannot read property 'toLowerCase' of undefined TypeError: Cannot read property 'toLowerCase' of undefined
JS:     at cleanValue (/data/data/org.nativescript.Bau/files/app/tns_modules/nativescript-ng2-fonticon/src/app/services/fonticon.service.js:61:45)
JS:     at TNSFontIconService.mapCss (/data/data/org.nativescript.Bau/files/app/tns_modules/nativescript-ng2-fonticon/src/app/services/fonticon.service.js:70:29)
JS:     at /data/data/org.nativescript.Bau/files/app/tns_modules/nativescript-ng2-fonticon/src/app/services/fonticon.service.js:51:23
JS:     at ZoneDelegate.invoke (/data/data/org.nativescript.Bau/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:190:28)
JS:     at Object.inner.inner.fork.onInvoke (/data/data/org.nativescript.Bau/files/app/tns_modules/@angular/core/bundles/core.umd.js:6229:41)
JS:     at ZoneDelegate.invoke (/data/data/org.nativescript.Bau/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:189:34)
JS:     at Zone.run (/data/data/org.nativescript.Bau/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:83:43)
JS:     at /data/data/org.nativescript.Bau/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:449:57
JS:     at ZoneDelegate.invokeTask (/data/data/org.nativescript.Bau/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:223:37)
JS:     at Object.inner.inner.fork.onInvokeTask (/data/data/org.nativescript.Bau/files/app/tns_modules/@angular/core/bundles/core.umd.js:6220:41)
JS: Error: Uncaught (in promise): TypeError: Cannot read property 'toLowerCase' of undefined

I get a blank label

[NathanWalker]

Please try 1.3.2 just published now if you are still having trouble. Note new usage guide for TNSFontIconModule in readme, for example in your NgModule:

imports: [
  NativeScriptModule,
  TNSFontIconModule.forRoot({
    'fa': 'font-awesome.css'
  })
]

[heese]

The plug-in parses the CSS file and looks for rules containing :before and then looks for the property content. The original file ionicons.css has a rule at the beginning setting some defaults for all icons. This rule does not contain the property content. The plugin does not check if val.split('content:') has actually a value at position 1 of the resulting array. This basically breaks the plug-in. I removed all icon-specific selectors from the CSS file (e.g., .ion-android-bulb:before). Then the plugin is able to parse the file.

@NathanWalker A simple if condition skipping rules not having a property content would fix this :-) This should be line 71 in fonticon.service.ts

[hypery2k]

any PR is welcome for this

[EddyVerbruggen]

Ionicons adds the same "bloat", but I prefer just cleaning those files up. Less code to ship and run.