travelist / angular2-fontawesome Goto Github PK

Not sure what I'm doing wrong but It's not recognizing the fa directive. On an Angular 5 app (soon to be upgraded to NG 6)

 <fa *ngIf="!weatherData"
        [name]="'spinner'"
        [spin]=true
    ></fa>

Full Code Available Here

It says

'fa' is not a known element:
1. If 'fa' is an Angular component, then verify that it is part of this module.

In my app.module.ts I have

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { NgModule } from '@angular/core';
import { Angular2FontawesomeModule } from 'angular2-fontawesome/angular2-fontawesome';

import { AppComponent } from './app.component';
import { TemperaturePipe } from './temperature.pipe';
import { WeatherService } from './services/weather.service';

@NgModule({
  declarations: [
    AppComponent,
    TemperaturePipe
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    Angular2FontawesomeModule
  ],
  providers: [ WeatherService ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Hi,

Any plan to support fontawesome v5 ?

https://github.com/FortAwesome/Font-Awesome

Thanks.

Hi guys,

I got this errors:

./~/angular2-fontawesome/src/index.ts
Module build failed: Error: ENOENT: no such file or directory, open '/node_modules/angular2-fontawesome/src/index.ts'  at Error (native)
 @ ./~/angular2-fontawesome/angular2-fontawesome.js 2:14-36

Uncaught Error: Cannot find module "./src/index"

Any ideia how to fix it?

Thanks a lot!

Hey,

I've gotten some problems when building my app. It can't run the ts-loader in my webpack.config.js, it works on my windows machine but not on ubuntu so that's just weird :P but anyway the problem is that angular2-fontawesome gets put in my dist folder in a node_modules map because it tries to build it ( I think )
I found that its not good to have both .d.ts and .ts files in the same folders but I'm not sure this is the problem.
microsoft/TypeScript#10704

ts-loader: Using [email protected] and /usr/src/app/client/tsconfig.json

stream.js:74
      throw er; // Unhandled stream error in pipe.
      ^
Error: ./~/angular2-fontawesome/angular2-fontawesome.ts
Module build failed: Error: Typescript emitted no output for /usr/src/app/node_modules/angular2-fontawesome/angular2-fontawesome.ts
    at Object.loader (/usr/src/app/node_modules/ts-loader/index.js:456:15)
 @ ./client/app/components/app.module.ts 63:29-81

Any help would be appreciated :)

If our application is built with angular-cli, the configuration is done with the following:

Install into project folder with:
npm install font-awesome --save

Modify the angular-cli.json file and in the styles section add:
"../node_modules/font-awesome/css/font-awesome.css"

Continue to modify the angular-cli.json file in the addons section add:
"../node_modules/font-awesome/fonts/*.+(otf|eot|svg|ttf|woff|woff2)"

Use fontawsome in html, like in app.component.html:
<i class="fa fa-american-sign-language-interpreting fa-5x" aria-hidden="true"> </i>

ng build
ng serve

Hi,

I am getting below error while NPM Install

C:\Users\krishma2\Documents\Visual Studio 2015\Projects\A2NetDemo\A2NetDemo>npm
install
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher
to avoid a RegExp DoS issue
npm ERR! Unexpected end of input at 1:51422
npm ERR! :"~0.4.0","bluebird":"~2.9.21"},"directories":{},"dist":{"shasum":"55
npm ERR! ^

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\krishma2\AppData\Roaming\npm-cache_logs\2017-07-07T12_44_
48_755Z-debug.log

NOTE : My current minimatch version is 5.0.4
I don't know what is the exact issue.

I am using Package.json from Quickstart-Master

Please help to fix on this .

I am trying to follow the readme using the latest quickstart version of angular 2 but cannot get things to work

Angular2 QuickStart > package.json and systemjs.config.js instructions are clear and seem to work fine
Usage > app.module.ts instructions are clear and seem to work fine

Usage > sample template instructions do not seem to work

1. Syntax on the following seems wrong as there is a closing tag at the end of the first line

let sampleTemplate = `
<fa [name]="rocket" [border]=true></i>
<i fa [name]="rocket" [border]=true></i>
`

2. How do the css and font directories get copied to the output? I can see instructions for angular-cli but nothing relevant to system.js (is there an extra step that needs to be done?)

3. I do not get what the "We can also use FaDirective if we want." means as there is no example on how to import or use a FaDirective.

4. By using the following sampleTemplate

let sampleTemplate = `
<fa [name]="rocket" [border]=true></fa>
<i fa [name]="rocket" [border]=true></i>
`

I get the following outcome

<fa ng-reflect-border="true">
  <i ng-reflect-ng-class="fa,fa-undefined,fa-border" class="fa fa-undefined fa-border"></i>
</fa>
<i fa="" class="fa fa-undefined fa-border" ng-reflect-border="true"></i>

Cheers
Nikos

changes to the value bound to [name] don't update the glyph. Neither the directive nor component version show the change.

I am using angular 5 in chrome.

Hi,

In angular2-fontawesome 0.8.0 with Angular 2.4.1., the AOT build fails for me due to the following:

fa.component.ts template refers to classList variable which is private, needs to be public for AOT to work.
fa.directive.ts private member variables name -> inverse all also need to be public for AOT to work.

Thanks,
Piyush

Hello,

Could you please check whether this project requires an update for angular5? When I've tried to update a project to angular5, I got a warning for it:

npm WARN [email protected] requires a peer of @angular/common@^4.0.0 but none was installed.
npm WARN [email protected] requires a peer of @angular/core@^4.0.0 but none was installed.

Thanks

I was trying to follow the docs, but it seems that the "directives" attribute of the @component decorator has been deprecated. So what I ended up doing was:

I added the mapping and the package into a systemjs.config.js file.

-I added the component into the root module

import { FaComponent } from 'angular2-fontawesome/components';
...
@NgModule({
...
  declarations: [
    ...
    FaComponent
  ],
...
})

-I added font-awesome to the styleUrls of the component I want to add FA to

@Component({
  ...
  styleUrls: [
    ...
    'node-modules/font-awesome/css/font-awesome.css'
  ],
})

-And I added the FA component to a html file, and put it in the templateUrl like so

<div>
  <fa [name]="'rocket'"></fa>
</div>

I am getting two issues when doing this...

• First, the icon is getting zero size; likely caused by the _ngcontent qualifier placed on the fa tag and not on the i tag (see below)

-Second, when I manually add the _ngcontent qualifier to the i tag, it shows up as a corrupted character. This is caused by a 404 on the server; the css file is relatively qualified, and for some reason causes the path not to be "/node_modules/font-awesome/fonts/...", but "/fonts/...". This is probably a personal problem, though... (see below)

Hi Team,

I am not able to proceed further here , getting 404 GET /Binder/Startup.js,

** browser-sync config **
{ injectChanges: false,
files: [ './**/*.{html,htm,css,js}' ],
watchOptions: { ignored: 'node_modules' },
server: { baseDir: './', middleware: [ [Function], [Function] ] } }
[BS] Access URLs:

    Local: http://localhost:3000
 External: http://100.108.19.44:3000

       UI: http://localhost:3001

UI External: http://100.108.19.44:3001

[BS] Serving files from: ./
[BS] Watching files...
17.06.24 08:54:24 304 GET /index.html
17.06.24 08:54:24 304 GET /style.css
17.06.24 08:54:24 304 GET /node_modules/es6-shim/es6-shim.min.js
17.06.24 08:54:24 304 GET /node_modules/zone.js/dist/zone.js
17.06.24 08:54:24 304 GET /systemjs.config.js
17.06.24 08:54:24 304 GET /node_modules/reflect-metadata/Reflect.js
17.06.24 08:54:24 304 GET /node_modules/systemjs/dist/system.src.js
[BS] Reloading Browsers...
[BS] Reloading Browsers...
08:54:24 - Compilation complete. Watching for file changes.
[0]
[0]
[1] 17.06.24 08:54:24 404 GET /Binder/Startup.js

systemjs.config.js

/**

• System configuration for Angular samples
• Adjust as necessary for your application needs.
  */
  (function (global) {
  System.config({
  paths: {
  // paths serve as alias
  'npm:': '../node_modules/'
  },
  // map tells the System loader where to look for things
  map: {
  // our app is within the app folder
  app: 'startup',
  // angular bundles
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
  '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
  '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
  '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
  '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
  '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
  // other libraries
  'rxjs': 'npm:rxjs',
  'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
  },
  // packages tells the System loader how to load when no filename and/or no extension
  packages: {
  app: {
  main: '../../Binder/Startup.js',
  defaultExtension: 'js'
  },
  rxjs: {
  defaultExtension: 'js'
  },
  'angular2-in-memory-web-api': {
  main: './index.js',
  defaultExtension: 'js'
  }
  }
  });
  })(this);

Please help on this.

Hi. First, Thanks for all the hard work.

I wanted to share how I have solved that error.

I'm using angular cli seed, before that angular2 seed. In both of them I got that error when I've tried to build for production.

In angular cli project, in the system-config.js file, there was a need to specify the format of the package to 'esm'.

src/system-config.ts

const map: any = {             
  'angular2-fontawesome': 'vendor/angular2-fontawesome'
};

/** User packages configuration. */
const packages: any = {        
  'angular2-fontawesome': {    
    format: 'esm'
  }
};

Others changes were according to their specification:

angular-cli-build.js

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [          
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',  
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',  
      'reflect-metadata/**/*.+(js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',   
      'angular2-fontawesome/**/*.+(js|js.map)'
    ]
  });
};

I am just a starting with systemjs so I would welcome any comments about this setup.

-- Edit
I have spoke too soon. Now its falling on require not defined. Playing with the various format options does not help

In this pull, the addons property has been deleted form the angular-cli.json: angular/angular-cli#4052.

So, the:

2. ../node_modules/font-awesome/fonts/*.+(otf|eot|svg|ttf|woff|woff2) to addons block of angular-cli.json.

must be modified.

Thanks ! :)

Hi,

Using this plugin with the angular2-quickstart template I'm getting errors in my web console however they are displayed properly on the page.

GET http://localhost:3000/fonts/fontawesome-webfont.woff2?v=4.6.3
:3000/fonts/fontawesome-webfont.woff?v=4.6.3:1 GET http://localhost:3000/fonts/fontawesome-webfont.woff?v=4.6.3
:3000/fonts/fontawesome-webfont.ttf?v=4.6.3:1 GET http://localhost:3000/fonts/fontawesome-webfont.ttf?v=4.6.3
:3000/fonts/fontawesome-webfont.woff2?v=4.6.3:1 GET http://localhost:3000/fonts/fontawesome-webfont.woff2?v=4.6.3
:3000/fonts/fontawesome-webfont.woff?v=4.6.3:1 GET http://localhost:3000/fonts/fontawesome-webfont.woff?v=4.6.3
:3000/fonts/fontawesome-webfont.ttf?v=4.6.3:1 GET http://localhost:3000/fonts/fontawesome-webfont.ttf?v=4.6.3

Any idea ?
I follow your doc and included the two references in systemjs.config.js

Mostly posting here for help, but after running ng build -prod, the angular2-fontawesome files are removed and all of the fontawesome icons on the site are now boxes.

After perusing this link: angular/angular-cli#785
It seems this may be an issue with the structure, especially with there being no main .js file.

Snippet of package.json

"angular2-fontawesome": "^0.5.1",

Snippet of angular-cli-build.js vendorNpmFiles:

'angular2-fontawesome/*.+(js|js.map)',
'angular2-fontawesome/**/*.+(js|js.map)',
'angular2-fontawesome/**/**/*.+(js|js.map)',

Snippet of system-config.ts

// map
'angular2-fontawesome': 'vendor/angular2-fontawesome',
// packages
'angular2-fontawesome': {
  defaultExtension: 'js'
}

Snippet of one of the components using FaDirective

import { FaDirective } from 'angular2-fontawesome/directives';
// ...
directives: [FaDirective],
// ...

and the template

<i fa class="green" [name]="'check'" [size]=4></i>

If anyone has any tips, workarounds, or solutions please let me know.

I'm getting errors in Angular2:

Error: Uncaught (in promise): No Directive annotation found on FaDirective

Same with FaComponent

angular2-fontawesome works, but Icons are being populated in the DOM as 0x0 pixel fa elements with a name property of either 'fa-undefined' or 'NaN'. I have tried using both directives and components with no success. I have also tried to duplicate every example in the documentation, and still can't get it to work.

boilerplate: angular-cli

system-config

const map: any = {
   "materialize": "vendor/materialize-css",
   "angular2-materialize": "vendor/angular2-materialize",
   "jquery": "vendor/jquery",
   "angular2-fontawesome": "vendor/angular2-fontawesome",
};

/** User packages configuration. */
const packages: any = {
  'materialize': {
    "format": "global",
    "main": "dist/js/materialize",
    "defaultExtension": "js"
  },
  'angular2-materialize': {
    "main": "dist/index",
    "defaultExtension": "js"
  },
   'angular2-fontawesome': {
     "defaultExtension": 'js' }
}; 

app.component.ts

import { Component } from '@angular/core';
import {MaterializeDirective} from "angular2-materialize";
import { ROUTER_DIRECTIVES } from '@angular/router';
import { FaComponent } from 'angular2-fontawesome/components';
import { FaDirective } from 'angular2-fontawesome/directives';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['styles/app.component.css'],
  directives: [MaterializeDirective, ROUTER_DIRECTIVES, FaComponent, FaDirective]
})
export class AppComponent {}

package.json (not complete)

 "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.2",
    "angular2-fontawesome": "^0.5.1",
    "angular2-materialize": "^3.0.3",

angular-cli-build.js

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'jquery/dist/*',
      'angular2-materialize/dist/*',
      'materialize-css/dist/**/*',
      'angular2-fontawesome/**/*'
    ]
  });
};

Thanks a bunch.

I have followed all the steps given in the readme file. ThenI am getting following error compile time.

"Cannot find module 'angular2-fontawesome/components'"

I am trying to use font-awesome with Angular 2 rc3 (application made with angular CLI)
can you please suggest how I can resolve this issue ??

A release needs to be rolled out that includes latest changes.

I have updated to v0.1.2 with angular 2.0.0-beta.13 but I get a 404 error:
[1] 16.04.07 12:13:32 404 GET /node_modules/angular2-fontawesome/lib/

My System.js configuration:

   <script>
        System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                },
                "angular2-fontawesome": { defaultExtension: 'js'},
                "angular2-jwt": { defaultExtension: 'js' }
            },
            map: {
                'angular2-fontawesome': 'node_modules/angular2-fontawesome/lib',
                'angular2-jwt': 'node_modules/angular2-jwt/angular2-jwt.js',
                'moment': 'node_modules/moment/moment.js'
            }
        });
        System.import('app/main')
            .then(null, console.error.bind(console));
    </script>

In addition I tried it with:

 map: {
     'angular2-fontawesome': 'node_modules/angular2-fontawesome/lib/components.js',
 } 

but I get a similar message:

[1] 16.04.07 12:20:03 404 GET /node_modules/angular2-fontawesome/lib/components/fa.component
[1] 16.04.07 12:20:03 404 GET /node_modules/angular2-fontawesome/lib/components/fa-stack.component

Any chance of supporting angular2 RC?

to update the following line as per the angular2-fontawesome documentation.

// angular-cli-build.js
// Note: This is not really tested!!! any comments are helpful
// Note: This is only needed when we use angular-cli

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
...
// Add following lines (1/2)
'angular2-fontawesome/.+(js|js.map)',
'angular2-fontawesome/**/.+(js|js.map)',
'angular2-fontawesome///*.+(js|js.map)',

  // You need to add following lines as well (2/2) 
  'font-awesome/css/*.*',
  'font-awesome/fonts/*.*'
]

I'd like to change size of fa fa-line-chart, but when using a custom CSS, but font-size dont work.

Codes:
HTML:
<a fa [name]="'line-chart'"></a>

CSS:
a { cursor: pointer; font-size: 60px; }

The pointer its working, font-size not.
And how i can use fa-lg, fa-2x, etc?

2.0.0-rc.4 was released yesterday - I skipped on 2 and 3, but I was unable to continue using it this package because of the hard reference to 2.0.0-rc.1. Were you planning on updating before release? I went ahead and forked for now so that id didn't stop development, but am not looking to keep a custom copy on hand.

Are you waiting for RTM before updating again?

I think you should really add before all the usage instructions that to be able to use this package you should install it via npm command, for new users like me it could me confusing without this instruction.
npm install --save font-awesome angular2-fontawesome.

So currently I have included font-awesome and angular2-fontawesome in my package.json
I have included references to their source files in my angular-cli.json file like mentioned in the README.

However, when I run ng build it outputs all of the font-awesome fonts files directly out into the dist directory, so in the font-awesome.css file when it tries to reference these files like so src: url('../fonts/fontawesome-webfont.eot?v=4.7.0'); it doesn't work properly because all of the fonts files are in the same directory (ie, their not put in their own fonts folder.)

Has anyone ran into this before? Or am I doing something wrong?

Thanks in advance for your time

Hello!

Thank you for this great library!

However, I'm getting the following error when trying to migrate from angular 8 to 9 (which uses new Ivy compiler):

ERROR in node_modules/angular2-fontawesome/src/index.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the library (angular2-fontawesome/angular2-fontawesome) which declares Angular2FontawesomeModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

1 export declare class Angular2FontawesomeModule {

Thanks!

In Usage section, the rocket icon example is wrong, it renders "fa-undefined"
<fa [name]="rocket" [border]=true></i> or
<i fa [name]="rocket" [border]=true></i>
will render:
<fa> <i ng-reflect-ng-class="fa,fa-undefined,fa-border" class="fa fa-undefined fa-border"></i> </fa>
Putting the same as <fa [name]="'rocket'" [border]=true></i> works

This package needs to be updated to work with the latest RC5 build of Angular2. Right now when I try to install it, I geta PEERINVALID error because fontawesome needs common rc4 whereas all others use common rc5.

I have the following in my template.

<fa *ngIf="!tempInFahrenheit"
        [name]="'fa-spinner'"
        [size]=5
        [spin]=true
        ></fa>

it seems to build fine but when I run my tests I get the following

Failed: Template parse errors:
Can't bind to 'name' since it isn't a known property of 'fa'. ("
    <img src="{{ icon }}" align="center"/><br/>
    <fa *ngIf="!tempInFahrenheit"
        [ERROR ->][name]="'fa-spinner'"
        [size]=5
        [spin]=true
"): ng:///DynamicTestModule/AppComponent.html@13:8
Can't bind to 'size' since it isn't a known property of 'fa'. ("
    <fa *ngIf="!tempInFahrenheit"
        [name]="'fa-spinner'"
        [ERROR ->][size]=5
        [spin]=true
        ></fa>
"): ng:///DynamicTestModule/AppComponent.html@14:8
Can't bind to 'spin' since it isn't a known property of 'fa'. ("
        [name]="'fa-spinner'"
        [size]=5
        [ERROR ->][spin]=true
        ></fa>
    <span *ngIf="tempInFahrenheit" class="temp-text">{{ (showCelsius) ?
"): ng:///DynamicTestModule/AppComponent.html@15:8
'fa' is not a known element:
1. If 'fa' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<span class="info-box">{{ description }}</span>
    <img src="{{ icon }}" align="center"/><br/>
    [ERROR ->]<fa *ngIf="!tempInFahrenheit"
        [name]="'fa-spinner'"
        [size]=5
"): ng:///DynamicTestModule/AppComponent.html@12:4

app.module.ts has the following

import { Angular2FontawesomeModule } from 'angular2-fontawesome';

and

@NgModule({
  declarations: [
    AppComponent,
    TemperaturePipe
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    Angular2FontawesomeModule
  ],

.angular-cli.json has

"styles": [
        "styles.css",
        "../node_modules/font-awesome/css/font-awesome.css"
      ],

and again it builds fine.

Hey,
although the documentation on npm is really good, there is an error on it.
I stumbled a while until i get it.

In the docs:
<fa [name]="rocket" [border]=false>
But the correct definition of [name] is in single quotes :
<fa [name]="'rocket'" [border]=false>

PS: I am using angular 4 (cli)
PPS: NPM link: https://www.npmjs.com/package/angular2-fontawesome

Hi,
I'm getting an error while integrating Font-awesome in angular2 application, I followed fa document for systemjs.config.js setup.

Error message
platform-browser.umd.js:962 Error: Uncaught (in promise): Template parse errors:
Can't bind to 'name' since it isn't a known native property ("

<li *ngFor="let author of authors">
        <a>
         <fa [ERROR ->][name]="rocket" [border]=true></fa>
        </a>
    </li>
"): AuthorComponent@7:13
Can't bind to 'border' since it isn't a known native property ("
    <li *ngFor="let author of authors">
        <a>
         <fa [name]="rocket" [ERROR ->][border]=true></fa>
        </a>
    </li>

also, i tried with FaComponet and FaDirective.

Code:

import {Component} from '@angular/core';
import {AuthorServices} from '../../service/author.services'
import {AutoGrow} from "../../directive/autoGrow";
import {FaDirective} from 'angular2-fontawesome/directives';

@Component({
    selector: 'author',
    templateUrl: './app/component/author/author.html',
    providers: [AuthorServices],
    directives: [AutoGrow, FaDirective]
})
export class AuthorComponent{
    title: string;
    authors: any;
    authorName: string;

    constructor(private authorServices: AuthorServices){
        this.title = 'Authors Names';
        this.authors = authorServices.getAuthors();
    }

    onClick(author){
        this.authorServices.addAutors(this.authorName);
        this.authorName = '';
    }
}

author.html

<h2> Authors: {{authorName}} </h2>
{{title}}
<input #authorText type="text" [(ngModel)]="authorName"  autoGrow/>
<button  (click)="onClick(authorName); name = ''">Add</button>
<ul>
    <li *ngFor="let author of authors">
        <a>
         <fa [name]="rocket" [border]=true></fa>
        </a>
    </li>
</ul>

systemjs.config.js

(function(global) {
    // map tells the System loader where to look for things
    var map = {
        'app':                        'app', // 'dist',
        '@angular':                   'node_modules/@angular',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        'rxjs':                       'node_modules/rxjs',
        'angular2-fontawesome':       'node_modules/angular2-fontawesome'
    };
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app':                        { main: 'main.js',  defaultExtension: 'js' },
        'rxjs':                       { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
        'angular2-fontawesome':       { defaultExtension: 'js' }
    };

Thanks..

I'm building an application in Angular 2 and using your library to place font-awesome icons.

The Fa directives and components are compiling correctly, but the icon will only show up if I include font-awesome's css globally (in index.html). Including it in the component's styleUrls is seemingly impossible because of relative pathing. The iframe's css cannot find the webfonts from font-awesome.

I have tried using both 'vendor/font-awesome/css/font-awesome.css', '/vendor/font-awesome/css/font-awesome.css'.

I have verified that the CLI is properly building the vendor folder. Everything is there.

I am on RC 4 using Angular CLI.

Hello!

Thank you for this great module!

However, why are you using outdated unofficial font-awesome npm dependency?

I've tried to use an icon from the latest version of FontAwesome, but found that it's unavailable. This lead me to create this issue, only to find out that font-awesome npm package is actually unofficial and outdated.

Could we update it to use the official npm package?

Thanks!

I am trying to use angular2-fontawesome 0.7.0 with Angular2 2.1.2 (Webpack 2.0)

After adding the import as it says in the manual I get:

Unexpected value 'Angular2FontawesomeModule' imported by the module 'AppModule'

I seems that 'lib' folder is missing from npm install

Any idea what I can do about it. Nothing seems to work