Add Avatar component #63

tschaffter · 2021-08-19T16:59:39Z

Fixes #15

tschaffter · 2021-08-19T21:38:44Z

Building the library throws a warning:

$ ng build
...
------------------------------------------------------------------------------
Building entry point '@sage-bionetworks/sage-angular/src/lib/avatar'
------------------------------------------------------------------------------
✔ Compiling with Angular sources in Ivy full compilation mode.
✔ Bundling to FESM2015
⠋ Bundling to UMDWARNING: No name was provided for external module 'ngx-avatar' in output.globals – guessing 'i1'
✔ Bundling to UMD
✔ Writing package metadata
✔ Built @sage-bionetworks/sage-angular/src/lib/avatar

I tried specifying umdModuleIds as described by ng-packagr doc but that does not remove the warning. In ng-package.json

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/sage-angular",
  "assets": [
    "src/assets",
    "src/styles.scss",
    "src/styles",
    "src/**/*-theme.scss"
  ],
  "lib": {
    "entryFile": "src/public-api.ts",
    "umdModuleIds": {
      "ngx-avatar": "ngx-avatar"
    }
  }
}

I'm not sure about the value ngx-avatar. This comment may help. Does ng-packgr complain because it detects that it's not the correct value?

tschaffter · 2021-08-19T21:42:39Z

In ngx-avatar.umd.js:

(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['ngx-avatar'] = {}, global.ng.core, global.ng.common, global.tsMd5, global.ng.common.http, global.rxjs.operators));

tschaffter · 2021-08-19T21:53:38Z

I successfully removed the warning by adding umdModuleIds to the sage-avatar's package.json instead of the library's ng-package.json.

I'm still unable to use my avatar component in the demo app. Here is the error shown in the browser console:

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(e)[e -> e -> e -> e -> e]: 
  NullInjectorError: No provider for e!
get@http://localhost:4200/main.js:1:58176
get@http://localhost:4200/main.js:1:59415
get@http://localhost:4200/main.js:1:59415
get@http://localhost:4200/main.js:1:59415
get@http://localhost:4200/main.js:1:99230
...

ERROR TypeError: this.avatarService.isSource is not a function
    ngOnChanges http://localhost:4200/336.js:1
    xt http://localhost:4200/main.js:1
    _e http://localhost:4200/main.js:1
    be http://localhost:4200/main.js:1
    ye http://localhost:4200/main.js:1
    ws http://localhost:4200/main.js:1
    Bs http://localhost:4200/main.js:1
    ws http://localhost:4200/main.js:1
    ws http://localhost:4200/main.js:1
    Bs http://localhost:4200/main.js:1
    ws http://localhost:4200/main.js:1
    ws http://localhost:4200/main.js:1
    ws http://localhost:4200/main.js:1

tschaffter · 2021-08-19T22:09:12Z

Getting the clear error after setting "optimization": false in angular.json:

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(HomepageModule)[AvatarService -> HttpClient -> HttpClient -> HttpClient -> HttpClient]: 
  NullInjectorError: No provider for HttpClient!

From the README of ngx-avatar:

Starting from version 3.4.0:

HttpClientModule is mandatory in order to fetch the avatar from external sources (Gravatar, Google, ...).

tschaffter · 2021-08-19T22:39:53Z

Storybook build fails in the CI workflow.

WARN   Failed to load preset: "/home/runner/work/sage-angular/sage-angular/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-cli.js"
ERR! Error: Cannot find module '@angular-devkit/architect'
ERR! Require stack:
ERR! - /home/runner/work/sage-angular/sage-angular/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-cli.js
ERR! - /home/runner/work/sage-angular/sage-angular/node_modules/@storybook/core-common/dist/cjs/presets.js
ERR! - /home/runner/work/sage-angular/sage-angular/node_modules/@storybook/core-common/dist/cjs/index.js
ERR! - /home/runner/work/sage-angular/sage-angular/node_modules/@storybook/core-server/dist/cjs/index.js
ERR! - /home/runner/work/sage-angular/sage-angular/node_modules/@storybook/core/dist/cjs/server.js
ERR! - /home/runner/work/sage-angular/sage-angular/node_modules/@storybook/core/server.js
ERR! - /home/runner/work/sage-angular/sage-angular/node_modules/@storybook/angular/dist/ts3.9/server/build.js
ERR! - /home/runner/work/sage-angular/sage-angular/node_modules/@storybook/angular/bin/build.js

Later in the logs, there's also this error:

ERR! ModuleNotFoundError: Module not found: Error: Can't resolve '@sage-bionetworks/sage-angular/src/lib/footer' in '/home/runner/work/sage-angular/sage-angular/stories'
ERR!     at /home/runner/work/sage-angular/sage-angular/node_modules/webpack/lib/Compilation.js:1773:28
ERR!     at /home/runner/work/sage-angular/sage-angular/node_modules/webpack/lib/NormalModuleFactory.js:811:13
ERR!     at eval (eval at create (/home/runner/work/sage-angular/sage-angular/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
ERR!     at /home/runner/work/sage-angular/sage-angular/node_modules/webpack/lib/NormalModuleFactory.js:286:22
ERR!     at eval (eval at create (/home/runner/work/sage-angular/sage-angular/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
ERR!     at /home/runner/work/sage-angular/sage-angular/node_modules/webpack/lib/NormalModuleFactory.js:442:22
ERR!     at /home/runner/work/sage-angular/sage-angular/node_modules/webpack/lib/NormalModuleFactory.js:124:11
ERR!     at /home/runner/work/sage-angular/sage-angular/node_modules/webpack/lib/NormalModuleFactory.js:673:25
ERR!     at /home/runner/work/sage-angular/sage-angular/node_modules/webpack/lib/NormalModuleFactory.js:882:8
ERR!     at /home/runner/work/sage-angular/sage-angular/node_modules/webpack/lib/NormalModuleFactory.js:1002:5
ERR!     at /home/runner/work/sage-angular/sage-angular/node_modules/neo-async/async.js:6883:13
ERR!     at /home/runner/work/sage-angular/sage-angular/node_modules/webpack/lib/NormalModuleFactory.js:985:45
ERR!     at finishWithoutResolve (/home/runner/work/sage-angular/sage-angular/node_modules/enhanced-resolve/lib/Resolver.js:296:11)
ERR!     at /home/runner/work/sage-angular/sage-angular/node_modules/enhanced-resolve/lib/Resolver.js:362:15
ERR!     at /home/runner/work/sage-angular/sage-angular/node_modules/enhanced-resolve/lib/Resolver.js:410:5
ERR!     at eval (eval at create (/home/runner/work/sage-angular/sage-angular/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
ERR!  ModuleNotFoundError: Module not found: Error: Can't resolve '@sage-bionetworks/sage-angular/src/lib/footer' in '/home/runner/work/sage-angular/sage-angular/stories'
ERR!     at /home/runner/work/sage-angular/sage-angular/node_modules/webpack/lib/Compilation.js:1773:28
ERR!     at /home/runner/work/sage-angular/sage-angular/node_modules/webpack/lib/NormalModuleFactory.js:811:13
ERR!     at eval (eval at create (/home/runner/work/sage-angular/sage-angular/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
ERR!     at /home/runner/work/sage-angular/sage-angular/node_modules/webpack/lib/NormalModuleFactory.js:286:22
ERR!     at eval (eval at create (/home/runner/work/sage-angular/sage-angular/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
ERR!     at /home/runner/work/sage-angular/sage-angular/node_modules/webpack/lib/NormalModuleFactory.js:442:22
ERR!     at /home/runner/work/sage-angular/sage-angular/node_modules/webpack/lib/NormalModuleFactory.js:124:11
ERR!     at /home/runner/work/sage-angular/sage-angular/node_modules/webpack/lib/NormalModuleFactory.js:673:25
ERR!     at /home/runner/work/sage-angular/sage-angular/node_modules/webpack/lib/NormalModuleFactory.js:882:8
ERR!     at /home/runner/work/sage-angular/sage-angular/node_modules/webpack/lib/NormalModuleFactory.js:1002:5
ERR!     at /home/runner/work/sage-angular/sage-angular/node_modules/neo-async/async.js:6883:13
ERR!     at /home/runner/work/sage-angular/sage-angular/node_modules/webpack/lib/NormalModuleFactory.js:985:45
ERR!     at finishWithoutResolve (/home/runner/work/sage-angular/sage-angular/node_modules/enhanced-resolve/lib/Resolver.js:296:11)
ERR!     at /home/runner/work/sage-angular/sage-angular/node_modules/enhanced-resolve/lib/Resolver.js:362:15
ERR!     at /home/runner/work/sage-angular/sage-angular/node_modules/enhanced-resolve/lib/Resolver.js:410:5
ERR!     at eval (eval at create (/home/runner/work/sage-angular/sage-angular/node_modules/enhanced-resolve/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)

The build was fine a couple of commit ago. Need to figure out what happened.

This reverts commit 93a338e.

tschaffter · 2021-08-20T01:19:50Z

https://github.blog/2021-02-02-npm-7-is-now-generally-available/

Add ngx-avatar

d4d1cfc

tschaffter self-assigned this Aug 19, 2021

tschaffter added this to In progress in ROCC - Sprint 21.4 - User Update Aug 19, 2021

tschaffter added 5 commits August 19, 2021 10:10

Add avatar module

0a08262

Add inputs to avatar component

e1db8a5

Add avatar component but does not work yet

059a50b

See placeholder avatar

1ac5166

Successfully add rxjs to lib and use it in demo app

fce2d70

Remove UMD warning

a7ad689

Import HttpClientModule into avatar component

e448e98

tschaffter added 8 commits August 19, 2021 16:00

Try to return to @angular ^12.1.1

93a338e

Revert "Try to return to @angular ^12.1.1"

bfdd827

This reverts commit 93a338e.

Fix typo in the name of Ci workflow job

3d6006a

Set ng cli version in Ci workflow

91c0c7f

Regenerate package-lock.json

0fc681b

Try last package-lock.json that worked

2172059

Trying lock file generated with npm install --legacy-peer-deps

b3b6a2d

Add a story for the Avatar component

b46d3e3

tschaffter merged commit a5cc1df into main Aug 20, 2021

ROCC - Sprint 21.4 - User Update automation moved this from In progress to Completed Aug 20, 2021

tschaffter deleted the 15-add-avatar branch August 20, 2021 01:20

tschaffter mentioned this pull request Aug 20, 2021

Release version 1.3.0 #64

Merged

github-actions bot locked as resolved and limited conversation to collaborators Aug 21, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Avatar component #63

Add Avatar component #63

tschaffter commented Aug 19, 2021

tschaffter commented Aug 19, 2021 •

edited

Loading

tschaffter commented Aug 19, 2021

tschaffter commented Aug 19, 2021

tschaffter commented Aug 19, 2021 •

edited

Loading

tschaffter commented Aug 19, 2021

tschaffter commented Aug 20, 2021

Add Avatar component #63

Add Avatar component #63

Conversation

tschaffter commented Aug 19, 2021

tschaffter commented Aug 19, 2021 • edited Loading

tschaffter commented Aug 19, 2021

tschaffter commented Aug 19, 2021

tschaffter commented Aug 19, 2021 • edited Loading

tschaffter commented Aug 19, 2021

tschaffter commented Aug 20, 2021

tschaffter commented Aug 19, 2021 •

edited

Loading

tschaffter commented Aug 19, 2021 •

edited

Loading