MatIconModule no longer compiles in libraries

Question

I'm trying to use the MatIconModule in a Angular Package Format library and when I introduce the MatIconModule it fails to compile. To see for yourself clone the MVCE repository:

git clone git@github.com:fireflysemantics/maticonmoduleerror.git
cd maticonmoduleerror
npm i
ng build --prod fs-assets

This is what the module looks like:

import { NgModule } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
  declarations: [
  ],
  imports: [MatIconModule
  ],
  exports: [
  ]
})
export class FsAssetsModule { }

If MatIconModule is removed, it compiles. Angular Material was added to the root project the standard way with ng add @angular/material. These are the compiler errors:

> ole@mkt:~/Temp/clone/maticonmoduleerror$ ng build --prod fs-assets
Building Angular Package

------------------------------------------------------------------------------
Building entry point '@fireflysemantics/assets'
------------------------------------------------------------------------------
✖ Compiling TypeScript sources through NGC
ERROR: projects/fs-assets/node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:64 - error TS1005: ';' expected.

14 export declare type AbstractConstructor<T = object> = abstract new (...args: any[]) => T;
                                                                  ~~~
projects/fs-assets/node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:69 - error TS1109: Expression expected.

14 export declare type AbstractConstructor<T = object> = abstract new (...args: any[]) => T;
                                                                       ~~~
projects/fs-assets/node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:82 - error TS1011: An element access expression should take an argument.

14 export declare type AbstractConstructor<T = object> = abstract new (...args: any[]) => T;
                                                                                    
projects/fs-assets/node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:83 - error TS1005: ';' expected.

14 export declare type AbstractConstructor<T = object> = abstract new (...args: any[]) => T;
                                                                                     ~
projects/fs-assets/node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:85 - error TS1128: Declaration or statement expected.

14 export declare type AbstractConstructor<T = object> = abstract new (...args: any[]) => T;
                                                                                       ~~
projects/fs-assets/node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:55 - error TS2304: Cannot find name 'abstract'.

14 export declare type AbstractConstructor<T = object> = abstract new (...args: any[]) => T;
                                                         ~~~~~~~~
projects/fs-assets/node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:78 - error TS2693: 'any' only refers to a type, but is being used as a value here.

14 export declare type AbstractConstructor<T = object> = abstract new (...args: any[]) => T;
                                                                                ~~~
projects/fs-assets/node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:88 - error TS2304: Cannot find name 'T'.

14 export declare type AbstractConstructor<T = object> = abstract new (...args: any[]) => T;
                                                                                          ~
projects/fs-assets/node_modules/@angular/material/core/option/optgroup.d.ts:16:22 - error TS2420: Class '_MatOptgroupBase' incorrectly implements interface 'CanDisable'.
  Property 'disabled' is missing in type '_MatOptgroupBase' but required in type 'CanDisable'.

16 export declare class _MatOptgroupBase extends _MatOptgroupMixinBase implements CanDisable {
                        ~~~~~~~~~~~~~~~~

  projects/fs-assets/node_modules/@angular/material/core/common-behaviors/disabled.d.ts:12:5
    12     disabled: boolean;
           ~~~~~~~~
    'disabled' is declared here.
projects/fs-assets/node_modules/@angular/material/icon/icon.d.ts:60:22 - error TS2420: Class 'MatIcon' incorrectly implements interface 'CanColor'.
  Type 'MatIcon' is missing the following properties from type 'CanColor': color, defaultColor

60 export declare class MatIcon extends _MatIconMixinBase implements OnInit, AfterViewChecked, CanColor, OnDestroy {
                        ~~~~~~~

An unhandled exception occurred: projects/fs-assets/node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:64 - error TS1005: ';' expected.

14 export declare type AbstractConstructor<T = object> = abstract new (...args: any[]) => T;
                                                                  ~~~
projects/fs-assets/node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:69 - error TS1109: Expression expected.

14 export declare type AbstractConstructor<T = object> = abstract new (...args: any[]) => T;
                                                                       ~~~
projects/fs-assets/node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:82 - error TS1011: An element access expression should take an argument.

14 export declare type AbstractConstructor<T = object> = abstract new (...args: any[]) => T;
                                                                                    
projects/fs-assets/node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:83 - error TS1005: ';' expected.

14 export declare type AbstractConstructor<T = object> = abstract new (...args: any[]) => T;
                                                                                     ~
projects/fs-assets/node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:85 - error TS1128: Declaration or statement expected.

14 export declare type AbstractConstructor<T = object> = abstract new (...args: any[]) => T;
                                                                                       ~~
projects/fs-assets/node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:55 - error TS2304: Cannot find name 'abstract'.

14 export declare type AbstractConstructor<T = object> = abstract new (...args: any[]) => T;
                                                         ~~~~~~~~
projects/fs-assets/node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:78 - error TS2693: 'any' only refers to a type, but is being used as a value here.

14 export declare type AbstractConstructor<T = object> = abstract new (...args: any[]) => T;
                                                                                ~~~
projects/fs-assets/node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:88 - error TS2304: Cannot find name 'T'.

14 export declare type AbstractConstructor<T = object> = abstract new (...args: any[]) => T;
                                                                                          ~
projects/fs-assets/node_modules/@angular/material/core/option/optgroup.d.ts:16:22 - error TS2420: Class '_MatOptgroupBase' incorrectly implements interface 'CanDisable'.
  Property 'disabled' is missing in type '_MatOptgroupBase' but required in type 'CanDisable'.

16 export declare class _MatOptgroupBase extends _MatOptgroupMixinBase implements CanDisable {
                        ~~~~~~~~~~~~~~~~

  projects/fs-assets/node_modules/@angular/material/core/common-behaviors/disabled.d.ts:12:5
    12     disabled: boolean;
           ~~~~~~~~
    'disabled' is declared here.
projects/fs-assets/node_modules/@angular/material/icon/icon.d.ts:60:22 - error TS2420: Class 'MatIcon' incorrectly implements interface 'CanColor'.
  Type 'MatIcon' is missing the following properties from type 'CanColor': color, defaultColor

60 export declare class MatIcon extends _MatIconMixinBase implements OnInit, AfterViewChecked, CanColor, OnDestroy {
                        ~~~~~~~

See "/tmp/ng-14VpXS/angular-errors.log" for further details.

This used to work fine. Any ideas?

Answer 1

Your project is still using Angular 11, see the package.json in the linked repository. Updating to Angular 12 using ng update @angular/core @angular/cli @angular/material should fix the issue.