I am trying to learn angular material and set up a new project. I literally ran ng new projectName and then like the instructions provided by the angular docs ran ng add @angular/material which results in an error and stack trace. I attempted the solutions posted by others for this issue, which was to run npm install --save @angular/material @angular/cdk @angular/animations and that seems to allow me to run the ng add @angular/material but then when i try to do what the documentation for angular material says, and render a single component I cannot, and have an insane amount of errors that seem to be related to internal angular node modules.
I added the imports as such to app.module.ts
import { MatSliderModule } from '@angular/material/slider';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatSliderModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
and before even rendering the component in the html file i receive console errors if i try to build and serve the project. The list of which is far to long to post here but I will post what I think is relevant.
Please let me know if you have any clues as to what i may be doing wrong, as I have attempted most possible solutions i can find related to this topic.
Thank you.
the errors
Build at: 2021-11-25T17:40:09.958Z - Hash: 92d8b3a50286d8d61051 - Time:
347ms
Error: 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;
~~~
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;
~~~
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;
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;
~
node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:85[0m - error TS1128: Declaration or statement expected.
14 export declare type AbstractConstructor<T = object> = abstract new (...args: any[]) => T;
~~
Error: node_modules/@angular/cdk/a11y/aria-describer/aria-describer.d.ts:72:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
72 static ɵfac: i0.ɵɵFactoryDeclaration<AriaDescriber, never>;
~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/a11y/aria-describer/aria-describer.d.ts:73:22 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional
projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.
73 static ɵprov: i0.ɵɵInjectableDeclaration<AriaDescriber>;
~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/platform/platform.d.ts:27:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
27 static ɵfac: i0.ɵɵFactoryDeclaration<Platform, never>;
~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/platform/platform.d.ts:28:22 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.
28 static ɵprov: i0.ɵɵInjectableDeclaration<Platform>;
~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/platform/platform-module.d.ts:3:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no
exported member 'ɵɵFactoryDeclaration'.
3 static ɵfac: i0.ɵɵFactoryDeclaration<PlatformModule, never>;
~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/platform/platform-module.d.ts:4:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no
exported member 'ɵɵNgModuleDeclaration'.
4 static ɵmod: i0.ɵɵNgModuleDeclaration<PlatformModule, never, never, never>;
~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/platform/platform-module.d.ts:5:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no
exported member 'ɵɵInjectorDeclaration'.
5 static ɵinj: i0.ɵɵInjectorDeclaration<PlatformModule>;
~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/a11y/input-modality/input-modality-detector.d.ts:97:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
97 static ɵfac: i0.ɵɵFactoryDeclaration<InputModalityDetector, [null, null, null, { optional: true; }]>;
~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/a11y/input-modality/input-modality-detector.d.ts:98:22 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.
98 static ɵprov: i0.ɵɵInjectableDeclaration<InputModalityDetector>;
~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/a11y/focus-monitor/focus-monitor.d.ts:187:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
187 static ɵfac: i0.ɵɵFactoryDeclaration<FocusMonitor, [null, null, null, { optional: true; }, { optional: true; }]>;
~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/a11y/focus-monitor/focus-monitor.d.ts:188:22 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.
188 static ɵprov: i0.ɵɵInjectableDeclaration<FocusMonitor>;
~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/a11y/focus-monitor/focus-monitor.d.ts:207:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
207 static ɵfac: i0.ɵɵFactoryDeclaration<CdkMonitorFocus, never>;
~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/a11y/focus-monitor/focus-monitor.d.ts:208:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵDirectiveDeclaration'.
2080m static ɵdir: i0.ɵɵDirectiveDeclaration<CdkMonitorFocus, "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", never, {}, { "cdkFocusChange": "cdkFocusChange"; }, never>;
~~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/a11y/interactivity-checker/interactivity-checker.d.ts:58:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
58 static ɵfac: i0.ɵɵFactoryDeclaration<InteractivityChecker, never>;
~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/a11y/interactivity-checker/interactivity-checker.d.ts:59:22 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.
59 static ɵprov: i0.ɵɵInjectableDeclaration<InteractivityChecker>;
~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/a11y/focus-trap/focus-trap.d.ts:129:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
129 static ɵfac: i0.ɵɵFactoryDeclaration<FocusTrapFactory, never>;
~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/a11y/focus-trap/focus-trap.d.ts:130:22 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.
130 static ɵprov: i0.ɵɵInjectableDeclaration<FocusTrapFactory>;
~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/a11y/focus-trap/focus-trap.d.ts:163:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
163 static ɵfac: i0.ɵɵFactoryDeclaration<CdkTrapFocus, never>;
~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/a11y/focus-trap/focus-trap.d.ts:164:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵDirectiveDeclaration'.
164 static ɵdir: i0.ɵɵDirectiveDeclaration<CdkTrapFocus, "[cdkTrapFocus]", ["cdkTrapFocus"], { "enabled": "cdkTrapFocus"; "autoCapture": "cdkTrapFocusAutoCapture"; }, {}, never>;
~~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/a11y/focus-trap/focus-trap-manager.d.ts:24:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional
projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
24 static ɵfac: i0.ɵɵFactoryDeclaration<FocusTrapManager, never>;
~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/a11y/focus-trap/focus-trap-manager.d.ts:25:22 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional
projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.
25 static ɵprov: i0.ɵɵInjectableDeclaration<FocusTrapManager>;
~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/a11y/focus-trap/configurable-focus-trap-factory.d.ts:28:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
28 static ɵfac: i0.ɵɵFactoryDeclaration<ConfigurableFocusTrapFactory, [null, null, null, null, { optional: true; }]>;
~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/a11y/focus-trap/configurable-focus-trap-factory.d.ts:29:22 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.
29 static ɵprov: i0.ɵɵInjectableDeclaration<ConfigurableFocusTrapFactory>;
~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/observers/observe-content.d.ts:18:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
18 static ɵfac: i0.ɵɵFactoryDeclaration<MutationObserverFactory, never>;
~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/observers/observe-content.d.ts:19:22 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.
19 static ɵprov: i0.ɵɵInjectableDeclaration<MutationObserverFactory>;
~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/observers/observe-content.d.ts:50:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
50 static ɵfac: i0.ɵɵFactoryDeclaration<ContentObserver, never>; ~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/observers/observe-content.d.ts:51:22 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.
51 static ɵprov: i0.ɵɵInjectableDeclaration<ContentObserver>;
~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/observers/observe-content.d.ts:82:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
82 static ɵfac: i0.ɵɵFactoryDeclaration<CdkObserveContent, never>;
~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/observers/observe-content.d.ts:83:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵDirectiveDeclaration'.
83 static ɵdir: i0.ɵɵDirectiveDeclaration<CdkObserveContent, "[cdkObserveContent]", ["cdkObserveContent"], { "disabled": "cdkObserveContentDisabled"; "debounce": "debounce"; }, { "event": "cdkObserveContent"; }, never>;
~~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/observers/observe-content.d.ts:86:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
86 static ɵfac: i0.ɵɵFactoryDeclaration<ObserversModule, never>; ~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/observers/observe-content.d.ts:87:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵNgModuleDeclaration'.
87 static ɵmod: i0.ɵɵNgModuleDeclaration<ObserversModule, [typeof CdkObserveContent], never, [typeof CdkObserveContent]>;
~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/observers/observe-content.d.ts:88:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectorDeclaration'.
88 static ɵinj: i0.ɵɵInjectorDeclaration<ObserversModule>;
~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/a11y/live-announcer/live-announcer.d.ts:59:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional
projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
59 static ɵfac: i0.ɵɵFactoryDeclaration<LiveAnnouncer, [{ optional: true; }, null, null, { optional: true; }]>;
~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/a11y/live-announcer/live-announcer.d.ts:60:22 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional
projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.
60 static ɵprov: i0.ɵɵInjectableDeclaration<LiveAnnouncer>;
~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/a11y/live-announcer/live-announcer.d.ts:79:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional
projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
79 static ɵfac: i0.ɵɵFactoryDeclaration<CdkAriaLive, never>;
~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/a11y/live-announcer/live-announcer.d.ts:80:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional
projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵDirectiveDeclaration'.
80 static ɵdir: i0.ɵɵDirectiveDeclaration<CdkAriaLive, "[cdkAriaLive]", ["cdkAriaLive"], { "politeness": "cdkAriaLive"; }, {}, never>;
~~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/a11y/high-contrast-mode/high-contrast-mode-detector.d.ts:46:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
46 static ɵfac: i0.ɵɵFactoryDeclaration<HighContrastModeDetector, never>;
~~~~~~~~~~~~~~~~~~~~m
node_modules/@angular/cdk/a11y/high-contrast-mode/high-contrast-mode-detector.d.ts:47:22 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.
47 static ɵprov: i0.ɵɵInjectableDeclaration<HighContrastModeDetector>;
~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/a11y/a11y-module.d.ts:10:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
10 static ɵfac: i0.ɵɵFactoryDeclaration<A11yModule, never>;
~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/a11y/a11y-module.d.ts:11:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵNgModuleDeclaration'.
11 static ɵmod: i0.ɵɵNgModuleDeclaration<A11yModule, [typeof i1.CdkAriaLive, typeof i2.CdkTrapFocus, typeof i3.CdkMonitorFocus], [typeof i4.PlatformModule, typeof i5.ObserversModule], [typeof i1.CdkAriaLive,
typeof i2.CdkTrapFocus, typeof i3.CdkMonitorFocus]>;
~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/a11y/a11y-module.d.ts:12:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectorDeclaration'.
12 static ɵinj: i0.ɵɵInjectorDeclaration<A11yModule>;
~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/bidi/directionality.d.ts:22:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
22 static ɵfac: i0.ɵɵFactoryDeclaration<Directionality, [{ optional: true; }]>;
~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/bidi/directionality.d.ts:23:22 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.
23 static ɵprov: i0.ɵɵInjectableDeclaration<Directionality>;
~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/bidi/dir.d.ts:34:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
34 static ɵfac: i0.ɵɵFactoryDeclaration<Dir, never>;
~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/bidi/dir.d.ts:35:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵDirectiveDeclaration'.
35 static ɵdir: i0.ɵɵDirectiveDeclaration<Dir, "[dir]", ["dir"], { "dir": "dir"; }, { "change": "dirChange"; }, never>;
~~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/bidi/bidi-module.d.ts:4:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
4 static ɵfac: i0.ɵɵFactoryDeclaration<BidiModule, never>;
~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/bidi/bidi-module.d.ts:5:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵNgModuleDeclaration'.
5 static ɵmod: i0.ɵɵNgModuleDeclaration<BidiModule, [typeof i1.Dir], never, [typeof i1.Dir]>;
~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/cdk/bidi/bidi-module.d.ts:6:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectorDeclaration'.
6 static ɵinj: i0.ɵɵInjectorDeclaration<BidiModule>;
~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/material/core/common-behaviors/common-module.d.ts:47:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
47 static ɵfac: i0.ɵɵFactoryDeclaration<MatCommonModule, [null,
{ optional: true; }, null]>;
~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/material/core/common-behaviors/common-module.d.ts:48:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵNgModuleDeclaration'.
48 static ɵmod: i0.ɵɵNgModuleDeclaration<MatCommonModule, never, [typeof i1.BidiModule], [typeof i1.BidiModule]>;
~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/material/core/common-behaviors/common-module.d.ts:49:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectorDeclaration'.
49 static ɵinj: i0.ɵɵInjectorDeclaration<MatCommonModule>;
~~~~~~~~~~~~~~~~~~~~~
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;
~~~~~~~~
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;
~~~
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;
~
node_modules/@angular/material/core/error/error-options.d.ts:6m:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
6 static ɵfac: i0.ɵɵFactoryDeclaration<ShowOnDirtyErrorStateMatcher, never>;
~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/material/core/error/error-options.d.ts:7:22 -
error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.
7 static ɵprov: i0.ɵɵInjectableDeclaration<ShowOnDirtyErrorStateMatcher>;
~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/material/core/error/error-options.d.ts:12:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
12 static ɵfac: i0.ɵɵFactoryDeclaration<ErrorStateMatcher, never>;
~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/material/core/error/error-options.d.ts:13:22 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.
13 static ɵprov: i0.ɵɵInjectableDeclaration<ErrorStateMatcher>;
~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/material/core/datetime/native-date-adapter.d.ts:72:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
72 static ɵfac: i0.ɵɵFactoryDeclaration<NativeDateAdapter, [{ optional: true; }, null]>;
~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/material/core/datetime/native-date-adapter.d.ts:73:22 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.
73 static ɵprov: i0.ɵɵInjectableDeclaration<NativeDateAdapter>;
~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/material/core/datetime/index.d.ts:8:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no
exported member 'ɵɵFactoryDeclaration'.
8 static ɵfac: i0.ɵɵFactoryDeclaration<NativeDateModule, never>; ~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/material/core/datetime/index.d.ts:9:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no
exported member 'ɵɵNgModuleDeclaration'.
9 static ɵmod: i0.ɵɵNgModuleDeclaration<NativeDateModule, never, [typeof i1.PlatformModule], never>;
~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/material/core/datetime/index.d.ts:10:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectorDeclaration'.
10 static ɵinj: i0.ɵɵInjectorDeclaration<NativeDateModule>;
~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/material/core/datetime/index.d.ts:13:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
13 static ɵfac: i0.ɵɵFactoryDeclaration<MatNativeDateModule, never>;
~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/material/core/datetime/index.d.ts:14:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵNgModuleDeclaration'.
CodePudding user response：
I'm using Angular11 with Angular material 11 as well.
As per today, if you run the command:
npm install --save @angular/material
...it will result installing "Material 12" which is more suited for "Angular 12".
What I did, and probably will help you, is to run it like this:
npm install --save @angular/[email protected]
Please note that the specific version i'm pointing here might not be entirely compatible, you might get a warning in the browser console, so you might need to find the exact number, but at least should work for your Angular 11.
Also, are you sure that your project runs in Angular11? Check the package.json and confirm the @angular/cdk @angular/cli points to 11.x.x
Ps. I don't remember to manually install animations, probably you could skip that.
CodePudding user response：
For me to get this to work I had to
- uninstall global angular CLI and upgrade to latest version
- create a new project with the new version ng new ... (im sure you could upgrade manually)
- run
npm install --save @angular/material @angular/cdk - run
ng add @angular/material - now I can import and use components from the material library.
The issues I was facing seems like some internal bug either with angular itself or the material library, the ng add command does not do what the angular material docs says it does.
I still do not understand the cause of the issues however so if any knows why this is happening it would be great to get an explaination.