The pipe 'fonticon' could not be found

[drosi94]

Hello guys, with angular 4.1.0 and nativescript 3.1.3, i got this

JS: Loading collection 'fa' from file: ./assets/font-awesome.css
JS: Angular is running in the development mode. Call enableProdMode() to enable the production mode.
JS: ERROR Error: Uncaught (in promise): Error: Template parse errors:
JS: The pipe 'fonticon' could not be found ("<GridLayout>
JS:     <label class="fa" te[ERROR ->]xt="{{'fa-address-book-o' | fonticon}}"></label>
JS:     <GridLayout #background
JS:                 scaleX=""): ng:///data/data/com.live2night.io/files/app/app/+auth/components/login/login.component.html@1:24
JS: Error: Template parse errors:

i have inject the service to constructor and in app.module

    TNSFontIconModule.forRoot({
            'fa': './assets/font-awesome.css'
        }),

``.

[drosi94]

i guess is the same as #14

[Sharique-Hasan]

Any progress regarding this?

[hypery2k]

can you post your complete app.module?

[Sharique-Hasan]

I am using NathanWalker's angular-seed-advanced: this is my component.module.ts

import { NativeScriptModule } from 'nativescript-angular/nativescript.module';
import { NativeScriptFormsModule } from 'nativescript-angular/forms';
import { NativeScriptHttpModule } from 'nativescript-angular/http';
import { NativeScriptRouterModule } from 'nativescript-angular/router';
import { Http } from '@angular/http';

// import { TNSFontIconPipe } from 'nativescript-ngx-fonticon/src/app/pipes';
import { TNSFontIconModule, TNSFontIconService } from 'nativescript-ngx-fonticon';

// angular
import { NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';

// libs
import { TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

// app
import { AppComponent } from './app/components/app.component';
import { AboutComponent } from './app/components/about/about.component';
import { HomeComponent } from './app/components/home/home.component';
import { RegistrationComponent } from './app/components/registration/registration.component';
import { LanguageSelectionComponent } from './app/components/registration/language-selection.component';
import { GameShowAisayChalygaComponent } from './app/components/gameshowAisayChalyga/gameshowAisayChalyga.component';
import { DatePickerComponent } from './app/components/datepicker/datepicker.component';
import { CountrySelectionComponent } from './app/components/countrySelection/countrySelection.component';
import { routes } from './app/components/app.routes';
import { TNSFontIconPipe } from './app/modules/core/index';

// feature modules
import { CoreModule } from './app/modules/core/core.module';
import { AnalyticsModule } from './app/modules/analytics/analytics.module';
import { MultilingualModule, translateLoaderFactory } from './app/modules/i18n/multilingual.module';
import { SampleModule } from './app/modules/sample/sample.module';
import { ConsoleService, ConsoleTarget, LogLevel } from './app/modules/core/index';

// intermediate component module
// helps encapsulate custom native modules in with the components
// note: couple ways this could be done, just one option presented here...
@NgModule({
  imports: [
    AnalyticsModule,
    TNSFontIconModule.forRoot({
      'xicon': './assets/icons/xicons.css'
    }),
    CoreModule,
    MultilingualModule.forRoot([{
      provide: TranslateLoader,
      deps: [Http],
      useFactory: (translateLoaderFactory)
    }]),
    SampleModule,
    NativeScriptModule,
    NativeScriptFormsModule,
    NativeScriptHttpModule,
    NativeScriptRouterModule

  ],
  entryComponents: [
    DatePickerComponent,
    CountrySelectionComponent
  ],
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent,
    RegistrationComponent,
    LanguageSelectionComponent,
    GameShowAisayChalygaComponent,
    DatePickerComponent,
    CountrySelectionComponent
  ],
  schemas: [
    NO_ERRORS_SCHEMA,
    CUSTOM_ELEMENTS_SCHEMA
  ],
  exports: [
    MultilingualModule,
    AppComponent,
    AnalyticsModule,
    CoreModule,
    SampleModule,
    NativeScriptModule,
    NativeScriptFormsModule,
    NativeScriptHttpModule,
    NativeScriptRouterModule,
  ]
})
export class ComponentsModule { }

// For AoT compilation to work:
export function cons() {
  return console;
}

export function consoleLogTarget(service: ConsoleService) {
  return new ConsoleTarget(service, { minLogLevel: LogLevel.Debug });
}

[Sharique-Hasan]

This is my native.module.ts:

// nativescript
import {
  NativeScriptRouterModule,
  RouterExtensions as TNSRouterExtensions
} from 'nativescript-angular/router';
import { SegmentedBarItem } from 'tns-core-modules/ui/segmented-bar';
import { TNSFontIconModule, TNSFontIconService } from 'nativescript-ngx-fonticon';

// angular
import { NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';

// libs
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';

// app
import {
  WindowService,
  StorageService,
  ConsoleService,
  RouterExtensions,
  AppService,
  TNSFontIconPipe
} from './app/modules/core/index';

//nativescript-telerik-ui

import { AppComponent } from './app/components/app.component';
import { routes } from './app/components/app.routes';

// feature modules
import { CoreModule } from './app/modules/core/core.module';
import { AppReducer } from './app/modules/ngrx/index';
import { MultilingualEffects } from './app/modules/i18n/index';
import { SampleEffects } from './app/modules/sample/index';
import { ComponentsModule, cons, consoleLogTarget } from './components.module';

// {N} custom app specific
import { WindowNative, StorageNative, NSAppService } from './mobile/core/index';
import { NS_ANALYTICS_PROVIDERS } from './mobile/analytics/index';

import { NativeScriptSvgModule } from 'nativescript-svg/angular';
import { NativeScriptUIListViewModule } from 'nativescript-pro-ui/listview/angular';
import { NativeScriptUIAutoCompleteTextViewModule } from 'nativescript-pro-ui/autocomplete/angular';

/**
 * Config
 * Seed provided configuration options
 */
import { Config, LogTarget } from './app/modules/core/index';
import { Page } from 'ui/page';
// import { DatePicker } from 'tns-core-modules/ui/date-picker';
// import {
//   ModalDialogService,
//   ModalDialogParams,
//   ModalDialogOptions
// } from 'nativescript-angular/directives/dialogs';
Config.PageClass = Page;
// Config.ModalDialogService = ModalDialogService;
// Config.ModalDialogParams = ModalDialogParams;
// Config.ModalDialogOptions = ModalDialogOptions;
// Config.DatePicker = DatePicker;

// (required) platform target (allows component decorators to use the right view template)
Config.PLATFORM_TARGET = Config.PLATFORMS.MOBILE_NATIVE;

// (optional) log level - defaults to no logging if not set
Config.DEBUG.LEVEL_4 = true;

import { Languages, LanguageViewHelper } from './app/modules/i18n/index';

// helper for SegmentedBar view bindings in lang-switcher shared component
export function segmentViewHelper(languages) {
  let segmentItems = [];
  for (let lang of languages) {
    // {N} requires items to be SegmentedBarItem class
    let item = new SegmentedBarItem();
    item.title = lang.title;
    (<any>item).code = lang.code;
    segmentItems.push(item);
  }
  return segmentItems;
}

@NgModule({
  imports: [
    NativeScriptUIAutoCompleteTextViewModule,
    NativeScriptUIListViewModule,
    NativeScriptSvgModule,
    CoreModule.forRoot([
      { provide: WindowService, useClass: WindowNative },
      { provide: StorageService, useClass: StorageNative },
      { provide: ConsoleService, useFactory: (cons) },
      { provide: LogTarget, multi: true, deps: [ConsoleService], useFactory: (consoleLogTarget) }
    ]),
    ComponentsModule,
    NativeScriptRouterModule.forRoot(<any>routes),
    StoreModule.provideStore(AppReducer),
    EffectsModule.run(MultilingualEffects),
    EffectsModule.run(SampleEffects)

  ],
  providers: [
    NS_ANALYTICS_PROVIDERS,
    { provide: RouterExtensions, useClass: TNSRouterExtensions },
    { provide: AppService, useClass: NSAppService },
    // i18n
    { provide: Languages, useValue: Config.GET_SUPPORTED_LANGUAGES() },
    { provide: LanguageViewHelper, deps: [Languages], useFactory: (segmentViewHelper) }
  ],
  schemas: [
    NO_ERRORS_SCHEMA,
    CUSTOM_ELEMENTS_SCHEMA
  ],
  bootstrap: [AppComponent]
})
export class NativeModule { }

[erikhofer]

@Sharique-Hasan did you solve this?

[snapnurse-joshuamatthews]

I am seeing the same issue

[NathanWalker]

You will need to also import TNSFontIconModule (without .forRoot) into your SharedModule which is imported into your various modules which may declare components. This ensures that the fonticon pipe is made available and shared across your various modules which declare their own components.

[snapnurse-joshuamatthews]

@NathanWalker Why TranslateModule? Isn't the pipe contained in TNSFontIconModule?

When I include TNSFonticonModule in my shared module all errors go away, but the pipe isn't returning any unuicode for the icon either.

[janineg]

I was also getting an error of "the 'pipe' fonticon could not be found" when I had the code to configure the TNSFontIconModule in my CoreModule. After moving it out of CoreModule and into my AppModule.ts file, I was able to compile the app. Hope this helps!

Here's my AppModule code which now works (along with injecting the service into the root component).

import { NgModule } from '@angular/core';

// app import { CoreModule } from './modules/core/core.module'; import { AppRoutingModule } from './app.routing'; import { AppComponent } from './app.component'; import { LayoutComponent } from './modules/layout/layout.component'

import { TNSFontIconModule, TNSFontIconService } from 'nativescript-ngx-fonticon'; //TNSFontIconService.debug = true;

@NgModule({ imports: [ CoreModule, AppRoutingModule, // font icons TNSFontIconModule.forRoot({ 'fa': './assets/font-awesome.css', 'mdi': './assets/material-design-icons.css', 'ion': './assets/ionicons' }) ], declarations: [AppComponent, LayoutComponent], bootstrap: [AppComponent] }) export class AppModule { }

[jvelezc]

a working example exist here: https://github.com/jvelezc/AutoLoanCalculatorNativeScript @drosi94

[benjaminhorner]

I am seeing the same issue.

Here is my app.module

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NativeScriptHttpModule } from "nativescript-angular/http";
import { HttpClient } from '@angular/common/http';

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { AppRoutingModule } from "./app.routing";
import { AppComponent } from "./app.component";

import { TNSFontIconModule, TNSFontIconService } from 'nativescript-ngx-fonticon';
TNSFontIconService.debug = true;

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http);
}

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        NativeScriptFormsModule,
        NativeScriptHttpModule,
        TranslateModule.forRoot({
            loader: {
              provide: TranslateLoader,
              useFactory: HttpLoaderFactory,
              deps: [HttpClient]
          }
        }),
        TNSFontIconModule.forRoot({
          'mdi': 'material-design-icons.css'
        }),
        AppRoutingModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
/*
Pass your application module to the bootstrapModule function located in main.ts to start your app
*/
export class AppModule { }

I also have an routing.module:

import { LoginComponent } from "./pages/login/login.component";
import { LoadingComponent } from "./pages/loading/loading.component";

export const routes = [
  { path: "", component: LoginComponent },//LoginComponent
  { path: "loading", component: LoadingComponent }
];

export const navigatableComponents = [
  LoginComponent,
  LoadingComponent
];

If I followed @janineg 's advice but I still get the error… Any suggestions?

[benjaminhorner]

I actually solved this by doing something contrary to what was suggested: I removed the TNSFontIconModule & TNSFontIconService from my app.module and placed all that code in my routing.module… and it fixed it. Not sure why but it works.

[marcocasadio]

I've the same problem. I tried also to install TranslateModule but I've the same issue. Anyone can help me?

[NathanWalker]

@snapnurse-joshuamatthews you were correct, sorry about that - def TNSFontIconModule 👍

closing this as the solution is to always use TNSFontIconModule.forRoot(... once either in your app's CoreModule or in the AppModule. Then to also include just TNSFontIconModule in a SharedModule.