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?
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.