tb/ng2-gravatar

Angular2 gravatar directive

ng2-gravatar-directive

Angular2+ gravatar directive

Install

npm i --save ng2-gravatar-directive

Import

import { GravatarModule } from 'ng2-gravatar-directive';

Usage

@NgModule({
    imports: [
        ...,
        GravatarModule,
    ]
})

<img gravatar [email]="user.email" [size]="16">

License

MIT

ng2-gravatar's Issues

https

You should use https for gravatar.com or otherwise this directive can't be used on https sites.

Compile error

I got this compilation error

ERROR in ./node_modules/ng2-gravatar-directive/src/gravatar.directive.ts
Module build failed: Error: /Users/Leopardotto/Documents/SviluppoApplicazioni/themeforest-12931855-fuse-angularjs-material-design-admin-template/Angular5/Fuse-v5.2.10-skeleton/node_modules/ng2-gravatar-directive/src/gravatar.directive.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).

ERROR in Unexpected value 'Gravatar in gravatar.d.ts Please add a @Pipe/@Directiv e/@Component annotation.

It's necesary declare as directive and bind attributes in gravatar.d.ts when you build with aot option enabled:

import { Directive, ElementRef, Input } from '@angular/core';

@Directive ({
  selector: '[gravatar]'
})
export declare class Gravatar {
    private elementRef;
    @Input('email') email: string;
    @Input('size') size: number;
    @Input('fallback') fallback: string;
    constructor(elementRef: ElementRef);
    ngOnInit(): void;
}

Please, can you change it in the next version?

Thank you

Error during compilation

Hi,

I use angular 5,

and have the error during compilation:

 error TS2403: Subsequent variable declarations must have the same type.  Variable 'require' must be of type 'NodeRequire', but here has type 'any'.

Any suggestions or guesses?
Thank you!

PS:
my package.json

{
  "name": "c2-portal",
  "version": "0.1.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "production": "ng build -e=prod --prod",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "5.0.0",
    "@angular/common": "5.0.0",
    "@angular/compiler": "5.0.0",
    "@angular/compiler-cli": "5.0.0",
    "@angular/core": "5.0.0",
    "@angular/flex-layout": "2.0.0-beta.10-4905443",
    "@angular/forms": "5.0.0",
    "@angular/http": "5.0.0",
    "@angular/platform-browser": "5.0.0",
    "@angular/platform-browser-dynamic": "5.0.0",
    "@angular/router": "5.0.0",
    "angular2-fontawesome": "0.9.3",
    "core-js": "2.5.1",
    "font-awesome": "4.7.0",
    "ng2-dnd": "4.2.0",
    "ng2-gravatar-directive": "2.1.0",
    "ngx-warehouse": "1.0.0",
    "primeng": "5.0.0-rc.0",
    "rxjs": "5.5.2",
    "zone.js": "0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.5.0",
    "@types/jasmine": "2.5.53",
    "@types/node": "~8.0.1",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.4",
    "jasmine-spec-reporter": "~4.1.1",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "karma-coverage-istanbul-reporter": "1.3.0",
    "protractor": "~5.1.0",
    "ts-node": "~3.1.0",
    "tslint": "~5.4.3",
    "typescript": "2.6.1"
  }
}

Error when run ng serve with --aot

Date: ERROR in ./node_modules/ng2-gravatar-directive/src/gravatar.directive.ts2017-12-05T00:33:17.307Z

Hash: 3bf44b1a49249c7441d8Module build failed: Error: E:\Projetos\OtiSEG\Cliente\node_modules\ng2-gravatar-directive\src\gravatar.directive.ts is not part of the compilation output. Please check the other error messages for details.

   at AngularCompilerPlugin.getCompiledFile (E:\Projetos\OtiSEG\Cliente\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:629:23)chunk {
inline}     at plugin.done.then (E:\Projetos\OtiSEG\Cliente\node_modules\@ngtools\webpack\src\loader.js:467:39)inline.bundle.js
 (inline) 5.79 kB     at process._tickCallback (internal/process/next_tick.js:109:7)[entry]
 [rendered]
 @ ./node_modules/ng2-gravatar-directive/src/index.js 6:9-40chunk {main
} main.bundle.js @ ./src/app/shared/parts/parts.module.ts (main) 1.02 MB 
[initial] @ ./src/app/dashboard/dashboard.module.ts [rendered]

chunk { @ ./src/app/app.module.tspolyfills
} polyfills.bundle.js @ ./src/main.ts (polyfills) 959 kB 
[initial] [rendered] @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

chunk {stylesERROR in ./node_modules/ng2-gravatar-directive/src/gravatar.module.ts} 
styles.bundle.js (styles) 4.15 MB [initial]Module build failed: Error: E:\Projetos\OtiSEG\Cliente\node_modules\ng2-gravatar-directive\src\gravatar.module.ts is not part of the compilation output. Please check the other error messages for details. [rendered]

chunk {    at AngularCompilerPlugin.getCompiledFile (E:\Projetos\OtiSEG\Cliente\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:629:23)vendor} 
vendor.bundle.js    at plugin.done.then (E:\Projetos\OtiSEG\Cliente\node_modules\@ngtools\webpack\src\loader.js:467:39) (vendor) 15.8 MB [initial]
 [rendered]    at process._tickCallback (internal/process/next_tick.js:109:7)

 @ ./node_modules/ng2-gravatar-directive/src/index.js 7:9-37
 @ ./src/app/shared/parts/parts.module.ts
 @ ./src/app/dashboard/dashboard.module.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

webpack: Failed to compile.

md5 peer dependency

If my understanding of npm dependencies is correct then md5 should be a dependency instead of a peer dependency. ng2-gravatar isn't an md5 plugin or companion lib; it simply requires md5 to work. Users of ng2-gravatar shouldn't have to add md5 to their list of package.json dependencies.

https://nodejs.org/en/blog/npm/peer-dependencies/

Create OnChanges Lifecycle Hooks

First of all congratulations for this very useful directive;)

In my application I receive the user's email via the GET http method, but this is a promise, but its directive only takes the email value in the OnInit event, the correct one would be to create the URL of the gravatar in the OnChanges event, so that you can get always updated emails.

My Proposal

  ngOnInit() {
    this.setUrlGravatar(this.email);
  }

  ngOnChanges(changes:any){
    this.setUrlGravatar(changes['email'].currentValue);
  }

  setUrlGravatar(email:any){
    this.elementRef.nativeElement.src = `//www.gravatar.com/avatar/${md5(email)}?s=${this.size}&d=${this.fallback}`;
  }

Unexpected value 'Gravatar' ... declared by the module ...

error compiling when trying to build project using ng build --prod.

"ERROR in Unexpected value 'Gravatar in /.../st-manage-certificates-ui/node_modules/ng2-gravatar-directive/src/gravatar.d.ts' declared by the module 'ManageCertificatesModule in /.../st-manage-certificates-ui/src/app/manage-certificates/manage-certificates.module.ts'

"Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/Users/kenwilson/Documents/SemaTree/st-manage-certificates-ui/src'
@ ./src/main.ts 4:0-74
@ multi ./src/main.ts
"