error TS2314: Generic type 'ɵɵComponentDeclaration' requires 7 type argument(s)

Question

I am trying to use Font-awesome icons in my Angular-13 Application, whenever I try to use <fa-icon [icon]="[someIconName]"></fa-icon> it throws a below errors. I am unable to use any of the font-awesome Icons. Please help me with this. I further deleted node_module folder and then reinstalled it but was unable to fix it.

./node_modules/bootstrap/dist/css/bootstrap.min.css.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet1.rules[5].rules[0].oneOf[0].use1!./node_modules/postcss-loader/dist/cjs.js??ruleSet1.rules[5].rules[0].oneOf[0].use[2]!./node_modules/bootstrap/dist/css/bootstrap.min.css

• Warning: Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning

(6:29521) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.

./node_modules/@fortawesome/angular-fontawesome/fesm2015/angular-fontawesome.mjs

• Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js): TypeError: Cannot create property 'message' on string 'C:\Users\ALTrakesg2\Downloads\Employee-feedback-management-system\frontend\node_modules@fortawesome\angular-fontawesome\fesm2015\angular-fontawesome.mjs: This application depends upon a library published using Angular version 14.0.0, which requires Angular version 14.0.0 or newer to work correctly. Consider upgrading your application to use a more recent version of Angular. 134 | } 135 | FaStackItemSizeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: FaStackItemSizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });

136 | FaStackItemSizeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: FaStackItemSizeDirective, selector: "fa-icon[stackItemSize],fa-duotone-icon[stackItemSize]", inputs: { stackItemSize: "stackItemSize", size: "size" }, usesOnChanges: true, ngImport: i0 }); | ^^^^^^^^^^9m^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^9m^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^9m^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 137 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: FaStackItemSizeDirective, decorators: [{ 138 | type: Directive, 139 | args: [{' at run (C:\Users\ALTrakesg2\Downloads\Employee-feedback-management-system\frontend\node_modules@babel\core\lib\transformation\index.js:37:15) at run.next () at Function.transform (C:\Users\ALTrakesg2\Downloads\Employee-feedback-management-system\frontend\node_modules@babel\core\lib\transform.js:25:41) at transform.next () at step (C:\Users\ALTrakesg2\Downloads\Employee-feedback-management-system\frontend\node_modules\gensync\index.js:261:32) at C:\Users\ALTrakesg2\Downloads\Employee-feedback-management-system\frontend\node_modules\gensync\index.js:273:13 at async.call.result.err.err (C:\Users\ALTrakesg2\Downloads\Employee-feedback-management-system\frontend\node_modules\gensync\index.js:223:11) at C:\Users\ALTrakesg2\Downloads\Employee-feedback-management-system\frontend\node_modules\gensync\index.js:37:40

Error: node_modules/@fortawesome/angular-fontawesome/icon/duotone-icon.component.d.ts:54:18

• error TS2314: Generic type 'ɵɵComponentDeclaration' requires 7 type argument(s).

54 static ɵcmp: i0.ɵɵComponentDeclaration<FaDuotoneIconComponent, "fa-duotone-icon", never, { "swapOpacity": "swapOpacity"; "primaryOpacity": "primaryOpacity"; "secondaryOpacity": "secondaryOpacity"; "primaryColor": "primaryColor"; "secondaryColor": "secondaryColor"; }, {}, never, never, false>; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@fortawesome/angular-fontawesome/icon/icon.component.d.ts:66:18

• error TS2314: Generic type 'ɵɵComponentDeclaration' requires 7 type argument(s).

66 static ɵcmp: i0.ɵɵComponentDeclaration<FaIconComponent, "fa-icon", never, { "icon": "icon"; "title": "title"; "spin": "spin"; "pulse": "pulse"; "mask": "mask"; "styles": "styles"; "flip": "flip"; "size": "size"; "pull": "pull"; "border": "border"; "inverse": "inverse"; "symbol": "symbol"; "rotate": "rotate"; "fixedWidth": "fixedWidth"; "classes": "classes"; "transform": "transform"; "a11yRole": "a11yRole"; }, {}, never, never, false>; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@fortawesome/angular-fontawesome/layers/layers-counter.component.d.ts:20:18

• error TS2314: Generic type 'ɵɵComponentDeclaration' requires 7 type argument(s).

20 static ɵcmp: i0.ɵɵComponentDeclaration<FaLayersCounterComponent, "fa-layers-counter", never, { "content": "content"; "title": "title"; "styles": "styles"; "classes": "classes"; "position": "position"; }, {}, never, never, false>; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@fortawesome/angular-fontawesome/layers/layers-text.component.d.ts:32:18

• error TS2314: Generic type 'ɵɵComponentDeclaration' requires 7 type argument(s).

32 static ɵcmp: i0.ɵɵComponentDeclaration<FaLayersTextComponent, "fa-layers-text", never, { "content": "content"; "title": "title"; "styles": "styles"; "classes": "classes"; "spin": "spin"; "pulse": "pulse"; "flip": "flip"; "size": "size"; "pull": "pull"; "border": "border"; "inverse": "inverse"; "rotate": "rotate"; "fixedWidth": "fixedWidth"; "transform": "transform"; }, {}, never, never, false>; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@fortawesome/angular-fontawesome/layers/layers.component.d.ts:18:18

• error TS2314: Generic type 'ɵɵComponentDeclaration' requires 7 type argument(s).

18 static ɵcmp: i0.ɵɵComponentDeclaration<FaLayersComponent, "fa-layers", never, { "size": "size"; "fixedWidth": "fixedWidth"; }, {}, never, ["*"], false>; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@fortawesome/angular-fontawesome/stack/stack-item-size.directive.d.ts:11:18

• error TS2314: Generic type 'ɵɵDirectiveDeclaration' requires 6 type argument(s).

11 static ɵdir: i0.ɵɵDirectiveDeclaration<FaStackItemSizeDirective, "fa-icon[stackItemSize],fa-duotone-icon[stackItemSize]", never, { "stackItemSize": "stackItemSize"; "size": "size"; }, {}, never, never, false>; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@fortawesome/angular-fontawesome/stack/stack.component.d.ts:18:18

• error TS2314: Generic type 'ɵɵComponentDeclaration' requires 7 type argument(s).

18 static ɵcmp: i0.ɵɵComponentDeclaration<FaStackComponent, "fa-stack", never, { "size": "size"; }, {}, never, ["*"], false>;

This is package.json

Thank you in Advance

Uropygium

Hi @rakesh-gombi, please share your package.json file into a code snippet to help you better, please check why this is important. Why should I not upload images of code/data/errors when asking a question? – Pachysandra

I had a version issue, my angular version was 14 and I installed google maps of v17. Installing v14 fixed the issue. – Brittneybrittni

Answer 1

It is quite hard to guess the error without more information, but following the error message:

TypeError: Cannot create property 'message' on string 'C:\Users\ALTrakesg2\Downloads\Employee-feedback-management-system\frontend\node_modules\@fortawesome\angular-fontawesome\fesm2015\angular-fontawesome.mjs: This application depends upon a library published using Angular version 14.0.0, which requires Angular version 14.0.0 or newer to work correctly.

Looks like you need to upgrade Angular version in order to use your current @fontawesome library version.

Lewiss

I had a similar problem with ng-recaptcha. To fix it, I just downloaded ng-recaptcha v9, which is compatible with Angular 13. – Dinghy

Any way to dongrate the version back to what I had before ? It all started once I upgradete to angular 14 , That I don't really need anyway . – Pathic

Answer 2

Depending on your Angular version, you should install the matching @fortawesome/angular-fontawesome version, to do this, just check the compatibility table: https://github.com/FortAwesome/angular-fontawesome Example for Angular 14.x:

npm i -S @fortawesome/[email protected]  @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

Equinoctial

Answer 3

Update Your ngx-toastr version that is compatable with angular and type script version...

in my case when i install the ngx-toaster with command:-> npm install ngx-toastr

the latest version of toastr installed which is 16.1.1 so i am getting this error :

node_modules/ngx-toastr/toastr/toast-noanimation.component.d.ts:50:18 - error TS2707: Generic type 'ɵɵComponentDeclaration' requires between 7 and 8 type arguments.

50     static ɵcmp: i0.ɵɵComponentDeclaration<ToastNoAnimation, "[toast-component]", never, {}, {}, never, never, false, never>;
                    
Error: node_modules/ngx-toastr/toastr/toast.component.d.ts:57:18 - error TS2707: Generic type 'ɵɵComponentDeclaration' requires between 7 and 8 type arguments.

57     static ɵcmp: i0.ɵɵComponentDeclaration<Toast<any>, "[toast-component]", never, {}, {}, never, never, false, never>;
                    
Error: node_modules/ngx-toastr/toastr/toast.directive.d.ts:8:18 - error TS2707: Generic type 'ɵɵDirectiveDeclaration' requires between 6 and 8 type arguments.

8     static ɵdir: i0.ɵɵDirectiveDeclaration<ToastContainerDirective, "[toastContainer]", ["toastContainer"], {}, {}, never, never, false, never>;

For Solution: I uninstall the version of ngx-toastr using command :-> npm uninstall ngx-toastr

Then Reinstall ngx-toastr version compatable with my configuration of the angular and typescirpt versions using the command: npm install [email protected] --save in my case the version 15.2.2 is working maybe your case the version number differ's

Woodruff

Thank you very much for your valuable answer @Sahil Chauhan. As I'm learning Angular without other's support, I'm spending lot of time even to resolve small error. Your answer has resolved my issue. I could able to resolve ngx-bootstrap issue. – Assumptive

Your's welcome @Ashokkumar – Woodruff

Answer 4

For Angular 13, use :

ng add @fortawesome/[email protected]

It will solve the issue.

Sanburn

Answer 5

You don't need to do anything ,just match your angular version with fontawesome version and then,it's ready to use.... Go through this link https://www.npmjs.com/package/@fortawesome/angular-fontawesome

Monochord

Answer 6

npm install [email protected]

resolved the problem in my case.

Misjudge

Answer 7

Uninstall @angular/material, and reinstall from with the official command which makes a previous configuration of the theme to use, the error occurs due to unmatchability or not selecting a default theme.

Solution: install angular-core version.

npm install @angular/cdk@version
ng add @angular/material@version

Grobe

Answer 8

I had the similar issue with toastr in Angular.

Generic type 'ɵɵComponentDeclaration' requires between 7 and 8 type arguments.

50     static ɵcmp: i0.ɵɵComponentDeclaration<ToastNoAnimation, "[toast-component]", never, {}, {}, never, never, false, never>

Just change your config to

ToastrModule.forRoot(
      {
        maxOpened: 1,
        progressBar: true,
        progressAnimation: 'decreasing',
        preventDuplicates: true,
      }), 

Eserine